{% load static %}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
    <title>Cesium Map Editor</title>
    <!-- Cesium Library -->
    <script src="{% static 'cesium/Cesium.js' %}" defer></script>
    <link href="{% static 'cesium/Widgets/widgets.css' %}" rel="stylesheet">
    
    <!-- Custom Styles -->
    <link rel="stylesheet" href="{% static 'mapsapp/style.css' %}">
</head>
<body>
    <div id="cesiumContainer"></div>
    <input type="file" id="fileInput" accept=".geojson,.json,.kml" style="display: none;" />
    <!-- Панель инструментов -->
    <div class="toolbar">
        <!-- Группа 1: Режимы рисования -->
        <div class="toolbar-section">
            <div class="section-title">Рисование</div>
            <div class="toolbar-group">
                <button id="selectMode" class="tool-btn active" title="Режим выделения (S)">
                    <span>🔍</span> Выделение
                </button>
                <button id="markerMode" class="tool-btn" title="Добавить маркер (M)">
                    <span>📌</span> Маркер
                </button>
                <button id="polygonMode" class="tool-btn" title="Рисовать полигон (P)">
                    <span>⬢</span> Полигон
                </button>
                <button id="polylineMode" class="tool-btn" title="Рисовать линию (L)">
                    <span>〰️</span> Линия
                </button>
            </div>
        </div>
        <!-- Группа 2: Импорт/Экспорт -->
        <div class="toolbar-section">
            <div class="section-title">Импорт/экспорт всех объектов</div>
            <div class="toolbar-group">
                <button id="importBtn" class="tool-btn" title="Импортировать GeoJSON или KML">
                    <span>📥</span> Импорт
                </button>
                <button id="exportBtn" class="tool-btn" title="Экспортировать в GeoJSON или KML">
                    <span>📤</span> Экспорт
                </button>
            </div>
        </div>
        <!-- Группа 3: Действия -->
        <div class="toolbar-section">
            <div class="section-title">Действия</div>
            <div class="toolbar-group">
                <button id="deleteSelected" class="tool-btn danger" title="Удалить выделенное (Del)">
                    <span>🗑️</span> Удалить
                </button>
                <button id="clearAll" class="tool-btn danger" title="Очистить всё">
                    <span>🧹</span> Очистить
                </button>
            </div>
        </div>
        <!-- Строка состояния -->
        <div class="status-bar">
            <span id="modeStatus">Режим: Выделение</span>
            <span id="coordinates" style="color: #eeeeeeff; font-size: 11px;"></span>
            <span id="hint">Нажмите ESC для отмены</span>
        </div>
    </div>

    <!-- Блок выбора объектов из БД -->
    <div class="db-objects-panel">
        <div class="panel-title">Объекты из базы</div>
        <select id="objectSelector" class="object-select">
            <option value="">— Выберите объект —</option>
            {% for sat in sats %}
                <option value="{{sat.id}}">{{sat.name}}</option>    
            {% endfor %}
        </select>
        <button id="loadObjectBtn" class="load-btn">Загрузить на карту</button>
    </div>

    <div class="footprint-control">
        <div class="panel-title">Области покрытия</div>
        <div class="footprint-actions">
            <button id="showAllFootprints">Показать все</button>
            <button id="hideAllFootprints">Скрыть все</button>
        </div>
        <div id="footprintToggles"></div>
    </div>

    <!-- Модальное окно для описания -->
    <div id="descriptionModal" class="modal">
        <div class="modal-content">
            <h3>Добавить описание</h3>
            <textarea id="descriptionInput" placeholder="Введите описание объекта..."></textarea>
            <div class="modal-buttons">
                <button id="confirmDescription">Сохранить</button>
                <button id="cancelDescription">Отмена</button>
            </div>
        </div>
    </div>

    <div id="exportModal" class="modal">
        <div class="modal-content">
            <h3>Экспорт данных</h3>
            <p>Выберите формат для экспорта всех объектов:</p>
            <div class="modal-buttons" style="justify-content: center; gap: 15px; margin-top: 20px;">
                <button id="exportGeoJson">GeoJSON</button>
                <button id="exportKml">KML</button>
                <button id="cancelExport">Отмена</button>
            </div>
        </div>
    </div>

    <script src="{% static 'mapsapp/main.js' %}"></script>
</body>
</html>