<!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/rva.css"/>
</head>
<body>
<th:block layout:fragment="content">
    <div class="rva-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="rva-helper">Расчет зон радиовидимости по нескольким станциям с объединением интервалов или без него.</div>
            </div>
        </div>

        <div id="rva-alert"></div>

        <div class="row g-4">
            <div class="col-12 col-xxl-4">
                <div class="card rva-card">
                    <div class="card-header">
                        <div class="rva-section-title">Параметры расчета</div>
                    </div>
                    <div class="card-body">
                        <form id="rva-form" class="d-flex flex-column gap-3">
                            <div>
                                <label for="rva-satellite" class="form-label">Спутник</label>
                                <select id="rva-satellite" class="form-select" required>
                                    <option value="">Выберите спутник</option>
                                    <option th:each="satellite : ${satellites}"
                                            th:value="${satellite.noradId}"
                                            th:text="${satellite.name + ' (' + satellite.noradId + ')'}"></option>
                                </select>
                            </div>

                            <div>
                                <label for="rva-duration" class="form-label">Горизонт расчета, суток</label>
                                <input id="rva-duration" type="number" min="1" step="1" value="1" class="form-control" required/>
                            </div>

                            <div>
                                <div class="form-label">Вариант расчета</div>
                                <div class="d-flex flex-column gap-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="rva-mode" id="rva-mode-common" value="common" checked>
                                        <label class="form-check-label" for="rva-mode-common">Полный список ЗРВ</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="rva-mode" id="rva-mode-merge" value="merge">
                                        <label class="form-check-label" for="rva-mode-merge">Объединенные интервалы</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="rva-mode" id="rva-mode-merge-on-rev" value="merge-on-rev">
                                        <label class="form-check-label" for="rva-mode-merge-on-rev">Суммарная длительность на витке</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="rva-mode" id="rva-mode-average" value="average">
                                        <label class="form-check-label" for="rva-mode-average">Средняя длительность</label>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label mb-0">Станции</label>
                                    <button id="rva-select-all" type="button" class="btn btn-outline-secondary btn-sm">Выбрать все</button>
                                </div>
                                <div id="rva-stations" class="rva-stations">
                                    <label class="form-check rva-station-item"
                                           th:each="station : ${stations}">
                                        <input class="form-check-input rva-station-checkbox"
                                               type="checkbox"
                                               th:value="${station.number}"
                                               th:attr="data-number=${station.number}">
                                        <span class="form-check-label rva-station-label">
                                            <span class="fw-semibold" th:text="${station.name}"></span>
                                            <span class="text-muted" th:text="${' (#' + station.number + ')'}"></span>
                                        </span>
                                    </label>
                                </div>
                                <div class="rva-helper mt-2">Нужно выбрать хотя бы одну станцию.</div>
                            </div>

                            <div class="d-flex gap-2 flex-wrap">
                                <button type="submit" class="btn btn-primary">Рассчитать</button>
                                <button id="rva-reset" type="reset" class="btn btn-outline-secondary">Сбросить</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-12 col-xxl-8">
                <div class="card rva-card">
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div>
                            <div class="rva-section-title">Результаты</div>
                            <div id="rva-result-meta" class="rva-helper mt-1">Выберите параметры и запустите расчет.</div>
                        </div>
                        <button id="rva-download" type="button" class="btn btn-outline-primary btn-sm" disabled>Скачать CSV</button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead id="rva-results-head"></thead>
                                <tbody id="rva-results-body">
                                <tr>
                                    <td class="text-center text-muted py-5">Нет результатов</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:inline="javascript">
        window.rvaPageData = {
            satellites: /*[[${satellites}]]*/ [],
            stations: /*[[${stations}]]*/ []
        };
    </script>
    <script src="/rva_scripts.js"></script>
</th:block>
</body>
</html>
