<!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/tgu-planning.css"/>
</head>
<body>
<th:block layout:fragment="content">
    <div id="tgu-planning-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 id="tgu-planning-selected-platform" class="catalog-helper">Все планы по доступным платформам.</div>
            </div>
            <div class="d-flex align-items-end gap-2 flex-wrap">
                <div>
                    <label for="tgu-history-days" class="form-label mb-1">История, дней</label>
                    <select id="tgu-history-days" class="form-select form-select-sm">
                        <option value="1">1</option>
                        <option value="3">3</option>
                        <option value="7" selected>7</option>
                        <option value="14">14</option>
                    </select>
                </div>
                <button id="tgu-show-all" type="button" class="btn btn-outline-secondary btn-sm">Все планы</button>
                <button id="tgu-refresh" type="button" class="btn btn-primary btn-sm">Обновить</button>
            </div>
        </div>

        <div id="tgu-planning-alert"></div>

        <div class="row g-4">
            <div class="col-12 col-xl-4">
                <div class="card catalog-card h-100">
                    <div class="card-header">
                        <div class="catalog-section-title">Платформы</div>
                        <div class="catalog-helper mt-1">Выберите строку с NORAD для фильтрации планов.</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>NORAD</th>
                                <th>Статус</th>
                                <th>Миссия</th>
                            </tr>
                            </thead>
                            <tbody id="tgu-platforms-body"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-12 col-xl-8">
                <div class="card catalog-card h-100">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                            <div>
                                <div class="catalog-section-title">Планы ТГУ</div>
                                <div id="tgu-plans-meta" class="catalog-helper mt-1">Загрузка планов.</div>
                            </div>
                            <ul class="nav nav-tabs card-header-tabs tgu-planning-tabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button id="tgu-tab-table" type="button" class="nav-link active" data-tgu-tab="table" role="tab">
                                        Таблица
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button id="tgu-tab-chart" type="button" class="nav-link" data-tgu-tab="chart" role="tab">
                                        График
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div id="tgu-table-panel" class="tgu-tab-panel">
                            <div class="table-responsive">
                                <table class="table table-hover mb-0">
                                    <thead class="table-light">
                                    <tr>
                                        <th>planId</th>
                                        <th>spacecraftId</th>
                                        <th>Платформа</th>
                                        <th>Начало</th>
                                        <th>Конец</th>
                                        <th>kppId</th>
                                        <th>Статус</th>
                                        <th>Действия</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tgu-plans-body"></tbody>
                                </table>
                            </div>
                        </div>

                        <div id="tgu-chart-panel" class="tgu-tab-panel d-none">
                            <div class="tgu-chart-controls">
                                <div>
                                    <label for="tgu-chart-from" class="form-label mb-1">from</label>
                                    <input id="tgu-chart-from" type="datetime-local" class="form-control form-control-sm"/>
                                </div>
                                <div>
                                    <label for="tgu-chart-to" class="form-label mb-1">to</label>
                                    <input id="tgu-chart-to" type="datetime-local" class="form-control form-control-sm"/>
                                </div>
                                <button id="tgu-chart-show" type="button" class="btn btn-primary btn-sm">Показать</button>
                                <div class="btn-group btn-group-sm" role="group" aria-label="Быстрый выбор интервала">
                                    <button type="button" class="btn btn-outline-secondary" data-tgu-range-hours="24">24ч</button>
                                    <button type="button" class="btn btn-outline-secondary" data-tgu-range-hours="72">3 суток</button>
                                    <button type="button" class="btn btn-outline-secondary" data-tgu-range-hours="168">7 суток</button>
                                </div>
                            </div>

                            <div id="tgu-chart-error" class="text-danger small px-3 pb-2 d-none"></div>

                            <div class="tgu-chart-legend px-3">
                                <span class="tgu-legend-item"><span class="tgu-legend-swatch tgu-status-accepted"></span>ACCEPTED</span>
                                <span class="tgu-legend-item"><span class="tgu-legend-swatch tgu-status-rejected"></span>REJECTED</span>
                                <span class="tgu-legend-item"><span class="tgu-legend-swatch tgu-status-planned"></span>PLANNED</span>
                                <span class="tgu-legend-item"><span class="tgu-legend-swatch tgu-status-waiting"></span>WAITING_DECISION</span>
                                <span class="tgu-legend-item"><span class="tgu-legend-swatch tgu-status-issuing"></span>ISSUING</span>
                                <span class="tgu-legend-item"><span class="tgu-legend-swatch tgu-status-expired"></span>EXPIRED</span>
                                <span class="tgu-legend-item"><span class="tgu-legend-swatch tgu-status-superseded"></span>SUPERSEDED</span>
                                <span class="tgu-legend-item"><span class="tgu-legend-swatch tgu-status-ambiguous"></span>START_AMBIGUOUS</span>
                                <span class="tgu-legend-note">Стрелки показывают следующий план того же КА по времени.</span>
                            </div>

                            <div id="tgu-timeline-scroll" class="tgu-timeline-scroll">
                                <div id="tgu-timeline-content" class="tgu-timeline-content text-muted text-center py-4">
                                    Загрузка планов.
                                </div>
                            </div>
                            <div id="tgu-plan-details" class="tgu-plan-details"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/tgu_planning_scripts.js"></script>
</th:block>
</body>
</html>
