<!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/satellite-pdcm.css"/>
</head>
<body>
<th:block layout:fragment="content">
    <div id="satellite-pdcm-page" class="catalog-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">Табличное представление asc-node по выбранному спутнику.</div>
            </div>
            <div class="d-flex gap-2 flex-wrap justify-content-end align-items-end satellite-pdcm-send-controls">
                <div>
                    <label for="satellite-pdcm-send-ic-time" class="form-label catalog-helper mb-1">Время НУ</label>
                    <input
                            id="satellite-pdcm-send-ic-time"
                            type="text"
                            class="form-control satellite-pdcm-send-time"
                            inputmode="numeric"
                            placeholder="dd.mm.yyyy hh:MM:ss.zzz"
                            aria-label="Время НУ"
                    />
                </div>
                <button id="satellite-pdcm-send-ic" type="button" class="btn btn-outline-primary" disabled>Передать НУ в slot-service</button>
                <button id="satellite-pdcm-open-set-ic" type="button" class="btn btn-primary" disabled>Задать НУ</button>
                <button id="satellite-pdcm-refresh" type="button" class="btn btn-outline-secondary">Обновить</button>
            </div>
        </div>

        <div id="satellite-pdcm-alert"></div>

        <div class="row g-4">
            <div class="col-12 col-lg-4 col-xl-3">
                <div class="card catalog-card catalog-list-card satellite-pdcm-sidebar h-100">
                    <div class="card-header">
                        <div class="catalog-section-title">Спутники</div>
                    </div>
                    <div class="card-body catalog-list p-0">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>Спутник</th>
                                <th>Интервал</th>
                            </tr>
                            </thead>
                            <tbody id="satellite-pdcm-list"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-8 col-xl-9">
                <div class="d-flex flex-column gap-4">
                    <div class="card catalog-card">
                        <div class="card-header">
                            <div class="catalog-section-title">Сводка</div>
                        </div>
                        <div class="card-body">
                            <div id="satellite-pdcm-summary" class="satellite-pdcm-summary-root">
                                <div class="catalog-helper">Выберите спутник слева.</div>
                            </div>
                        </div>
                    </div>

                    <div class="card catalog-card">
                        <div class="card-header d-flex justify-content-between align-items-center gap-2 flex-wrap">
                            <div class="catalog-section-title">Asc-node</div>
                            <button id="satellite-pdcm-export" type="button" class="btn btn-sm btn-outline-primary" disabled>Скачать CSV</button>
                        </div>
                        <div class="card-body">
                            <div id="satellite-pdcm-table-empty" class="catalog-empty">Нет доступного интервала ПДЦМ для выбранного спутника.</div>
                            <div id="satellite-pdcm-table-wrap" class="satellite-pdcm-table-wrap d-none"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="satellite-pdcm-set-ic-modal" tabindex="-1" aria-labelledby="satellite-pdcm-set-ic-title" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <form id="satellite-pdcm-set-ic-form" class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="satellite-pdcm-set-ic-title">Задать начальные условия</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                    </div>
                    <div class="modal-body">
                        <div id="satellite-pdcm-set-ic-target" class="catalog-helper mb-3">Выберите спутник слева.</div>

                        <div class="satellite-pdcm-ic-grid">
                            <div>
                                <label for="satellite-pdcm-ic-time" class="form-label">Time</label>
                                <input id="satellite-pdcm-ic-time" type="text" class="form-control" placeholder="dd.mm.yyyy hh:mm:ss.zzz" required/>
                            </div>
                            <div>
                                <label for="satellite-pdcm-ic-revolution" class="form-label">Revolution</label>
                                <input id="satellite-pdcm-ic-revolution" type="number" class="form-control" required/>
                            </div>
                            <div>
                                <label for="satellite-pdcm-ic-movement-model" class="form-label">Модель движения</label>
                                <select id="satellite-pdcm-ic-movement-model" class="form-select" required>
                                    <option value="FOTO" selected>FOTO</option>
                                    <option value="KONDOR">KONDOR</option>
                                    <option value="METEORM1">METEORM1</option>
                                    <option value="METEORM2">METEORM2</option>
                                    <option value="BARS">BARS</option>
                                    <option value="KONDOR_PROGNOZ">KONDOR_PROGNOZ</option>
                                </select>
                            </div>
                            <div>
                                <label for="satellite-pdcm-ic-s-ball" class="form-label">S-ball</label>
                                <input id="satellite-pdcm-ic-s-ball" type="number" step="any" class="form-control" value="0" required/>
                            </div>
                            <div>
                                <label for="satellite-pdcm-ic-f81" class="form-label">F81</label>
                                <input id="satellite-pdcm-ic-f81" type="number" step="any" class="form-control" value="147.8" required/>
                            </div>
                        </div>

                        <div class="satellite-pdcm-ic-grid mt-3">
                            <div>
                                <label for="satellite-pdcm-ic-x" class="form-label">X</label>
                                <input id="satellite-pdcm-ic-x" type="number" step="any" class="form-control" required/>
                            </div>
                            <div>
                                <label for="satellite-pdcm-ic-y" class="form-label">Y</label>
                                <input id="satellite-pdcm-ic-y" type="number" step="any" class="form-control" required/>
                            </div>
                            <div>
                                <label for="satellite-pdcm-ic-z" class="form-label">Z</label>
                                <input id="satellite-pdcm-ic-z" type="number" step="any" class="form-control" required/>
                            </div>
                        </div>

                        <div class="satellite-pdcm-ic-grid mt-3">
                            <div>
                                <label for="satellite-pdcm-ic-vx" class="form-label">Vx</label>
                                <input id="satellite-pdcm-ic-vx" type="number" step="any" class="form-control" required/>
                            </div>
                            <div>
                                <label for="satellite-pdcm-ic-vy" class="form-label">Vy</label>
                                <input id="satellite-pdcm-ic-vy" type="number" step="any" class="form-control" required/>
                            </div>
                            <div>
                                <label for="satellite-pdcm-ic-vz" class="form-label">Vz</label>
                                <input id="satellite-pdcm-ic-vz" type="number" step="any" class="form-control" required/>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
                        <button id="satellite-pdcm-set-ic-submit" type="submit" class="btn btn-primary">Запустить расчет</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="/satellite_pdcm_scripts.js"></script>
</th:block>
</body>
</html>
