<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{layouts/main-layout}">
<head>
    <title>Состояние ОГ</title>
    <link rel="stylesheet" href="/css/catalog.css"/>
    <link rel="stylesheet" href="/css/group-state.css"/>
</head>
<body>
<th:block layout:fragment="content">
    <div id="group-state-page" class="catalog-page py-3">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
            <div>
                <h2 class="mb-1">Состояние ОГ</h2>
                <div class="catalog-helper">Состояние орбитальной группировки на выбранный момент времени.</div>
            </div>
            <button id="group-state-refresh" type="button" class="btn btn-outline-secondary">Обновить</button>
        </div>

        <div id="group-state-alert"></div>

        <div class="row g-4">
            <div class="col-12 col-xl-4">
                <div class="card catalog-card group-state-sidebar h-100">
                    <div class="card-header">
                        <div class="catalog-section-title">Доступные группировки</div>
                    </div>
                    <div class="card-body catalog-list p-0">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>ОГ</th>
                                <th>КА</th>
                                <th>Интервал</th>
                            </tr>
                            </thead>
                            <tbody id="group-state-list"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-12 col-xl-8">
                <div class="d-flex flex-column gap-4">
                    <div class="card catalog-card">
                        <div class="card-header">
                            <div class="catalog-section-title">Время</div>
                        </div>
                        <div class="card-body">
                            <div id="group-state-summary" class="catalog-helper mb-3">Выберите группировку слева.</div>
                            <div class="group-state-time-grid">
                                <div>
                                    <label for="group-state-time" class="form-label">Момент времени</label>
                                    <input id="group-state-time" type="datetime-local" step="1" class="form-control"/>
                                </div>
                                <div class="d-flex align-items-end">
                                    <button id="group-state-apply" type="button" class="btn btn-primary w-100">Показать состояние</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card catalog-card">
                        <div class="card-header">
                            <div class="catalog-section-title">Таблица</div>
                        </div>
                        <div class="card-body">
                            <div id="group-state-table-empty" class="catalog-empty">Выберите группировку с доступным интервалом расчета.</div>
                            <div id="group-state-table-wrap" class="group-state-table-wrap d-none"></div>
                        </div>
                    </div>

                    <div class="card catalog-card">
                        <div class="card-header">
                            <div class="catalog-section-title">График</div>
                        </div>
                        <div class="card-body">
                            <div id="group-state-charts-empty" class="catalog-empty">Графики появятся после выбора момента времени.</div>
                            <div id="group-state-charts" class="group-state-chart-grid d-none"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/group_state_scripts.js"></script>
</th:block>
</body>
</html>
