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

{% load i18n %}

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

    <div class="w3-content w3-container w3-padding-64" id="about">
        <h3 class="w3-center">Tvoje registrace na <small>{{ registration.event.name }}</small></h3>

        <p class="w3-center">Tvoje registrace na závod <b>{{ registration.event.name }}</b> byla úspěšně zpracována.</p>

        <div class="width-50 {{ registration.event.get_bg_color }} w3-padding-16">
            <p><b>Zavodnik:</b> {{ registration.first_name }} {{ registration.last_name }}</p>
            <p><b>Prezivka:</b> {{ registration.nick_name }}</p>
            <p><b>Kategorie:</b> {{ registration.category }}</p>
            <p><b>Poznámka:</b> {{ registration.variable_symbol }}</p>
            <p><b>Stav registrace:</b> {% if registration.is_finished %}Dokoncena{% else %}Neuhrazena{% endif %}</p>
        </div>

        {% if not registration.is_paid %}
            <p class="w3-center">Pro uhrazení startovného použij následující údaje:</p>

            <div class="width-50 {{ registration.event.get_bg_color }} w3-padding-16">
                <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,{{ qr_code }}" alt="QR Code" class="width-50">
        {% endif %}
    </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 %}