{% extends "base.html" %}
{% load wagtailroutablepage_tags %}
{% load wagtailimages_tags %}

{% load cms_tags %}

{% block title %}
{{page.seo_title}}
{% endblock %}
{% block extra_css %}
<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 %}

{% block content %}
<div class="bg-gray-100 pb-10 min-h-screen">


    <div class="flex w-full justify-center my-2">
        <form action="/search/" method="get" class="flex w-full items-center justify-center">

            <input type="text" name="q" id="" class="rounded w-[60%]">
            <button type="submit" aria-label="search-blog" class="text-2xl bg-gray-200 h-full px-4 rounded">
                <i class="fa fa-search" aria-hidden="true"></i>

            </button>
        </form>
    </div>



    <div class="flex w-full gap-1">

        <div class=" w-[70%] container mx-auto">

            <div class="pt-2">
                <div class="flex items-center justify-between">

                    <h1>Showing result for : <b class="text-2xl">{{title}}</b></h1>
                    <div class="flex gap-4">

                        <button onclick="listView()" id="list_btn" class="text-xl font-bold">&#9776;</button>
                        <button onclick="gridView()" id="grid_btn"
                            class="text-xl font-bold bg-gray-300 px-2 py-1">&#9783;</button>
                    </div>
                </div>
                <hr class="w-full bg-yellow-500 h-1">
            </div>

            <div id="grid_view" class="flex justify-center gap-8 flex-wrap ">


                {% for blog in page_obj %}
                <article class="my-4 w-72 h-80 shadow px-2 pb-4">
                    <a href="{{blog.url}}">
                        <div class="h-[75%] w-full text-red-500">
                            {% srcset_image  blog.titleImg original class="w-full h-full" %}
                        </div>
                        <div class="h-[10%]">
                            <div class="flex justify-between">
                                <span
                                    class="-mt-6 w-fit bg-orange-400 px-2 py-1 flex item-center text-center text-sm text-white">
                                    {{blog.first_published_at |date:"d"}}
                                    <br />
                                    {{blog.first_published_at |date:"M"}}
                                </span>
                                {% if blog.blogStory %}
                                <a href="/story/{{blog.slug}}" class="text-xl tooltip">
                                    <i class='bx bx-images'></i>

                                </a>
                                {% endif %}
                            </div>

                            <h3 class="font-bold line-clamp-2">
                                {{blog.title}}

                            </h3>
                            <div class="hidden text-left line-clamp-3 text-sm">
                                {{blog.shortDesc |safe}}
                            </div>
                        </div>
                    </a>


                </article>

                {% endfor %}
            </div>


            <div id="list_view" class="hidden grid w-full ">

                {% for blog in page_obj %}
                <article class="flex flex-col sm:flex-row gap-4 my-4 border">

                    <div
                        class="h-64 w-full md:w-[30%] border flex items-center">
                        {% srcset_image  blog.titleImg original class="w-full h-fit" %}


                    </div>
                    <div class="md:w-[70%] h-64">

                        <a href="{{blog.url}}">

                            {% for tag in blog.tags.all %}
                            <a href="/{{tag.slug}}"
                                class="px-2 mx-1 py-0.5 {% if tag.bgColor %} bg-[{{tag.bgColor}}] {% else %} bg-gray-900 {% endif %} {% if tag.textColor %} text-[{{tag.textColor}}] {% else %} text-white {% endif %} hover:bg-[{{tag.bgHoverColor}}] hover:text-[{{tag.textHoverColor}}] rounded">

                                {% if tag.name|make_list|first == '"' %}
                                {{tag.name|slice:":-1"|slice:"1:" }}
                                {% else %}
                                {{tag.name}}
                                {% endif %}

                            </a>
                            {% endfor %}
                            <br />
                            <h3 class="prose md:prose-xl lg:prose-2xl line-clamp-3">
                                {{blog.title}}
                            </h3>
                            <div class="my-2 text-left line-clamp-3">
                                {{blog.shortDesc | safe}}
                            </div>
                            <span class="flex item-center gap-4 text-xs">
                                {{blog.first_published_at |date:"d/m/Y"}}
                            </span>

                        </a>
                    </div>
                </article>

                {% endfor %}
                <hr class="md:hidden" />
            </div>

        </div>
        <div class="w-[30%]">

            <section class="md:block w-full">
                <!-- <h1 class="prose prose-2xl bg-gray-900 text-white py-2 text-center rounded">Trending</h1> -->

                <div class="rounded border w-full mx-auto mt-0.5">
                    <!-- Tabs -->
                    <ul id="tabs" class="inline-flex pt-2 px-1 w-full grid grid-cols-2 border-b">
                        <li
                            class="bg-white px-4 text-gray-800 font-semibold py-2 rounded-t border-t border-r border-l -mb-px">
                            <a id="default-tab" href="#first">Latest</a>
                        </li>
                        <li class="px-4 text-gray-800 font-semibold py-2 rounded-t border "><a
                                href="#second">Trending</a>
                        </li>
                    </ul>

                    <!-- Tab Contents -->
                    <div id="tab-contents">
                        <div id="first" class="py-2">
                            <article class="w-full py-1 px-2 h-auto shadow">
                                {% if page.get_recent_blogs %}
                                <ul>
                                    {% for post in page.get_recent_blogs %}
                                    <li class="my-1 flex justify-start border-b">
                                        <a href="{{post.url}}"
                                            class="flex w-full justify-center items-center gap-1 ">
                                            <div class="h-16 w-[20%]">
                                                {% srcset_image  post.titleImg width-60 %}

                                                <!-- <img src="{{post.titleImg.file.url}}" alt="{{post.title}}"
                                                    class="h-full w-full text-[10px]" loading="lazy" /> -->
                                            </div>
                                            <h3 class="w-[80%] line-clamp-3">

                                                {{ post.title|truncatewords:10 }}
                                            </h3>
                                        </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                            </article>
                        </div>
                        <div id="second" class="hidden py-2">
                            <article class="w-full py-1 px-2 h-auto shadow">
                                {% if page.get_trending_blogs %}
                                <ul>
                                    {% for post in page.get_trending_blogs %}
                                    <li class="my-1 flex justify-start border-b">
                                        <a href="{{post.url}}"
                                            class="flex w-full justify-center items-center gap-1 ">
                                            <div class="h-16 w-[20%]">

                                                {% srcset_image  post.titleImg width-60 %}

                                            </div>
                                            <h3 class="w-[80%] line-clamp-3">

                                                {{ post.title|truncatewords:10 }}
                                            </h3>
                                        </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                            </article>
                        </div>
                    </div>
                </div>

            </section>


        </div>
    </div>





</div>
{% endblock %}
{% block script %}

<script>
    function listView() {


        var gridview = document.getElementById('grid_view');
        gridview.classList.add("hidden");
        var listview = document.getElementById('list_view');
        listview.classList.remove("hidden");

        var listbtn = document.getElementById('list_btn');
        listbtn.classList.add("bg-gray-300");
        listbtn.classList.add("px-2");
        listbtn.classList.add("py-1");


        var gridbtn = document.getElementById('grid_btn');
        gridbtn.classList.remove("bg-gray-300");
        gridbtn.classList.remove("px-2");
        gridbtn.classList.remove("py-1");


    }
    function gridView() {
        var listview = document.getElementById('list_view');
        listview.classList.add("hidden");
        var gridview = document.getElementById('grid_view');
        gridview.classList.remove("hidden");

        var listbtn = document.getElementById('list_btn');
        listbtn.classList.remove("bg-gray-300");
        listbtn.classList.remove("px-2");
        listbtn.classList.remove("py-1");

        var gridbtn = document.getElementById('grid_btn');
        gridbtn.classList.add("bg-gray-300");
        gridbtn.classList.add("px-2");
        gridbtn.classList.add("py-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>

<script>
    let tabsContainer = document.querySelector("#tabs");

    let tabTogglers = tabsContainer.querySelectorAll("#tabs a");

    console.log(tabTogglers);

    tabTogglers.forEach(function (toggler) {
        toggler.addEventListener("click", function (e) {
            e.preventDefault();

            let tabName = this.getAttribute("href");

            let tabContents = document.querySelector("#tab-contents");

            for (let i = 0; i < tabContents.children.length; i++) {

                tabTogglers[i].parentElement.classList.remove("border-t", "border-r", "border-l", "-mb-px", "bg-white"); tabContents.children[i].classList.remove("hidden");
                if ("#" + tabContents.children[i].id === tabName) {
                    continue;
                }
                tabContents.children[i].classList.add("hidden");

            }
            e.target.parentElement.classList.add("border-t", "border-r", "border-l", "-mb-px", "bg-white");
        });
    });

</script>

{% endblock script %}