<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{layouts/main-layout}">
<head>
    <title>Сравнение TLE</title>
    <link rel="stylesheet" href="/css/catalog.css"/>
    <link rel="stylesheet" href="/css/tle-comparison.css"/>
</head>
<body>
<th:block layout:fragment="content">
    <div id="tle-comparison-page" class="catalog-page tle-comparison-page py-3">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
            <div>
                <h2 class="mb-1">Сравнение TLE</h2>
                <div class="catalog-helper">Вставьте два набора TLE, проверьте эпохи и рассчитайте положение спутника на заданный момент времени.</div>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <button id="tle-compare-submit" type="button" class="btn btn-primary">Рассчитать</button>
                <button id="tle-compare-clear" type="button" class="btn btn-outline-secondary">Очистить</button>
            </div>
        </div>

        <div id="tle-comparison-alert"></div>

        <div class="card catalog-card tle-input-card mb-4">
            <div class="card-header">
                <div class="catalog-section-title">Ввод данных</div>
                <div class="catalog-helper mt-1">Можно вставить две или три строки TLE. Заголовок определяется автоматически, строки 1 и 2 обязательны. Время расчета должно быть не раньше максимальной эпохи двух TLE.</div>
            </div>
            <div class="card-body">
                <div class="row g-3 mb-4">
                    <div class="col-12 col-md-5 col-xl-4">
                        <label for="tle-comparison-time" class="form-label">Время расчета</label>
                        <input id="tle-comparison-time" type="datetime-local" class="form-control" step="1"/>
                    </div>
                    <div class="col-12 col-md-7 col-xl-8 d-flex align-items-end">
                        <div id="tle-comparison-time-helper" class="catalog-helper">Минимальное допустимое время появится после разбора двух TLE.</div>
                    </div>
                </div>
                <div class="row g-4">
                    <div class="col-12 col-xl-6">
                        <div class="tle-input-widget h-100">
                            <div class="d-flex justify-content-between align-items-center gap-3 mb-2">
                                <label for="tle-first-text" class="form-label mb-0">TLE 1</label>
                                <span id="tle-first-status" class="tle-parse-status text-muted">Нет данных</span>
                            </div>
                            <textarea id="tle-first-text"
                                      class="form-control tle-textarea"
                                      spellcheck="false"
                                      placeholder="ISS (ZARYA)&#10;1 25544U 98067A ...&#10;2 25544 ..."></textarea>
                            <div class="tle-reference mt-3">
                                <div class="tle-reference-row">
                                    <span>Эпоха TLE</span>
                                    <strong id="tle-first-epoch">—</strong>
                                </div>
                                <div class="tle-reference-row">
                                    <span>NORAD</span>
                                    <strong id="tle-first-norad">—</strong>
                                </div>
                                <div class="tle-reference-row">
                                    <span>Виток</span>
                                    <strong id="tle-first-revolution">—</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-xl-6">
                        <div class="tle-input-widget h-100">
                            <div class="d-flex justify-content-between align-items-center gap-3 mb-2">
                                <label for="tle-second-text" class="form-label mb-0">TLE 2</label>
                                <span id="tle-second-status" class="tle-parse-status text-muted">Нет данных</span>
                            </div>
                            <textarea id="tle-second-text"
                                      class="form-control tle-textarea"
                                      spellcheck="false"
                                      placeholder="ISS (ZARYA)&#10;1 25544U 98067A ...&#10;2 25544 ..."></textarea>
                            <div class="tle-reference mt-3">
                                <div class="tle-reference-row">
                                    <span>Эпоха TLE</span>
                                    <strong id="tle-second-epoch">—</strong>
                                </div>
                                <div class="tle-reference-row">
                                    <span>NORAD</span>
                                    <strong id="tle-second-norad">—</strong>
                                </div>
                                <div class="tle-reference-row">
                                    <span>Виток</span>
                                    <strong id="tle-second-revolution">—</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card catalog-card tle-result-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="tle-comparison-result-meta" class="catalog-helper mt-1">Задайте время не раньше максимальной эпохи TLE и нажмите “Сравнить”.</div>
                </div>
            </div>
            <div class="card-body p-0">
                <div id="tle-comparison-empty" class="catalog-empty">Параметры положения и разность радиус-векторов появятся здесь.</div>
                <div id="tle-comparison-table-wrap" class="table-responsive tle-result-table-wrap d-none">
                    <table class="table table-hover mb-0 align-middle">
                        <thead class="table-light">
                        <tr>
                            <th>Параметр</th>
                            <th>TLE 1</th>
                            <th>TLE 2</th>
                            <th>Разница / значение</th>
                        </tr>
                        </thead>
                        <tbody id="tle-comparison-result-body"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

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