<!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="catalog-page" data-page="groups" 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">Орбитальные группировки и управление их составом.</div>
            </div>
            <div class="d-flex gap-2">
                <button id="groups-refresh" type="button" class="btn btn-outline-secondary">Обновить</button>
                <button id="groups-new" type="button" class="btn btn-primary">Новая группировка</button>
            </div>
        </div>

        <div id="groups-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 catalog-list p-0">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>Название</th>
                                <th>Состав</th>
                                <th>Спутники</th>
                            </tr>
                            </thead>
                            <tbody id="groups-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">
                        <div class="catalog-section-title" id="group-form-title">Новая группировка</div>
                    </div>
                    <div class="card-body">
                        <form id="group-form" class="d-flex flex-column gap-3">
                            <input id="group-id" type="hidden"/>
                            <div>
                                <label for="group-name" class="form-label">Название</label>
                                <input id="group-name" class="form-control" required/>
                            </div>
                            <div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <label class="form-label mb-0">Состав группировки</label>
                                    <span class="catalog-helper">Можно выбрать несколько спутников</span>
                                </div>
                                <div id="group-satellite-checklist" class="catalog-checkbox-list"></div>
                            </div>
                            <div class="d-flex gap-2 flex-wrap">
                                <button type="submit" class="btn btn-primary">Сохранить</button>
                                <button id="groups-delete" type="button" class="btn btn-outline-danger">Удалить</button>
                                <button id="groups-reset" type="reset" class="btn btn-outline-secondary">Сбросить</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/catalog_scripts.js"></script>
    <script>
        document.getElementById('groups-reset').addEventListener('click', function () {
            document.getElementById('groups-new').click();
        });
    </script>
</th:block>
</body>
</html>
