{% extends "styleguide2/base.html" %}
{% load wagtailcore_tags wagtailimages_tags %}

{% block head_start %}
    {% comment %}quick dirty fix{% endcomment %}
    <title>Máte přání?</title>

    {% if page.root_page.matomo_id %}
        {% include "shared/matomo_snippet.html" with matomo_id=page.root_page.matomo_id %}
    {% endif %}
{% endblock %}

{% block content %}
    {% include 'styleguide2/includes/organisms/layout/navbar.html' %}
    {% include 'make_a_wish/header/wish_header.html' with title=page.title header_image=page.header_image %}

    <main role="main">
        <div class="container--wide grid grid-cols-1 xl:grid-cols-2 gap-8">
            <div>
                {% block top_content %}
                    <div class="prose prose-black text-2xl xl:text-3xl mb-8 xl:!w-[115%%]" style="margin-top: -30px">
                        {{ page.main_text }}
                    </div>

                    <div class="xl:!w-[115%]">
                        <div class="flex gap-0 xl:flex-row flex-col">
                            {% image page.new_wish_image original class="h-32 xl:flex-1" style="height:6rem; object-fit:contain" %}

                            <div
                                class="
                                    font-alt text-3xl xl:flex items-center px-6
                                    duration-100 cursor-pointer bg-white text-black
                                    h-24 flex justify-center items-center
                                "
                                id="open_wish"
                            >
                                + Přidat přání
                            </div>
                        </div>

                        <div class="hidden duration-150" id="make_a_wish">
                            <form
                                class="p-8"
                                action="{% pageurl page %}"
                                method="post"
                            >
                                {% csrf_token %}

                                {% for hidden_field in form.hidden_fields %}
                                    {{ hidden_field.errors }}
                                    {{ hidden_field }}
                                {% endfor %}

                                <textarea
                                    class="bg-grey-150 font-alt p-3 text-3xl w-full"
                                    placeholder="Přeju si, aby..."
                                    name="vase_prani"
                                    id="id_vase_prani"
                                    required
                                ></textarea>

                                <div class="flex xl:gap-6 gap-4 justify-center mt-4 xl:flex-row flex-col">
                                    <input
                                        type="text"
                                        class="bg-grey-150 font-alt p-3 text-3xl flex-1"
                                        placeholder="Jméno & příjmení"
                                        name="jmeno_a_prijmeni"
                                        id="id_jmeno_a_prijmeni"
                                        required
                                    >

                                    <input
                                        type="email"
                                        class="bg-grey-150 font-alt p-3 text-3xl flex-1"
                                        placeholder="E-mail"
                                        name="e_mail"
                                        id="id_e_mail"
                                        required
                                    >
                                </div>

                                <div class="mt-4">
                                    <input type="checkbox" name="accepts_gdpr" id="accepts_gdpr" required="">
                                    <label for="accepts_gdpr" class="text-lg">
                                        Dávám souhlas se zpracováním osobních údajů. Více o ochraně osobních údajů zde:
                                        <a class="text-grey-600 underline" href="https://www.pirati.cz/ochrana-osobnich-udaju/">pirati.cz/ochrana-osobnich-udaju</a>
                                    </label>
                                </div>

                                <div class="mt-4">
                                    <input
                                        type="submit"
                                        class="bg-duration-150 font-alt text-4xl p-3 hover:bg-grey-600 text-white bg-black w-full cursor-pointer"
                                        value="Odeslat přání"
                                    >
                                </div>
                            </form>
                        </div>
                    </div>
                {% endblock %}

                <div class="xl:mb-16 hidden" id="separator"></div>
            </div>

            {% block video %}
                <div class="flex xl:justify-end xl:absolute xl:ml-[920px] xl:mt-[-8px] xl:mb-0 mb-8">
                    <video
                        width="720"
                        height="1280"
                        class="w-full xl:w-96 xl:mr-16"
                        autoplay controls muted loop playsinline
                    >
                        <source src="{{ page.video_url }}" type="video/mp4">
                    </video>
                </div>
            {% endblock %}
        </div>

        <div class="bg-black">
            <div class="container--wide text-white pb-16 pt-24 xl:pr-[71px]">
                <div class="grid grid-cols-1 xl:grid-cols-3">
                    <div class="xl:col-span-2 xl:pr-32 text-center xl:text-left">
                        <h2 class="head-14xl xl:text-8xl xl:leading-[7rem] leading-[6rem]">Co trápí čechy a češky</h2>
                        <div class="text-7xl xl:text-center">▼</div>
                    </div>
                </div>

                <div class="mt-16 p-12 bg-grey-50">
                    <ul class="flex flex-col xl:gap-6 gap-12 justify-start xl:justify-center">
                        {% for wish in page.common_wishes %}
                            <li>
                                <div class="flex xl:gap-8 gap-6 items-center xl:justify-center xl:flex-row flex-col">
                                    {% image wish.value.image original class="rounded-full h-32 w-32" %}

                                    <div class="text-black xl:text-left text-center">
                                        <h4 class="font-alt text-5xl mb-3">{{ wish.value.title }}</h4>
                                        <p class="text-2xl xl:mb-0">{{ wish.value.description }}</p>
                                    </div>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

                <div class="mt-12 xl:p-12 p-6 bg-grey-50 text-black">
                    <h3 class="head-4xl text-5xl pt-6">Máte přání tour</h3>

                    <ul class="flex flex-col gap-4 mt-8">
                        {% for tour_date in page.tour_dates %}
                            <li class="py-4">
                                <div class="font-alt text-4xl">
                                    {{ tour_date.value.date }}
                                </div>
                                <div class="text-2xl">
                                    {{ tour_date.value.details }}
                                </div>
                            </li>

                            {% if not forloop.last %}
                                <div class="mx-24 border-t-2 border-grey-200"></div>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>

                <h3 class="mt-12 xl:head-6xl head-9xl text-white">Naše data</h3>

                <div class="mt-4 p-6 bg-grey-50 text-black flex gap-8 xl:gap-16 justify-between xl:flex-row flex-col">
                    {% for stat_info in page.stats %}
                        <div class="flex gap-4 items-center">
                            <div class="text-6xl font-alt">{{ stat_info.value.count }}</div>
                            <div class="text-3xl font-alt">
                                {{ stat_info.value.description }}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </main>

    <script>
        document.getElementById("open_wish").onclick = ((e) => {
            const makeAWish = document.getElementById("make_a_wish");
            const separator = document.getElementById("separator");

            if (makeAWish.classList.contains("hidden")) {
                makeAWish.classList.remove("hidden");
                separator.classList.remove("hidden");

                e.currentTarget.innerHTML = "← Zrušit"
            } else {
                makeAWish.classList.add("hidden");
                separator.classList.add("hidden");

                e.currentTarget.innerHTML = "+ Přidat přání"
            }
        });
    </script>
{% endblock %}