<!DOCTYPE html>
<html lang="ru" prefix="og: http://ogp.me/ns#">

<head>
    <base href="[[!++site_url]]">
    <meta charset="[[++modx_charset]]">
    <title>[[*longtitle:notags:default=`[[*pagetitle:notags]]`]] | [[++site_name]]</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="description" content="[[*description:notags:default=`[[++site_name]] | [[*longtitle:notags:default=`[[*pagetitle:notags]]`]]`]]">
    <meta name="keywords" content="[[+seoPro.keywords:notags:default=`[[*pagetitle:notags]] [[++site_name]]`]]">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1b43e9">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    
    <link href="/assets/components/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://itchief.ru/examples/vendors/jquery/jquery-3.4.1.min.js"></script>
    <script defer src="/assets/components/js/nav.js"></script>
    <style>
        .marginBottom-0 {
            margin-bottom: 0;
        }

        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu>.dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px 6px;
            border-radius: 0 6px 6px 6px;
        }
.navbar-right {
    float: left !important;
}
        .dropdown-submenu>a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #cccccc;
            margin-top: 5px;
            margin-right: -10px;
        }

        .dropdown-submenu:hover>a:after {
            border-left-color: #555;
        }

        .dropdown-submenu.pull-left {
            float: none;
        }

        .dropdown-submenu.pull-left>.dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

        .dropdown-menu>li>a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: 600 !important;
            line-height: 1.42857143;
            white-space: nowrap;
        }

        html {
            background-image: url(/assets/components/main/images/images9557/fon.jpg);
            background-size: cover;
            background-position: 50% 14.1%;
            background-repeat: repeat;
            background-attachment: fixed;
            height: 100%;

        }

        body {
            background-image: url(/assets/components/main/images/images9557/fon.jpg);
            background-size: cover;
            background-position: 50% 14.1%;
            background-repeat: repeat;
            background-attachment: fixed;
            position: relative;
            height: 100%;
        }

        a {
            color: #000000;
        }

        .panel-body {
            padding: 20px 25px 10px 25px;
            background-image: url(/assets/components/main/images/images9557/fon.jpg);
            background-size: cover;
            background-position: 50% 14.1%;
            background-repeat: repeat;
            background-attachment: fixed;
            font-size: 16px;

        }

        .container {
            box-sizing: border-box;
            min-height: 100%;
            padding-bottom: 110px;
        }

        .btn-link {
            font-weight: 400;
            color: #000000;
            border-radius: 0;
        }

        .btn-link:focus,
        .btn-link:hover {
            color: #337ab7 !important;
            background-color: transparent;
            text-decoration: none;
        }

        .nav {
            padding-left: 0;
            margin-bottom: 0;
            font-size: 16px;
            font-weight: 700;
            list-style: none;
            font-family: 'Noto Sans', sans-serif;
        }

        footer {
            font-weight: 400;
            font-size: 18px;
            font-family: Montserrat, sans-serif;
            width: 100%;
            background-color: #000;
            bottom: 0;
            color: #ffffff;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 106px;
            margin-top: -106px;
        }

        a:focus,
        a:hover {
            color: #337ab7;
            text-decoration: none !important;
            ;
        }

        .panel-primary>.panel-heading {
            color: #fff;
            background-color: #337ab7;
            border-color: #337ab7;
            font-size: 18px;
        }

        .btn-primary {
            color: #fff;
            background-color: #337ab7;
            border-color: #337ab7;
        }

        .panel-primary {
            border-color: #337ab7;
            box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.1);
        }


        @media (min-width: 300px) and (max-width: 600px) {
            .footer {
                min-height: 50px;
            }
        }
    </style>

</head>

[[!UpdateProfile? &validate=`fullname:required` &preHooks=`loadUserPhoto`]]

<script>
    // После загрузки страницы
    $(function() {
        // Произошло изменение значения элемента с id = "photo"
        $('#photo').change(function(e) {
            // Если браузер не поддерживает FileReader, то ничего не делаем
            if (!window.FileReader) {
                console.log('Браузер не поддерживает File API');
                return;
            }
            // Получаем выбранный файл (изображение)
            var file = e.target.files[0];
            // Выводим сообщение, что браузер не поддерживает указанный тип файла
            if (!((file.type == 'image/png') || (file.type == 'image/jpeg'))) {
                $('#img-error').text('Загруженный файл не является изображением');
                return;
            }
            // Выводим сообщение, что файл имеет большой размер
            if (file.size >= 524288) {
                $('#img-error').text('Размер файла больше чем 512Кбайт');
                return;
            }
            $('#img-error').text('');
            // Создаём экземпляр объекта FileReader, посредством которого будем читать файл
            var reader = new FileReader();
            // После успешного завершения операции чтения файла
            $(reader).on('load', function(event) {
                // Указываем в качестве значения атрибута src изображения содержимое файла (картинки)
                $('#img-photo').attr('src', event.target.result);
                // Изменяем ширину и высоту изображения
                if ($('#img-photo').width() >= $('#img-photo').height()) {
                    $('#img-photo').css('height', '100px');
                    $('#img-photo').css('margin-left', -($('#img-photo').width() - 100) / 2);
                } else {
                    $('#img-photo').css('widht', '100px');
                    $('#img-photo').css('margin-top', -($('#img-photo').height() - 100) / 2);
                }
            });
            // Запускает процесс чтения файла (изображения). После завершения чтения файла его содержимое будет доступно посредством атрибута result
            reader.readAsDataURL(file);
        });
        // Перед отправкой формы на сервер...
        $("#updateProfile").submit(function(e) {
            // Проверяем значения поля photo. Если оно равно пустой строке, то данные отправляем
            if ($('#photo').val() == '') {
                return;
            }
            // Если элемент содержит некоторую строку (ошибки связанные с фото), то отменяем отправку формы
            if ((($('#img-error').text()).length > 0)) {
                e.preventDefault();
            }
        });
    });
</script>

<nav class="navbar navbar-default">
    <div style="max-width: 1170px;" class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display
      <div class="navbar-header">-->
        <!-- <button style="margin-top: 15px;" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             </button> -->
        <!--  <a href="https://myvpn.csp-cloud.org/authentication/"><img style="max-height: 65px; margin: 8px 50px 8px 15px;max-width: 65px;" src="https://myvpn.csp-cloud.org/assets/components/main/images/images9557/logo1.png" )"=""></a>
      </div> -->

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" style="margin-top: 10px;" id="bs-example-navbar-collapse-1">
            <!-- <ul class="nav navbar-nav">
                 <li class="dropdown hidden-lg hidden-md hidden-sm">
                 <a style="color: #000;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Услуги<span class="caret"></span></a>
                 <ul class="dropdown-menu">
                 <li><a href="[[~99]]">Отправить сообщение</a></li>
                 <li><a href="[[~44]]">Генерация сообщений</a></li>
                 <li><a href="[[~54]]">Список рассылок</a></li>
                 <li><a href="[[~45]]">Номерные пулы</a></li>
                 <li><a href="[[~55]]">Черный список</a></li>
                 <li><a href="[[~47]]">Отчёты</a></li>
                 </ul>
                 </li>
                 <li id="sidebarCollapse">
                 <a style="color: #000;" class="hidden-xs" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-align-justify" style="padding-right:5px;"></span>Меню</a>

                 </li>
                 <li>
                 <a href="" style="color: #000;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Мой счет<span class="caret"></span></a>
                 <ul class="dropdown-menu">
                 <li><a href="">Пополнить счет</a></li>
                 <li><a href="">Пополнения и расходы</a></li>
                 </ul>
                 </li>
                 <li>
                 <a href="" style="color: #000;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Помощь<span class="caret"></span></a>
                 <ul class="dropdown-menu">
                 <li><a href="">Онлайн чат</a></li>
                 <li><a href="">Заявка в поддержку</a></li>
                 <li><a href="">Перейти на главный сайт</a></li>
                 </ul>
                 </li>
                 </ul> -->
            <ul class="nav navbar-nav navbar-right">
                <!-- <li><a style="color: #000;" href="">Баланс: [[!balans]]</a></li>  -->
                <li>
                    <a href="" style="color: #000;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Пользователь: [[!+modx.user.id:userinfo=`fullname`]]<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="[[~33]]">Мой профиль</a></li>
                        <li><a href="[[~100]]">Личный кабинет</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="[[~31? &service=logout]]" class="data-exit" title="[[+actionMsg]]title=" Выход">Выход</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
