<!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/current-plans.css"/>
</head>
<body>
<th:block layout:fragment="content">
    <div id="current-plans-page" class="catalog-page current-plans-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>
            <div class="d-flex gap-2 flex-wrap">
                <button id="current-plans-create-mission" type="button" class="btn btn-primary" disabled>Создать план</button>
                <button id="current-plans-refresh" type="button" class="btn btn-outline-secondary">Обновить</button>
            </div>
        </div>

        <div id="current-plans-alert"></div>

        <div class="row g-4 current-plans-layout">
            <div class="col-12 col-xl-4">
                <div class="card catalog-card current-plans-sidebar h-100">
                    <div class="card-header">
                        <div class="catalog-section-title">Спутники</div>
                        <div class="catalog-helper mt-1">Выберите КА для просмотра текущих планов.</div>
                    </div>
                    <div class="card-body p-3">
                        <label for="current-plans-satellite-filter" class="form-label">Фильтр</label>
                        <input id="current-plans-satellite-filter"
                               type="search"
                               class="form-control form-control-sm"
                               autocomplete="off"
                               placeholder="ID, NORAD, код, имя, тип">
                    </div>
                    <div class="card-body catalog-list p-0">
                        <table class="table table-hover mb-0 current-plans-satellites-table">
                            <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>Спутник</th>
                                <th>Тип</th>
                            </tr>
                            </thead>
                            <tbody id="current-plans-satellites-body"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-12 col-xl-8">
                <div class="d-flex flex-column gap-4 h-100 current-plans-main-column">
                    <div class="card catalog-card current-plans-missions-card">
                        <div class="card-header d-flex justify-content-between align-items-start gap-3 flex-wrap">
                            <div>
                                <div class="catalog-section-title">Миссии выбранного спутника</div>
                                <div id="current-plans-selected-satellite" class="catalog-helper mt-1">Выберите спутник слева.</div>
                            </div>
                            <div class="current-plans-pagination">
                                <button id="current-plans-missions-prev" type="button" class="btn btn-outline-secondary btn-sm" disabled>Назад</button>
                                <span id="current-plans-missions-page" class="catalog-helper mx-2">0 / 0</span>
                                <button id="current-plans-missions-next" type="button" class="btn btn-outline-secondary btn-sm" disabled>Вперёд</button>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div id="current-plans-missions-empty" class="catalog-empty">Выберите спутник для загрузки миссий.</div>
                            <div class="table-responsive current-plans-table-wrap d-none" id="current-plans-missions-wrap">
                                <table class="table table-hover mb-0">
                                    <thead class="table-light">
                                    <tr>
                                        <th>Миссия</th>
                                        <th>Начало</th>
                                        <th>Конец</th>
                                        <th>Станция</th>
                                        <th>Статус</th>
                                        <th class="current-plans-actions-col">Действия</th>
                                    </tr>
                                    </thead>
                                    <tbody id="current-plans-missions-body"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="card catalog-card current-plans-modes-card flex-grow-1">
                        <div class="card-header d-flex justify-content-between align-items-start gap-3 flex-wrap">
                            <div>
                                <div class="catalog-section-title">Режимы работы внутри миссии</div>
                                <div id="current-plans-selected-mission" class="catalog-helper mt-1">Выберите миссию в верхней таблице.</div>
                            </div>
                            <button id="current-plans-export-csv" type="button" class="btn btn-outline-secondary btn-sm" disabled>Сохранить CSV</button>
                        </div>
                        <div class="card-body p-0">
                            <div id="current-plans-modes-empty" class="catalog-empty">Режимы появятся после выбора миссии.</div>
                            <div class="table-responsive current-plans-table-wrap d-none" id="current-plans-modes-wrap">
                                <table class="table table-hover mb-0">
                                    <thead class="table-light">
                                    <tr>
                                        <th>Тип</th>
                                        <th>Начало</th>
                                        <th>Виток</th>
                                        <th>Длительность, с</th>
                                        <th>Параметры</th>
                                        <th>Статус / источник</th>
                                    </tr>
                                    </thead>
                                    <tbody id="current-plans-modes-body"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="current-plans-create-modal" tabindex="-1" aria-labelledby="current-plans-create-modal-title" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="current-plans-create-form" class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="current-plans-create-modal-title">Создание текущего плана</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Спутник</label>
                        <input id="current-plans-create-satellite" type="text" class="form-control" readonly>
                    </div>
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label for="current-plans-create-start" class="form-label">Начало миссии</label>
                            <input id="current-plans-create-start" type="datetime-local" class="form-control" required>
                        </div>
                        <div class="col-12 col-md-6">
                            <label for="current-plans-create-stop" class="form-label">Конец миссии</label>
                            <input id="current-plans-create-stop" type="datetime-local" class="form-control" required>
                        </div>
                    </div>
                    <div class="mt-3">
                        <label for="current-plans-create-station" class="form-label">Станция</label>
                        <input id="current-plans-create-station" type="text" class="form-control" maxlength="32" placeholder="Необязательно">
                    </div>
                    <div class="mt-3">
                        <label for="current-plans-create-status" class="form-label">Статус</label>
                        <input id="current-plans-create-status" type="text" class="form-control" maxlength="15" value="NEW">
                    </div>
                    <div class="catalog-helper mt-3">План будет создан для выбранного спутника. Расчёт съёмки и сбросов запускается кнопками в строке плана.</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
                    <button id="current-plans-create-submit" type="submit" class="btn btn-primary">Создать</button>
                </div>
            </form>
        </div>
    </div>

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