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

{% load i18n %}
{% load event_tags %}

{% block landing_content %}
    <div class="{{ event.get_bg_color }} w3-padding-24"></div>

    <div class="w3-content w3-container w3-padding-64" id="home">
        <h3 class="w3-center">Tvoje registrace na {{ event.name }}</h3>
        <div class="w3-row">
            {% for registration in registrations %}
                <div class="w3-col m6 w3-margin-bottom-16">
                    <div class="w3-border w3-padding-16 w3-margin w3-center">
                        <h3>{{ registration.first_name }} {{ registration.last_name }}</h3>
                        <p class="w3-center">( {{ registration.nick_name }} )</p>
                        <p><b>Kategorie:</b> {{ registration.category }}</p>
                        <p><b>Stav registrace:</b> {% if registration.is_finished %}Dokoncena{% else %}
                            Neuhrazena{% endif %}</p>

                        {% if not registration.is_paid %}
                            <div class="w3-purple w3-padding-16">
                                <p class="w3-center">Pro uhrazení startovného použij následující údaje:</p>
                                <p><b>Číslo účtu:</b> {{ registration.event.bank_account_number }}</p>
                                <p><b>Suma:</b> {{ registration.event.fee }} Kč</p>
                                <p><b>Poznámka:</b> {{ registration.variable_symbol }}</p>
                            </div>
                            <h5 class="w3-center w3-padding-top-24">Nebo můžeš použít QR kód:</h5>
                            <img src="data:image/svg+xml;base64,{{ registration|qr_code }}" alt="QR Code" class="width-50">
                        {% else %}
                            <div style="height: 495px"></div>
                        {% endif %}

                    </div>
                </div>
            {% empty %}
                <p class="w3-center">Nemáš žádné registrace na tomto závodu.</p>
            {% endfor %}
        </div>


    </div>






    <hr>
    {% include 'layout/landing_footer.html' %}
{% endblock %}

{% block js %}
    <script>


        // Change style of navbar on scroll
        window.onscroll = function () {
            myFunction()
        };

        function myFunction() {
            let navbar = document.getElementById("myNavbar");
            if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
                navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
            } else {
                navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
            }
        }

        // Used to toggle the menu on small screens when clicking on the menu button
        function toggleFunction() {
            let x = document.getElementById("navDemo");
            if (x.className.indexOf("w3-show") === -1) {
                x.className += " w3-show";
            } else {
                x.className = x.className.replace(" w3-show", "");
            }
        }
    </script>
{% endblock %}