{% extends 'base.html' %}
{% load wagtailmetadata_tags %}

{% block meta_tags %}
{% meta_tags %}
{% endblock meta_tags %}



{% block content %}

{% if page.slug != "main" %}
<div class=" sticky top-14 z-40">
    <div class="bg-main flex justify-center items-center uppercase text-3xl md:text-5xl py-10 oswald" id="page_banner"
        style="transition: 0.5s;">
        {{page.title}}
    </div>
    <nav class="hidden md:block border-t border-b py-1 bg-main ">
        <ol class="md:container mx-auto flex items-center gap-2 text-[10px] sm:text-sm md:text-lg">
            <a href="/" aria-label="Home">

                <i class='bx bxs-home'></i>
            </a>
            {% for p in page.breadcrumb_list %}
            {% if p.show_in_menus %}
            <li>
                <a href="{{p.url}}" class="flex items-center">
                    {% if p.catMenu %}
                    {{p.catMenu}}
                    {% else %}
                    {{p.title}}
                    {% endif %}
                    /</a>
            </li>
            {% endif %}
            {% endfor %}

            <li aria-current="page">
                {% if page.catMenu %}
                {{page.catMenu}}
                {% else %}
                {{page.title}}
                {% endif %}
            </li>

        </ol>
    </nav>
</div>
{% endif %}


{% if page.bannercontent %}

<span class="hidden" id="delay">{{page.bannerTimer}}</span>
<div class="slideshow-container z-0">
    {% for slide in page.bannercontent %}
    <div class="mySlides fade" style="display: block;">
        <a href="{% if slide.value.link %}{{slide.value.link}}{% elif slide.value.page %}{{slide.value.page.url}}{% else %}#{% endif %}"
            target="_blank">
            <img src="{{slide.value.image.file.url}}" alt="{{slide.value.image.title}}"
                class="w-full h-[200px]  md:h-[400px] lg:h-[{{page.bannerHeight}}px]">
            </img>
        </a>
    </div>
    {% endfor %}
    <!-- Next and previous buttons -->
    <div class="-mt-80 mb-72 flex w-full justify-between">
        <a class="prev bg-gray-100 bg-opacity-60 rounded-full py-1 px-2 cursor-pointer" onclick="plusSlides(-1)">❮</a>
        <a id="next" class="next bg-gray-100 bg-opacity-60 rounded-full py-1 px-2 cursor-pointer"
            onclick="plusSlides(1)">❯</a>
    </div>
</div>
<!-- The dots/circles -->
<div style="text-align:center">
    {% for slide in page.bannercontent %}
    <span class="dot" onclick="currentSlide({{forloop.counter}})"></span>
    {% endfor %}

</div>

{% endif %}

<div class="px-4">
{% for slides in page.specific.hero %}

    {% for rows in slides.value %}
    <div class="grid md:flex w-full justify-between">
        {% for tiles in rows.value %}
        <div class="w-full">
            <div class="relative max-w-full mx-auto">
                <img class="h-40 md:h-64 w-full object-cover border-[0.5px] border-white"
                    src="{% if tiles.value.image %}{{tiles.value.image.file.url}}{% else %}{{tiles.value.page.specific.search_image.file.url}}{% endif %}"
                    alt="{{tiles.value.page.specific.search_image.title}}">
                <div class="absolute inset-0 bg-[{{tiles.value.bg}}] opacity-50"></div>
                <div class="absolute bottom-5 flex items-center justify-center">
                    <h2 class="text-[{{tiles.value.fg}}] md:text-xl px-4">
                        {{tiles.value.page.title|safe}}</h2>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endfor %}
    
    {% endfor %}
</div>

{% for block in page.body %}
{% if block.block_type == 'section' %}
{% include 'components/PageBlock/sectionBlock.html' %}


{% elif block.block_type == 'row' %}
{% include 'components/PageBlock/rowBlock.html' %}

{% else %}

{{block.block_type}}

{% endif %}
{% endfor %}

{% if page.slug == "main" %}
<div class="py-4 px-1 md:py-10 bg-yellow-950 flex w-full justify-center">

    <form action="/subscribe/" method="post" class="flex w-full items-center justify-center">
        {% csrf_token %}
        <label for="email" class="hidden">Email</label>
        <input type="email" name="email" id="email"
            class="w-full md:w-1/2 rounded-full border border-white py-2 md:py-[16px] pr-28 md:text-xl"
            placeholder="Enter Email">
        <button type="submit"
            class="rounded-full md:text-xl bg-orange-400 -ml-[5rem] md:-ml-[6.4rem] px-2 py-[9px] md:py-[17px]">Subscribe</button>
    </form>

</div>
{% endif %}


{% endblock content %}


{% block script %}
<script>
    var delay = document.getElementById("delay").innerHTML;
    var slideIndex = 1;
    showSlides(slideIndex);

    // Start autoplaying automatically
    var autoplayInterval = setInterval(function () {

        // Get element via id and click next
        document.getElementById("next").click();

    }, delay); // Do this every 1 second, increase this!

    // Stop function added to button
    function stopAutoplay() {

        // Stop the autoplay
        clearInterval(autoplayInterval);

    }



    // Next/previous controls
    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    // Thumbnail image controls
    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }

        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>
{% endblock script %}