<!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"/>
</head>
<body>
<th:block layout:fragment="content">
    <div id="stations-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">CRUD-операции над наземными станциями через `stations-service`.</div>
            </div>
            <div class="d-flex gap-2">
                <button id="stations-refresh" type="button" class="btn btn-outline-secondary">Обновить</button>
                <button id="stations-new" type="button" class="btn btn-primary">Новая станция</button>
            </div>
        </div>

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

        <div class="row g-4">
            <div class="col-12 col-xl-5">
                <div class="card catalog-card h-100">
                    <div class="card-header">
                        <div class="catalog-section-title">Список станций</div>
                    </div>
                    <div class="card-body p-3 border-bottom">
                        <input id="stations-search" class="form-control" placeholder="Поиск по номеру, имени"/>
                    </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>
                                <th>Мин.угол</th>
                                <th>Макс.угол</th>
                            </tr>
                            </thead>
                            <tbody id="stations-table-body"></tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-12 col-xl-7">
                <div class="card catalog-card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div class="catalog-section-title" id="station-form-title">Новая станция</div>
                        <button id="stations-delete" type="button" class="btn btn-outline-danger btn-sm">Удалить станцию</button>
                    </div>
                    <div class="card-body">
                        <form id="station-form" class="d-flex flex-column gap-3">
                            <input id="station-id" type="hidden"/>

                            <div class="catalog-form-grid">
                                <div>
                                    <label for="station-number" class="form-label">Номер</label>
                                    <input id="station-number" type="number" class="form-control" min="0" required/>
                                </div>
                                <div>
                                    <label for="station-name" class="form-label">Название</label>
                                    <input id="station-name" class="form-control" required/>
                                </div>
                            </div>

                            <div class="catalog-form-grid">
                                <div>
                                    <label for="station-lat" class="form-label">Широта</label>
                                    <input id="station-lat" type="number" step="any" class="form-control" required/>
                                </div>
                                <div>
                                    <label for="station-long" class="form-label">Долгота</label>
                                    <input id="station-long" type="number" step="any" class="form-control" required/>
                                </div>
                                <div>
                                    <label for="station-height" class="form-label">Высота, м</label>
                                    <input id="station-height" type="number" step="any" min="0" class="form-control" required/>
                                </div>
                            </div>

                            <div class="catalog-form-grid">
                                <div>
                                    <label for="station-elevation-min" class="form-label">Мин.угол</label>
                                    <input id="station-elevation-min" type="number" step="any" class="form-control" required/>
                                </div>
                                <div>
                                    <label for="station-elevation-max" class="form-label">Макс.угол</label>
                                    <input id="station-elevation-max" type="number" step="any" class="form-control" required/>
                                </div>
                            </div>

                            <div class="d-flex gap-2 flex-wrap">
                                <button type="submit" class="btn btn-primary">Сохранить</button>
                                <button id="stations-reset" type="reset" class="btn btn-outline-secondary">Сбросить</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/stations_scripts.js"></script>
</th:block>
</body>
</html>
