{% extends 'Layout/news_layout.html' %}
{% load core_tags %}
{% load wagtailimages_tags %}

{% block content %}
<section class="container mx-auto  pb-20 bg-slate-50">
    <h1 class="text-[21px] md:text-[28px] sticky top-10 z-50 bg-white md:bg-slate-50 pt-2 md:pt-0 font-bold leading-8">
        {% if page.customTitle %}
        {{page.customTitle|safe}}
        {% else %}
        {{page.title}}
        {% endif %}
    </h1>
    <div class="flex items-center gap-2 md:gap-6 text-[14px] md:text-[16px] my-1">
        {% if page.show_author %}

        <h2 class="flex items-center gap-1"><i class='bx bxs-user'></i> <b>{{page.owner}}</b></h2>
        |
        {% endif %}
        <h2 class="opacity-70 flex items-center gap-1"><i class='bx bx-calendar'></i>
            {{page.first_published_at|smart_date}}</h2>
        |
        <h2 class="opacity-70 flex items-center gap-1 text-[{{page.rtColor}}]">
            <i class='bx bx-stopwatch'></i> {{page.readTime}} min read
        </h2>
        |
        <div class="flex items-center mt-1 gap-4">
            {% for social in page.news_social.all %}
            <a href="{{social.url}}" title="{{social.slp.title}}">
                {{social.slp.soLogoText|safe}}
            </a>
            {% endfor %}

        </div>
    </div>

    <div class="block md:hidden w-full text-sm my-2 shadow-xl">
        <details class="group border-b border-white flex w-full ">
            <summary
                class="flex w-full px-2 items-center justify-between  cursor-pointer bg-gray-900 bg-opacity-90 text-white">
                <h1 class="text-md font-bold uppercase  text-center ">
                    Table of
                    content
                </h1>
                <span class="relative flex-shrink-0  text-4xl">

                    <span class="block group-open:hidden">
                        <i class='bx bx-chevron-down'></i>
                    </span>

                    <span class="hidden group-open:block">
                        <i class='bx bx-chevron-down'></i>
                    </span>
                </span>
            </summary>

            <div class="mb-2 px-2 leading-relaxed">
                {% for block in page.body %}
                {% if block.block_type == 'section' %}
                {% for content in block.value.content %}
                {% if content.block_type == 'heading' %}
                <li class="opacity-80">
                    <a href="#{{content.value.title|slugify}}"
                        class="font-semibold hover:font-bold hover:text-blue-700 visited:text-purple-600">
                        {{content.value.title}}
                    </a>
                </li>
                {% elif content.block_type == 'highlight_heading' %}
                <li class="opacity-80">
                    <a href="#{{content.value.title|slugify}}"
                        class="font-semibold hover:font-bold hover:text-blue-700 visited:text-purple-600">
                        {{content.value.title}}
                    </a>
                </li>
                {% elif content.block_type == 'image_heading' %}
                <li class="opacity-80">
                    <a href="#{{content.value.title|slugify}}"
                        class="font-semibold hover:font-bold hover:text-blue-700 visited:text-purple-600">
                        {{content.value.title}}
                    </a>
                </li>
                {% endif %}
                {% endfor %}
                {% elif block.block_type == 'row' %}
                {% for content in block.value.content %}
                {% for content in content.value %}

                {% if content.block_type == 'heading' %}
                <li class="opacity-80">

                    <a href="#{{content.value.title|slugify}}"
                        class="font-semibold hover:font-bold hover:text-blue-700 visited:text-purple-600">
                        {{content.value.title}}
                    </a>
                </li>
                {% elif content.block_type == 'highlight_heading' %}
                <li class="opacity-80">
                    <a href="#{{content.value.title|slugify}}"
                        class="font-semibold hover:font-bold hover:text-blue-700 visited:text-purple-600">
                        {{content.value.title}}
                    </a>
                </li>
                {% elif content.block_type == 'image_heading' %}
                <li class="opacity-80">
                    <a href="#{{content.value.title|slugify}}"
                        class="font-semibold hover:font-bold hover:text-blue-700 visited:text-purple-600">
                        {{content.value.title}}
                    </a>
                </li>
                {% endif %}
                {% endfor %}
                {% endfor %}
                {% endif %}
                {% endfor %}


            </div>
        </details>
    </div>
    <div class="flex w-full">

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




            {% if page.search_image %}
            <img src="{{page.search_image.file.url}}" alt="{{page.title}}" class="w-full h-auto my-3">
            {% endif %}

            {% for hl in page.highlights %}

            {% if hl.block_type == 'title' %}
            <h1 class="{{hl.value.alignment}} {{hl.value.size}} font-bold text-red-700">{{hl.value.title}}</h1>
            {% elif hl.block_type == 'list' %}
            {% for item in hl.value %}
            <div class="border-l-4 border-red-700 my-2 pl-3 text-[18px]">
                {{item}}
            </div>
            {% endfor %}

            {% else %}
            {{hl.block_type}}
            {% endif %}

            {% endfor %}
            <div class="mt-6">

                {{page.shortDesc|add_list_classes}}
            </div>


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


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

            {% else %}

            {{block.block_type}}

            {% endif %}
            {% endfor %}

            <!-- <h1 id="test">Test TOC</h1> -->

        </div>
        <div class="hidden md:block w-[25%] text-sm ">
            <div class="sticky top-36  shadow-xl border rounded-xl p-2">

                <h1 class="text-md font-bold uppercase bg-gray-900 bg-opacity-90 text-center text-white">Table of
                    content</h1>

                {% for block in page.body %}
                {% if block.block_type == 'section' %}
                {% for content in block.value.content %}
                {% if content.block_type == 'heading' %}
                <li class="opacity-80">
                    <a href="#{{content.value.title|slugify}}"
                        class="font-semibold hover:font-bold hover:text-blue-700 visited:text-purple-600">
                        {{content.value.title}}
                    </a>
                </li>
                {% endif %}
                {% endfor %}
                {% elif block.block_type == 'row' %}
                {% for content in block.value.content %}
                {% if content.block_type == 'heading' %}
                <li class="opacity-80">

                    <a href="#{{content.value.title|slugify}}"
                        class="font-semibold hover:font-bold hover:text-blue-700 visited:text-purple-600">
                        {{content.value.title}}
                    </a>
                </li>
                {% endif %}
                {% endfor %}
                {% endif %}
                {% endfor %}

            </div>

            {% if page.news_products.all %}
            <div class="shadow-xl border rounded-xl p-2">

                <h1 class="text-md font-bold uppercase bg-gray-900 bg-opacity-90 text-center text-white">Related
                    Products</h1>

                {% for rp in page.news_products.all %}
                <div class="flex items-center gap-4 my-1 border-b rounded-b-xl border-gray-700 px-1">
                    {% image_url rp.product.search_image "fill-60x70|jpegquality-90" as img %}
                    <img src="{{img}}" alt="{{rp.product.title}}" />

                    <h1>
                        {{rp.product.title}}
                    </h1>

                </div>
                {% endfor %}

            </div>
            {% endif %}


        </div>
    </div>


<!-- ======= Related News ====== -->
{% if related_news %}
<div class="p-4">
    <h1 class="text-xl font-bold border-b-2 mb-2">Related News :</h1>
    <div class="flex w-full flex-wrap justify-center gap-6">

        {% for news in related_news %}
        <div class="w-[250px] border rounded-xl p-2">
            <a href="{{news.url}}" aria-label="{{news.title}}">

                <!-- <img src="{{news.search_image.file.url}}" alt="{{news.title}}" class="w-full h-auto" /> -->
                {% if news.search_image %}
                {% image_url news.search_image "width-230" as img %}
                {% endif %}
                <img src="{{img}}" alt="{{news.title}}" />

                <h1 class="text-center">{{news.title}}</h1>
            </a>

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


</div>
{% endif %}
<!-- ======= Related News End ====== -->


</section>

{% endblock content %}

{% block script %}

{% endblock script %}