<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, introductory scale=1">
    <title>Панель управления</title>
    <link rel="stylesheet" href="../styles/main.css" />
</head>
<body>

    <style>
        .main .name {
            margin-bottom: 100px !important;
        }

        .main {
        margin-top: 92px !important;
        }

        .main .bg {
        min-height: calc(100vh - 162px - 92px);
        }
    </style>

    <div class="page-transition"></div>

    <header>
        <img src="../img/argus.png">
        <h1>Аргус</h1>
        <h2><span>/</span> {{Organisation}}</h2>
    </header>

    <section class="account-info">
        <div id="account-main">
            <img id="person" src="../img/person.svg">
            <span>{{User}}</span>
            <img id="down" src="../img/down.svg">
            <img id="up" src="../img/up.svg">
        </div>
        <a href="/logout"><div id="account-additional" class="additional">Выйти</div></a>
    </section>

    


    <section class="navigation">
        <a href="/">
            <div class="selected"><img src="../img/chart.svg">Главная</div>
        </a>
        <a href="/devices">
            <div><img src="../img/cloud.svg">Устройства</div>
        </a>
        <a href="/reports">
            <div><img src="../img/bubble.svg">Отчёты</div>
        </a>
        <a href="/live">
            <div><img src="../img/waves.svg">Трансляция</div>
        </a>
        <a href="/videos">
            <div><img src="../img/play.svg">Записи</div>
        </a>
        <a href="https://forms.yandex.ru/cloud/6515ecda3e9d08f17262c332/" target="_blank">
            <div><img src="../img/bug.svg">Собщить об ошибке</div>
        </a>
        {{#if isAdmin}}
        <a class="admin-panel" href="/admin">
            <div><img src="../img/keyboard.svg">Админка</div>
        </a>
        {{/if}}
        <a class="settings" href="/settings">
            <div><img src="../img/gear.svg">Настройки</div>
        </a>
    </section>

    <section class="main">
        {{#if ifDBError}}
      <section class="dberror">
        <div class="erorr-container">
          <img src="../img/warning.svg"> <br>
          <h1>Ошибка </h1> <br>
          <span>Не удалось получить данные из БД</span>
          <button type="button" onclick="location.reload();">Повторить попытку</button>
        </div>
      </section>
      {{/if}}
        <div class="name">
            <img src="../img/cars.svg"><span>Сводка по {{Count}} ТС</span>
        </div>
        <section class="bg">
            <section class="content">

                    <div class="graph left">
                        <h1>Предупреждения</h1>
                        <span>10 д</span>
                        <div class="chart">
                            <canvas id="chart-warnings"></canvas>
                        </div>
                    </div>
                    <div class="graph right">
                        <h1>Позиционирование</h1>
                        <span>10 д</span>
                        <div class="chart">
                            <canvas id="chart-positions"></canvas>
                        </div>
                    </div>

            </section>
        </section>
    </section>

    <script>
        var warningsData = {
        labels: [
            {{#each Dates}}
            '{{this}}',
            {{/each}}
        ],
        datasets: [
            {
            label: "Актуальный период",
            backgroundColor: "rgba(235, 146, 139, 1)",
            borderWidth: 0,
            borderRadius: 9,
            hoverBackgroundColor: "rgba(235, 146, 139, 0.8)",
            data: [{{AlarmsLast11Days}}],
            grouped: false,
            },
            {
            label: "Предыдущий период",
            backgroundColor: "rgba(235, 146, 139, 0.5)",
            borderWidth: 0,
            borderRadius: 9,
            hoverBackgroundColor: "rgba(235, 146, 139, 0.3)",
            data: [{{Alarms11DaysBefore}}],
            },
        ],
        };

        var positionsData = {
        labels: [
        {{#each Dates}}
            '{{this}}',
            {{/each}}
        ],
        datasets: [
            {
            label: "Позиционирование",
            borderColor: "#8086F9",
            fill: false,
            data: [
                {{PositionsLast11Days}}
            ],
            pointStyle: false,
            pointRadius: 25,
            pointHoverRadius: 25,
            tension: 0.4,
            },
        ],
        };
    </script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="../scripts/graphs.js"></script>
    <script>
        // Скрытие/Показ дополнительных меню аккаунта
        const accountMain = document.getElementById('account-main');
        const accountAdditional = document.getElementById('account-additional');
        const accountUp = document.getElementById('up');
        const accountDown = document.getElementById('down');
        accountAdditional.style.display = 'none';
        accountUp.style.display = 'none';
        
        accountMain.addEventListener('click', () => {
          if (accountAdditional.style.display === 'none') {
            accountAdditional.style.display = 'flex';
            accountUp.style.display = 'unset';
            accountDown.style.display = 'none';
          } else {
            accountAdditional.style.display = 'none';
            accountUp.style.display = 'none';
            accountDown.style.display = 'unset';
          }
        });
      </script>

      
    
</body>
</html>