<!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 href="/webjars/cesium/1.107.2/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/angular-motion.css"/>
</head>
<body>
<th:block layout:fragment="content">
    <div class="angular-motion-page py-3">
        <div class="d-flex justify-content-between align-items-start mb-3">
            <div>
                <h1 class="h3 mb-1">Расчет ПУУД</h1>
                <div class="angular-motion-helper">Программа управления угловым движением для выбранного КА и варианта сканирования.</div>
            </div>
            <button id="angular-motion-refresh-satellites" type="button" class="btn btn-outline-secondary btn-sm">Обновить КА</button>
        </div>

        <div id="angular-motion-alert"></div>

        <div class="row g-3 angular-motion-layout">
            <div class="col-12 col-xl-4">
                <form id="angular-motion-form" class="card angular-motion-card h-100">
                    <div class="card-header bg-white">
                        <div class="angular-motion-section-title">Исходные данные</div>
                    </div>
                    <div class="card-body angular-motion-form-body">
                        <div class="mb-3">
                            <label for="angular-motion-time" class="form-label">Примерное время</label>
                            <input id="angular-motion-time" type="datetime-local" class="form-control" required>
                            <div class="form-text">При изменении времени список КА фильтруется по доступным ПДЦМ.</div>
                        </div>

                        <div class="mb-3">
                            <label for="angular-motion-satellite" class="form-label">Спутник</label>
                            <select id="angular-motion-satellite" class="form-select" required></select>
                            <div id="angular-motion-satellite-meta" class="form-text"></div>
                        </div>

                        <hr>

                        <div class="mb-3">
                            <label for="angular-motion-mode" class="form-label">Вариант сканирования</label>
                            <select id="angular-motion-mode" class="form-select">
                                <option value="CONST_ORIENT">Постоянная ориентация ЦЛВ в ОСК</option>
                                <option value="AZIMUTH">Заданный азимут</option>
                                <option value="SMOOTH_SDI">Плавная СДИ</option>
                            </select>
                        </div>

                        <div class="row g-2 mb-3">
                            <div class="col-12 col-md-6">
                                <label for="angular-motion-lat" class="form-label">Широта, град</label>
                                <input id="angular-motion-lat" type="number" step="0.000001" min="-90" max="90" class="form-control" required>
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="angular-motion-lon" class="form-label">Долгота, град</label>
                                <input id="angular-motion-lon" type="number" step="0.000001" min="-180" max="180" class="form-control" required>
                            </div>
                        </div>

                        <div class="d-flex gap-2 align-items-center mb-3">
                            <button id="angular-motion-pick-from-map" type="button" class="btn btn-outline-primary btn-sm">Выбрать с карты</button>
                            <span id="angular-motion-pick-state" class="angular-motion-helper">Режим выбора координат выключен.</span>
                        </div>

                        <div class="row g-2 mb-3">
                            <div class="col-12 col-md-6">
                                <label for="angular-motion-height" class="form-label">Высота, м</label>
                                <input id="angular-motion-height" type="number" step="1" class="form-control" value="0">
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="angular-motion-duration" class="form-label">Длительность, с</label>
                                <input id="angular-motion-duration" type="number" min="0.125" step="0.125" class="form-control" value="60" required>
                            </div>
                        </div>

                        <div class="row g-2 mb-3">
                            <div class="col-12 col-md-6">
                                <label for="angular-motion-capture-angle" class="form-label">Угол захвата, град</label>
                                <input id="angular-motion-capture-angle" type="number" min="0.001" step="0.001" class="form-control" value="1.5" required>
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="angular-motion-lead-angle" class="form-label">Упреждающий угол, град</label>
                                <input id="angular-motion-lead-angle" type="number" step="0.001" class="form-control" value="0">
                            </div>
                        </div>

                        <div class="row g-2 mb-3">
                            <div class="col-12 col-md-6 angular-motion-azimuth-field">
                                <label for="angular-motion-azimuth" class="form-label">Азимут, град</label>
                                <input id="angular-motion-azimuth" type="number" step="0.001" class="form-control" value="0">
                            </div>
                        </div>

                        <div class="row g-2 mb-3 angular-motion-sdi-fields">
                            <div class="col-12 col-md-6">
                                <label for="angular-motion-sdi" class="form-label">СДИ, мм/с</label>
                                <input id="angular-motion-sdi" type="number" step="0.001" class="form-control" value="100">
                            </div>
                            <div class="col-12 col-md-6">
                                <label for="angular-motion-focus" class="form-label">Фокус, мм</label>
                                <input id="angular-motion-focus" type="number" min="1" step="1" class="form-control" value="5500">
                            </div>
                        </div>

                        <div class="row g-2 mb-4">
                            <div class="col-12 col-md-6">
                                <label for="angular-motion-step" class="form-label">Шаг ПУУД, с</label>
                                <input id="angular-motion-step" type="number" min="0.001" step="0.001" class="form-control" value="0.125">
                            </div>
                        </div>

                        <button id="angular-motion-submit" type="submit" class="btn btn-primary w-100">Рассчитать</button>
                    </div>
                </form>
            </div>

            <div class="col-12 col-xl-8">
                <div class="card angular-motion-card mb-3">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <div>
                            <div class="angular-motion-section-title">Мини-карта</div>
                            <div id="angular-motion-map-meta" class="angular-motion-helper mt-1">Выберите время и спутник.</div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="angular-motion-map" class="angular-motion-map" aria-label="Мини-карта трассы и полос обзора"></div>
                    </div>
                </div>

                <div class="card angular-motion-card angular-motion-result-card">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <div>
                            <div class="angular-motion-section-title">Результат расчета</div>
                            <div id="angular-motion-result-meta" class="angular-motion-helper mt-1">Расчет еще не запускался.</div>
                        </div>
                        <button id="angular-motion-export-csv" type="button" class="btn btn-outline-secondary btn-sm" disabled>CSV</button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive angular-motion-table-wrap">
                            <table class="table table-sm table-hover mb-0 angular-motion-table">
                                <thead>
                                <tr>
                                    <th>Время</th>
                                    <th>Виток</th>
                                    <th>Тангаж</th>
                                    <th>Крен</th>
                                    <th>Рысканье</th>
                                    <th>Широта</th>
                                    <th>Долгота</th>
                                    <th>ωx</th>
                                    <th>ωy</th>
                                    <th>ωz</th>
                                    <th>wd.x</th>
                                    <th>wd.y</th>
                                    <th>wd.z</th>
                                    <th>СДИ</th>
                                    <th>СДИ лев.</th>
                                    <th>СДИ прав.</th>
                                    <th>ΔСДИ</th>
                                </tr>
                                </thead>
                                <tbody id="angular-motion-result-body">
                                <tr><td colspan="17" class="text-center text-muted py-4">Нет данных</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/webjars/cesium/1.107.2/Build/Cesium/Cesium.js"></script>
    <script src="/angular_motion_scripts.js"></script>
</th:block>
</body>
</html>
