{% extends 'base.html' %}
{% load wagtailimages_tags %}
{% load wagtail_srcset_tags %}

{% load static %}


{% block meta_tags %}
<meta property="og:description"
    content="Tricom is a leading suppliers of CCTV, Broadcasting, FTTH, Security, Splitter, Converters." />
{% endblock meta_tags %}

{% block style %}
<style>
    .mySlides {
        display: none;
        /* height: 40rem; */
    }

    img {
        vertical-align: middle;
        /* height: 40rem; */
    }

    /* Slideshow container */


    /* Caption text */
    .text {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .active {
        background-color: #717171;
    }

    /* Fading animation */
    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @keyframes fade {
        from {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
        .text {
            font-size: 11px
        }
    }
</style>
{% endblock style %}

{% block content %}
{% if page.slug != "home" %}
<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="/">

                <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 %}


{% for block in page.body %}

{% if block.block_type == 'carousel' %}
{% include 'components/ampCarousel.html' with content=block.value.content width=block.value.width height=block.value.height delay=block.value.timer %}
<!-- 
<div class="z-0 h-5/6">
    {% for content in block.value.content %}
    <div class="mySlides fade">
        <div class="numbertext">{{forloop.counter}} / {{block.value.content|length}}</div>
        {% if content.value.image %}
        {% srcset_image content.value.image width-60 as thumbnail %}
        <img src="{{thumbnail.file.url}}" srcset="{{ thumbnail.srcset }}" alt="{{content.value.image.title}}"
            class="w-[100%] h-auto" loading="lazy" />
        {% endif %}
    </div>
    {% endfor %}



</div>
<div style="text-align:center" class="-mt-6 z-50">
    {% for content in block.value.content %}

    <span class="dot"></span>
    {% endfor %}

</div> -->


<div class="bg-main hidden md:block" id="search-section">
    <form method="get" action="/search/" class="container py-3 md:py-6 mx-auto flex w-full justify-center items-center"
        role="search">

        <input name="q" type="search" class="text-black w-full md:w-[80%] rounded-xl py-3 md:py-6 pl-4 pr-12 text-xl"
            id="searchinput" placeholder="Search your product ..." aria-label="Search">

        <button type="submit" class="bg-main text-white rounded-xl text-xl px-4 py-2 -ml-12 md:-ml-16"> &#128269;
        </button>
    </form>
</div>

{% elif 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 %}

{% endblock content %}

{% block footer %}
{% if page.show_footer %}
{% include 'components/footer.html' %}
{% endif %}
{% endblock footer %}

{% block script %}
<!-- 
<script>
    const el = document.querySelector('.blaze-slider')
    new BlazeSlider(el, {
        all: {
            enableAutoplay: true,
            autoplayInterval: 3000,
            // transitionDuration: 300,
            // slidesToShow: 1,
            // loop: true,
            // pagination
            // enablePagination: true,


        },
        '(max-width: 900px)': {
            slidesToShow: 1,
        },
        '(max-width: 500px)': {
            slidesToShow: 1,
        },
    })
</script> -->



<script>
    let slideIndex = 0;
    showSlides();

    function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) { slideIndex = 1 }
        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";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
</script>
{% endblock script %}