{% extends "layout/landing_page.html" %}

{% load i18n %}
{% load static %}

{% block landing_content %}
    <div class="bgimg-1 w3-display-container w3-opacity-min" id="home">

        <div class="header-position">
            <span class="w3-center w3-padding-large {{ event.get_bg_color }} w3-xlarge w3-wide w3-animate-opacity header-text">{{ event.name }}</span>
        </div>

        <div class="header-position description-position">
        <span class="w3-center w3-padding-large {{ event.get_bg_color }} w3-wide header-text">
            {{ event.description }}
        </span>
        </div>

        {% if event.sub_description %}
            <div class="header-position note-description-position">
            <span class="w3-center {{ event.get_bg_color }} note-description-position-text">
                {{ event.sub_description }}
            </span>
            </div>
        {% endif %}

        {% if event.registrations_enabled %}
            <div class="header-position registration-button-position">
                <a class="w3-button w3-orange w3-padding-large w3-large register-button" href="{% url 'index' %}#registration">
                    TU SE REGISTRUJ ...
                </a>
            </div>
        {% endif %}
    </div>

    {% for section in html_sections %}
        <section id="{{ section.identifier }}">
            {{ section.html|safe }}
        </section>
    {% endfor %}

    <section id="categories">
        <div class="w3-content w3-container w3-padding-64">
            <h3 class="w3-center ">// TITULY a KATEGORIE</h3>
            <p class="w3-center"><em>Podle okruhu, který jste si zvolili, tak se vám dostane patřičného titulu, či
                spadnete do
                jedné z kategorií.</em></p><br>

            <div class="w3-row-padding" style="display: flex; flex-wrap: wrap;">
    {% for category in event.categories.all %}
        <div class="w3-col m6 w3-margin-bottom-16" style="display: flex;">
            <div style="display: flex; flex-direction: column; width: 100%; border: 1px solid #ddd; padding: 16px;">
                <h4 class="w3-text-purple">// {{ category.name }}</h4>
                <p>{{ category.description }}</p>
                {% if category.length %}
                    <p>Dlzka: {{ category.length }} m</p>
                {% endif %}
                {% if category.climb %}
                    <p>Stoupání: {{ category.climb }} m</p>
                {% endif %}
                {% if category.gpx %}
                    <p><a href="{{ category.gpx.url }}">GPX</a></p>
                {% endif %}

                <div style="margin-top: auto;">
                    {% if category.mapy_cz_url %}
                        <iframe style="border:none" src="{{ category.mapy_cz_url }}" width="100%" height="280" frameborder="0"></iframe>
                    {% endif %}
                </div>
            </div>
        </div>
    {% empty %}
        <div class="w3-col s12">Zatím nebyly vytvořeny žádné kategorie.</div>
    {% endfor %}
</div>

        </div>
    </section>

    {% if event.registrations_enabled %}
        <section id="registration">
            <h3 class="w3-center">// REGISTRACE</h3>
            <div class="w3-content w3-container">
                {% include 'events/registration_form.html' with event=event %}
            </div>
        </section>
    {% endif %}

    <h3 class="w3-center">// ME REGISTRACE</h3>
    <p class="w3-center"><em>Tady si můžes zkontrolovat své registrace na závody.</em></p>
    <p class="w3-center"><em>Zadej email, který jsi použil při registraci a klikni na tlačítko "ODESLAT ZADOST".
        Na tvuj email ti přijde seznam tvých registrací.</em></p>
    <div class="w3-content w3-container">
        {% include 'events/my_registrations_form.html' with event=event %}
    </div>

    <div id="loadingModal" class="loading-modal" style="display: none;">
        <img src="{% static 'assets/img/loading.gif' %}" alt="Posilam...">
    </div>

    <script>
        function validateEmail() {
            const emailInput = document.getElementById("email_id");
            const emailError = document.getElementById("emailError");
            const submitButton = document.getElementById("registration_button");
            const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

            if (!emailPattern.test(emailInput.value)) {
                emailError.textContent = "Zadejte platný email";
                submitButton.disabled = true;
            } else {
                emailError.textContent = "";
                submitButton.disabled = false;
            }
        }

        function validateRequestEmail() {
            const emailInput = document.getElementById("request_email_id");
            const emailError = document.getElementById("emailError");
            const submitButton = document.getElementById("requestButton");
            const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

            if (!emailPattern.test(emailInput.value)) {
                emailError.textContent = "Zadejte platný email";
                submitButton.disabled = true;
            } else {
                emailError.textContent = "";
                submitButton.disabled = false;
            }
        }

        function openLoader() {
            document.getElementById("loadingModal").style.display = "block";
        }
    </script>


    <section id="contact">
        <div class="w3-content w3-container w3-padding-64" id="contact">
            <h3 class="w3-center">// KONTAKT</h3>
            <p class="w3-center"><em>Pokuď potřebujete poradit, nebo se zeptat, napište mi. Všichni mi říkají
                Ventil.</em></p>

            <p>TELEFON na Ventila: +420 775 003 122</p>
            <p>MAIL na Ventila: <a href="mailto:ventil@spoton.cz">ventil@spoton.cz</a></p>
        </div>
    </section>

    {% include 'layout/landing_footer.html' %}

{% endblock %}