{% extends 'mainapp/base.html' %}

{% block title %}Заполнение данных Lyngsat{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h3 class="mb-0">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cloud-download me-2" viewBox="0 0 16 16">
                            <path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383"/>
                            <path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708z"/>
                        </svg>
                        Заполнение данных из Lyngsat
                    </h3>
                </div>
                <div class="card-body">
                    <div class="alert alert-info" role="alert">
                        <strong>Внимание!</strong> Процесс заполнения данных может занять продолжительное время, 
                        так как выполняются запросы к внешнему сайту Lyngsat. Пожалуйста, дождитесь завершения операции.
                    </div>

                    <form method="post" class="needs-validation" novalidate>
                        {% csrf_token %}
                        
                        <!-- Satellites Selection -->
                        <div class="mb-4">
                            <label for="{{ form.satellites.id_for_label }}" class="form-label fw-bold">
                                {{ form.satellites.label }}
                            </label>
                            {{ form.satellites }}
                            {% if form.satellites.help_text %}
                                <div class="form-text">{{ form.satellites.help_text }}</div>
                            {% endif %}
                            {% if form.satellites.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.satellites.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Regions Selection -->
                        <div class="mb-4">
                            <label for="{{ form.regions.id_for_label }}" class="form-label fw-bold">
                                {{ form.regions.label }}
                            </label>
                            {{ form.regions }}
                            {% if form.regions.help_text %}
                                <div class="form-text">{{ form.regions.help_text }}</div>
                            {% endif %}
                            {% if form.regions.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.regions.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Cache Options -->
                        <div class="card mb-4 border-info">
                            <div class="card-header bg-info bg-opacity-10">
                                <h6 class="mb-0">
                                    <i class="bi bi-database"></i> Настройки кеширования
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="form-check mb-2">
                                    {{ form.use_cache }}
                                    <label class="form-check-label" for="{{ form.use_cache.id_for_label }}">
                                        {{ form.use_cache.label }}
                                    </label>
                                    {% if form.use_cache.help_text %}
                                        <div class="form-text">{{ form.use_cache.help_text }}</div>
                                    {% endif %}
                                </div>
                                
                                <div class="form-check">
                                    {{ form.force_refresh }}
                                    <label class="form-check-label" for="{{ form.force_refresh.id_for_label }}">
                                        {{ form.force_refresh.label }}
                                    </label>
                                    {% if form.force_refresh.help_text %}
                                        <div class="form-text">{{ form.force_refresh.help_text }}</div>
                                    {% endif %}
                                </div>
                                
                                <div class="mt-3">
                                    <a href="{% url 'mainapp:clear_lyngsat_cache' %}" class="btn btn-sm btn-outline-warning">
                                        <i class="bi bi-trash"></i> Управление кешем
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Buttons -->
                        <div class="d-grid gap-2 d-md-flex justify-content-md-between">
                            <a href="{% url 'mainapp:actions' %}" class="btn btn-secondary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left me-1" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"/>
                                </svg>
                                Назад
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download me-1" viewBox="0 0 16 16">
                                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/>
                                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/>
                                </svg>
                                Заполнить данные
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Info Card -->
            <div class="card mt-4 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">Информация</h5>
                    <p class="card-text">
                        Эта форма позволяет загрузить данные о транспондерах спутников с сайта Lyngsat.
                        Выберите один или несколько спутников и регионы для парсинга данных.
                    </p>
                    <ul>
                        <li>Данные включают частоты, поляризацию, модуляцию, стандарты и другие параметры</li>
                        <li>Процесс может занять несколько минут в зависимости от количества выбранных спутников</li>
                        <li>Существующие записи будут обновлены, новые - созданы</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Form validation
(function() {
    'use strict';
    var forms = document.querySelectorAll('.needs-validation');
    Array.prototype.slice.call(forms).forEach(function(form) {
        form.addEventListener('submit', function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
})();
</script>
{% endblock %}
