<!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/complex-plan.css"/>
</head>
<body>
<th:block layout:fragment="content">
    <div class="complex-plan-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="complex-plan-helper">История расчетов комплексного плана и параметры выбранного запуска.</div>
            </div>
            <button id="complex-plan-refresh" type="button" class="btn btn-outline-primary btn-sm">Обновить</button>
        </div>

        <div id="complex-plan-alert"></div>

        <div class="row g-4">
            <div class="col-12 col-xl-5">
                <div class="complex-plan-panel">
                    <div class="complex-plan-panel-header">
                        <div>
                            <div class="complex-plan-section-title">Расчеты</div>
                            <div id="complex-plan-list-meta" class="complex-plan-helper mt-1">Загрузка...</div>
                        </div>
                    </div>
                    <div class="complex-plan-table-wrap">
                        <table class="table table-hover align-middle mb-0">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Статус</th>
                                <th>Интервал</th>
                                <th>КА</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody id="complex-plan-runs-body">
                            <tr>
                                <td colspan="5" class="text-center text-muted py-5">Загрузка...</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="complex-plan-pagination" class="complex-plan-pagination"></div>
                </div>

                <div class="complex-plan-panel mt-3">
                    <div class="complex-plan-panel-header">
                        <div>
                            <div class="complex-plan-section-title">Запуск расчета</div>
                            <div class="complex-plan-helper mt-1">Создание новой версии комплексного плана.</div>
                        </div>
                    </div>
                    <form id="complex-plan-process-form" class="complex-plan-form">
                        <div class="mb-3">
                            <label for="complex-plan-interval-start" class="form-label">Начало интервала</label>
                            <input id="complex-plan-interval-start" type="datetime-local" class="form-control form-control-sm" required>
                        </div>
                        <div class="mb-3">
                            <label for="complex-plan-interval-end" class="form-label">Конец интервала</label>
                            <input id="complex-plan-interval-end" type="datetime-local" class="form-control form-control-sm" required>
                        </div>
                        <div class="mb-3">
                            <label for="complex-plan-satellite-ids" class="form-label">Satellite IDs</label>
                            <input id="complex-plan-satellite-ids"
                                   type="text"
                                   class="form-control form-control-sm"
                                   required
                                   placeholder="101, 202, 303">
                        </div>
                        <div class="row g-2">
                            <div class="col-12 col-md-6">
                                <label for="complex-plan-sun" class="form-label">Солнце</label>
                                <input id="complex-plan-sun"
                                       type="number"
                                       class="form-control form-control-sm"
                                       min="-90"
                                       max="90"
                                       step="0.1"
                                       placeholder="null">
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="complex-plan-coverage-source" class="form-label">Источник покрытия</label>
                                <select id="complex-plan-coverage-source" class="form-select form-select-sm">
                                    <option value="SLOTS" selected>SLOTS</option>
                                    <option value="COVERAGE_SCHEME">COVERAGE_SCHEME</option>
                                </select>
                            </div>
                        </div>
                        <div class="row g-2 mt-1">
                            <div class="col-12 col-md-6">
                                <label for="complex-plan-coverage-strategy" class="form-label">Вариант покрытия слотами</label>
                                <select id="complex-plan-coverage-strategy" class="form-select form-select-sm">
                                    <option value="GREEDY" selected>GREEDY</option>
                                    <option value="CONTINUOUS">CONTINUOUS</option>
                                </select>
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="complex-plan-count-lat" class="form-label">Объединение по широте</label>
                                <input id="complex-plan-count-lat"
                                       type="number"
                                       class="form-control form-control-sm"
                                       min="1"
                                       step="1"
                                       placeholder="countLat">
                            </div>
                        </div>
                        <div class="row g-2 mt-1">
                            <div class="col-12 col-md-6">
                                <label for="complex-plan-count-long" class="form-label">Объединение по долготе</label>
                                <input id="complex-plan-count-long"
                                       type="number"
                                       class="form-control form-control-sm"
                                       min="1"
                                       step="1"
                                       placeholder="countLong">
                            </div>
                        </div>
                        <button id="complex-plan-process-submit" type="submit" class="btn btn-primary btn-sm mt-3">
                            Запустить
                        </button>
                    </form>
                </div>
            </div>

            <div class="col-12 col-xl-7">
                <div class="complex-plan-panel">
                    <div class="complex-plan-panel-header">
                        <div>
                            <div class="complex-plan-section-title">Детали расчета</div>
                            <div id="complex-plan-detail-meta" class="complex-plan-helper mt-1">Выберите расчет слева.</div>
                        </div>
                        <button id="complex-plan-report"
                                type="button"
                                class="btn btn-outline-primary btn-sm"
                                disabled>
                            CSV
                        </button>
                    </div>
                    <div id="complex-plan-detail" class="complex-plan-detail">
                        <div class="text-muted py-5 text-center">Нет выбранного расчета</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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