{% extends 'base.html' %}
{% load static %}
{% load cms_tags core_tags %}
{% load wagtailmetadata_tags %}

<!-- Head -->
{% block meta_tags %}
{% meta_tags %}
{% endblock meta_tags %}

{% block style %}
<script async src="https://cdn.ampproject.org/v0.js"></script>

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>

{% endblock style %}

{% block content %}

<!-- <section class="pb-20 md:pb-8 pt-4 bg-slat-50 px-1 "> -->
<div class="container mx-auto mb-20 sm:mb-32">

    <div class="hidden md:block">

        <amp-carousel id="carousel-with-preview" width="1200" height="550" layout="responsive" type="slides" role="list"
            aria-label="Carousel with slide previews" delay="3000" loop>
            {% for slides in page.specific.hero %}
            <div class="h-[32rem]">

                {% for rows in slides.value %}
                <div class="flex w-full justify-between">
                    {% for tiles in rows.value %}
                    <div class="w-full group">
                        {% if tiles.value.image %}
                        <div class="relative max-w-full mx-auto overflow-hidden">
                            <img class="h-40 md:h-64 w-full object-cover border-[0.5px] border-white group-hover:scale-110 transition-all duration-500"
                                src="{{tiles.value.image.file.url}}"
                                alt="{{tiles.value.page.specific.search_image.title}}">
                            <div class="absolute inset-0 bg-[{{tiles.value.bg}}] opacity-50"></div>
                            {% if tiles.value.page.specific.cat %}
                            <div class="absolute top-3 left-3 flex items-center justify-center">
                                <h2
                                    class="text-[{{tiles.value.bg}}] bg-[{{tiles.value.fg}}] {{tiles.value.size}} px-2 py-0.5 rounded">
                                    {{tiles.value.page.specific.cat}}
                                </h2>
                            </div>
                            {% endif %}
                            <div class="absolute bottom-5 flex items-center justify-center">
                                <h2 class="text-[{{tiles.value.fg}}] {{tiles.value.size}} px-4">
                                    <span class="text-[{{tiles.value.fg}}] text-sm">
                                        {{tiles.value.page.specific.first_published_at|smart_date}}
                                    </span>
                                    <br />
                                    {% if tiles.value.title %}
                                    {{tiles.value.title}}
                                    {% else %}
                                    {{tiles.value.page.specific.customTitle|safe}}
                                    {% endif %}
                                </h2>
                            </div>
                        </div>
                        {% elif tiles.value.bgGradient %}
                        <div class="relative max-w-full h-full mx-auto" style="background: {{tiles.value.bgGradient}};">

                            {% if tiles.value.page.specific.cat %}
                            <div class="absolute left-3 top-3 flex items-center justify-center">
                                <h2
                                    class="text-[{{tiles.value.bg}}] bg-[{{tiles.value.fg}}] text-sm px-2 py-0.5 rounded">
                                    {{tiles.value.page.specific.cat}}
                                </h2>
                            </div>
                            {% endif %}
                            <div class="absolute bottom-5 flex items-center justify-center">
                                <h2 class="text-[{{tiles.value.fg}}] {{tiles.value.size}} px-4">
                                    <span class="text-[{{tiles.value.fg}}] text-sm">
                                        {{tiles.value.page.specific.first_published_at|smart_date}}
                                    </span>
                                    <br />
                                    {% if tiles.value.title %}
                                    {{tiles.value.title}}
                                    {% else %}
                                    {{tiles.value.page.specific.customTitle|safe}}
                                    {% endif %}
                                </h2>
                            </div>
                        </div>
                        {% else %}
                        <div class="relative max-w-full h-full mx-auto bg-[{{tiles.value.bg}}] ">

                            {% if tiles.value.page.specific.cat %}
                            <div class="absolute left-3 top-3 flex items-center justify-center">
                                <h2
                                    class="text-[{{tiles.value.bg}}] bg-[{{tiles.value.fg}}] text-sm px-2 py-0.5 rounded">
                                    {{tiles.value.page.specific.cat}}
                                </h2>
                            </div>
                            {% endif %}
                            <div class="absolute bottom-5 flex items-center justify-center">
                                <h2 class="text-[{{tiles.value.fg}}] {{tiles.value.size}} px-4">
                                    <span class="text-[{{tiles.value.fg}}] text-sm">
                                        {{tiles.value.page.specific.first_published_at|smart_date}}
                                    </span>
                                    <br />
                                    {% if tiles.value.title %}
                                    {{tiles.value.title}}
                                    {% else %}
                                    {{tiles.value.page.specific.customTitle|safe}}
                                    {% endif %}
                                </h2>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>

            {% endfor %}

        </amp-carousel>
    </div>
    <div class="block md:hidden">

        <amp-carousel id="carousel-with-preview" width="1200" height="1600" layout="responsive" type="slides"
            role="list" aria-label="Carousel with slide previews" delay="3000" loop>
            {% for slides in page.specific.hero %}
            <div class="h-[32rem]">

                {% for rows in slides.value %}
                <div class="grid w-full">
                    {% 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}}] {{tiles.value.size}} px-4">

                                    {{tiles.value.page.specific.customTitle|safe}}

                                </h2>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>

            {% endfor %}

        </amp-carousel>
    </div>

    <div class="flex justify-between items-center mb-4">
        <p class="text-[16px] text-left">
            <a href="/" aria-label="Home">
                <i class='bx bxs-home'></i>
            </a>
            <span>
                >
            </span>
            <span class="opacity-70">
                {% if page.menuName %}
                {{page.menuName}}
                {% else %}
                {{page.title}}
                {% endif %}
            </span>
        </p>
        {% if page.slug == 'blogs' %}
        <div class="hidden md:block">
            <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-0.5">&#9783;</button>
        </div>
        {% endif %}
    </div>

    <div class="flex w-full gap-2">
        <div class="w-full md:w-[75%]">


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

                    {% for news in posts %}
                    <div class="border rounded-lg px-4 pt-4 mb-4">

                        <div class="flex w-full gap-6">
                            <img src="{{news.specific.search_image.file.url}}" alt="{{news.title}}"
                                class="rounded-lg w-[280px] h-[190px]">
                            <div>
                                <div class="flex items-center gap-6 text-[12px]">
                                    {% if news.specific.show_author %}

                                    <h2 class="flex items-center gap-1"><i class='bx bxs-user'></i>
                                        <b>{{news.owner}}</b>
                                    </h2>
                                    {% endif %}
                                    <h2 class="opacity-70 flex items-center gap-1"><i class='bx bx-calendar'></i>
                                        {{news.first_published_at|date:"d M,Y"}}</h2>
                                    <h2 class="opacity-70 flex items-center gap-1">
                                        <i class='bx bx-stopwatch'></i> {{news.specific.readTime}} minutes
                                    </h2>
                                </div>

                                <a href="{{news.url}}">
                                    <h1 class="text-[18px] line-clamp-2 font-bold ">{{news.title}}</h1>
                                </a>
                                {% if news.specific.cat %}
                                <span
                                    class="px-1 font-bold cursor-pointer rounded py-0.5 text-xs bg-[{{news.specific.cat.bgColor}}] text-[{{news.specific.cat.fgColor}}] hover:bg-[{{news.specific.cat.hoverBgColor}}] hover:text-[{{news.specific.cat.hoverFgColor}}]">
                                    {{news.specific.cat}}
                                </span>
                                {% endif %}
                                <div class="line-clamp-3 text-[14px] opacity-70 pb-1">
                                    {{news.specific.shortDesc|safe}}
                                </div>
                                <div class="flex w-full items-center justify-between">
                                    <a href="{{news.url}}"
                                        class="bg-blue-600 px-4 py-2 rounded font-bold text-[12px] text-white flex items-center gap-1">Read
                                        More <i class='bx bx-chevrons-right'></i></a>
                                </div>

                            </div>

                        </div>
                        <div class="flex justify-end text-[9px] text-blue-600 mt-4">

                            {% if news.specific.srcTitle and news.specific.srcURL %}
                            <a href="{{news.specific.srcURL}}" target="_blank" class="">
                                Source {{news.specific.srcTitle}}
                            </a>
                            {% endif %}
                        </div>
                    </div>

                    {% endfor %}

                </div>
            </div>

            <div id="grid_view"
                class="mb-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 md:gap-10 grid-flow-row">
                {% for post in posts %}
                <div class="post-item border border-gray-200 rounded-2xl h-full">
                    <a href="{{post.url}}" class="group">
                        <div class="rounded-ss-2xl rounded-se-2xl overflow-hidden">
                            <img src="{{post.specific.search_image.file.url}}"
                                alt="{{post.specific.search_image.title}}"
                                class="aspect-[3/2] object-cover w-full max-h-64 scale-100 group-hover:scale-110 transition-all duration-500" />
                        </div>
                        <div class="px-4 sm:px-6 my-4">
                            <div class="flex items-center gap-x-3 mb-2">
                                {% for tag in post.specific.tags.all %}
                                <div class="bg-[{{tag.bgColor}}] text-[{{tag.fgColor}}] px-2 py-0.5 rounded-md text-sm">
                                    <span class=" svelte-17r4rrf">{{tag.name}}</span>
                                </div>
                                {% endfor %}
                                <div class="flex w-full items-center gap-6 text-[14px]">

                                    {% if post.specific.show_author %}

                                    <h2 class="flex items-center gap-1"><i class='bx bxs-user'></i>
                                        <b>{{post.owner}}</b>
                                    </h2>
                                    {% endif %}
                                    <h2 class="opacity-70 flex items-center gap-1"><i class='bx bx-calendar'></i>
                                        {{post.first_published_at|date:"d M,Y"}}</h2>
                                    <h2 class="opacity-70 flex items-center gap-1">
                                        <i class='bx bx-stopwatch'></i> {{post.specific.readTime}} minutes
                                    </h2>
                                </div>
                                <!-- <div class="text-gray-700 text-sm">{{post.first_published_at|date:"d M, Y"}}</div> -->
                            </div>
                            <h1 class="text-lg font-semibold mb-2 line-clamp-1">{{post.specific.customTitle|safe}}</h1>
                            <p class="text-gray-600 mb-2 text-sm line-clamp-2">
                                {% if post.shortDesc %}
                                {{post.shortDesc|safe}}
                                {% else %}
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque aut temporibus, maiores
                                fugit,
                                illum nulla eligendi deleniti praesentium id qui quis, consequuntur incidunt? Laborum
                                architecto
                                numquam ducimus placeat dignissimos quis.
                                {% endif %}
                            </p>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="w-full md:w-[25%]">
            <div class="border rounded p-2">
                <h1 class="font-bold pb-1 mb-2 border-b-2 border-gray-900">Recent Posts</h1>

                {% for post in recent %}
                <div class="flex gap-2">
                    <img src="{{post.specific.search_image.file.url}}" alt="" class="w-24 h-20 rounded" />
                    <div>
                        <h1 class="text-sm font-bold">{{post.title}}</h1>
                        <h2 class="text-xs">{{post.first_published_at|smart_date}}</h2>
                    </div>

                </div>
                {% endfor %}

                <a href="all/" class="bg-blue-600 px-2 py-1 rounded text-sm text-white">View More</a>
            </div>

        </div>
    </div>

    {% include 'components/common/paging.html' %}

    </section>

    {% endblock content %}

    {% 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-0.5");


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


        }
        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-0.5");

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

        }
    </script>
    {% endblock script %}