{% extends 'Layout/blog_layout.html' %}
{% load core_tags ecom_tags %}

{% block content %}
<section class="pb-20 md:pb-10">
    {% if page.bgGradient %}
    <div class="px-2 md:px-10 py-6 rounded-3xl text-[{{page.fgColor}}]" style="background: {{page.bgGradient}};">

        <h1 class="text-3xl md:text-5xl my-4 md:my-6">{{page.customTitle|safe}}</h1>

    </div>
    {% elif page.bgImage.file.url %}
    <div class="relative max-w-full mx-auto">
        <img class="h-80 w-full object-cover rounded-md" src="{{page.bgImage.file.url}}" alt="{{page.bgImage.title}}">
        <div class="absolute inset-0 bg-[{{page.bgColor}}] opacity-50 rounded-md"></div>
        <div class="absolute inset-0 flex items-center justify-center">
            <h2 class="text-[{{page.fgColor}}] text-3xl md:text-5xl px-4">{{page.customTitle|safe}}</h2>
        </div>
    </div>
    {% else %}
    <div class="px-2 md:px-10 py-6 rounded-3xl bg-[{{page.bgColor}}] text-[{{page.fgColor}}]">

        <h1 class="text-3xl md:text-5xl my-4 md:my-6">{{page.customTitle|safe}}</h1>

    </div>
    {% endif %}

    <div class="block md:hidden">
        <div class="block md:hidden 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 justify-center items-center py-2 gap-2 text-[14px] ">
            {% 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|date:"d M,Y"}}</h2>
            |
            <h2 class="opacity-70 flex items-center gap-1">
                <i class='bx bx-stopwatch'></i> {{page.readTime}} min
            </h2>
            |

            {% if not user.is_authenticated %}
            <a href="/login/" title="Login to bookmark" class="mt-1">
                <i class='bx bxs-bookmark-plus'></i>
            </a>
            {% else %}

            {% if not is_bookmarked %}
            <a href="add-bookmark/" title="Add to bookmark" class="mt-1">
                <i class='bx bxs-bookmark-plus'></i>
            </a>
            {% else %}
            <a href="add-bookmark/" title="Remove from bookmark" class="mt-1">
                <i class='bx bxs-bookmark-minus'></i>
            </a>
            {% endif %}
            {% endif %}

        </div>
        <div class="flex w-full justify-center items-center mt-1 gap-4">
            {% for social in page.blog_social.all %}
            <a href="{{social.url}}" title="{{social.slp.title}}">
                {{social.slp.soLogoText|safe}}
            </a>
            {% endfor %}

        </div>
    </div>


    <div class="flex w-full flex-wrap">

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


            <div class="hidden md:block">

                <div class="flex items-center py-2 ml-10 gap-6 text-[14px] ">
                    {% 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|date:"d M,Y"}}</h2>
                    |
                    <h2 class="opacity-70 flex items-center gap-1">
                        <i class='bx bx-stopwatch'></i> {{page.readTime}} minutes
                    </h2>
                    {% if page.blog_social.all %}
                    |
                    <div class="flex items-center mt-1 gap-4">
                        {% for social in page.blog_social.all %}
                        <a href="{{social.url}}" title="{{social.slp.title}}">
                            {{social.slp.soLogoText|safe}}
                        </a>
                        {% endfor %}
                    </div>
                    {% endif %}
                    |
                    {% if not user.is_authenticated %}
                    <a href="/login/" title="Login to bookmark" class="mt-1">
                        <i class='bx bxs-bookmark-plus'></i>
                    </a>
                    {% else %}
                    {% if not is_bookmarked %}
                    <a href="add-bookmark/" title="Add to bookmark" class="mt-1">
                        <i class='bx bxs-bookmark-plus'></i>
                    </a>
                    {% else %}
                    <a href="add-bookmark/" title="Remove from bookmark" class="mt-1">
                        <i class='bx bxs-bookmark-minus'></i>
                    </a>
                    {% endif %}
                    {% endif %}
                </div>
            </div>






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

                {% for hl in page.highlights %}

                {% if hl.block_type == 'title' %}
                <h1 class="{{hl.value.alignment}} {{hl.value.size}} font-bold">{{hl.value.title}}</h1>
                {% elif hl.block_type == 'body' %}
                {% for block in hl.value %}

                {% for list in block.value.list %}
                <div class="border-l-4 border-[{{block.value.color}}] pl-2 my-1">
                    {{list}}
                </div>
                {% endfor %}

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

                {% endfor %}



                {% for block in page.body %}
                {% if block.block_type == 'section' %}
                {% for content in block.value.content %}

                {% if content.block_type == 'highlight_heading' %}
                <div>
                    <a href="#{{content.value.title|slugify}}"
                        class="font-semibold hover:font-bold border-l-4 border-[{{content.value.fg}}] pl-2 my-1 visited:text-purple-600">
                        {{content.value.title}}
                    </a>
                </div>

                {% endif %}
                {% endfor %}
                {% elif block.block_type == 'row' %}
                {% for content in block.value.content %}
                {% for content in content.value %}

                {% if content.block_type == 'highlight_heading' %}
                <div>
                    <a href="#{{content.value.title|slugify}}"
                        class="font-semibold hover:font-bold border-l-4 border-[{{content.value.fg}}] pl-2 my-1 visited:text-purple-600">
                        {{content.value.title}}
                    </a>
                </div>

                {% endif %}
                {% endfor %}
                {% endfor %}
                {% endif %}
                {% endfor %}








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

                {% if prodList %}
                <div class="my-2">

                    <table class="w-full table-fixed ">
                        <thead>
                            <tr>
                                <th class="w-36">.
                                </th>
                                {% for similar in prodList %}
                                <th class="px-4 shadow shadow-orange-100">
                                    <a href="{{similar.url}}">
                                        <div class="flex w-full justify-center">

                                            <img src="{{similar.search_image.file.url}}" alt="{{similar.title}}"
                                                class="w-60">
                                        </div>
                                        <h1 class="text-left text-sm opacity-80 font-normal line-clamp-3">
                                            {{similar.customTitle|safe}}
                                        </h1>
                                    </a>
                                </th>
                                {% endfor %}
                            </tr>

                        </thead>
                    </table>
                    <div class="overflow-y-auto h-60">
                        <table class="w-full table-fixed ">
                            <tbody class="text-sm">
                                <tr class="border border-gray-300 odd:bg-zinc-100 odd:shadow odd:shadow-orange-100">
                                    <th class="text-left px-2">Price</th>
                                    {% for similar in prodList %}
                                    <td class="px-4">
                                        <div class="flex items-center gap-6">

                                            <div>

                                                <b class="text-lg flex items-center">
                                                    {{ settings.core.CurrencySettings.icon|safe }}
                                                    {{similar.prodDealPrice}}
                                                </b>
                                                <h1 class="opacity-80 flex items-center">
                                                    M.R.P:
                                                    {{ settings.core.CurrencySettings.icon|safe }}

                                                    <span class="line-through">{{similar.prodMRP}}</span>
                                                </h1>
                                            </div>
                                            {% if similar.get_buy_now %}
                                            <a href="{{similar.get_buy_now}}"
                                                class="px-6 py-1 rounded-full bg-orange-400">Buy
                                                Now</a>
                                            {% endif %}
                                        </div>
                                    </td>
                                    {% endfor %}
                                </tr>
                                {% for attr in similarAttr %}
                                <tr
                                    class="[&>th]:py-1.5 border border-gray-300 even:bg-zinc-100 odd:shadow even:shadow-orange-100">
                                    <th class="text-left px-2">{{attr}}</th>
                                    {% for similar in prodList %}
                                    <td class="px-4">
                                        {% prod_var_av_compare similar.id attr as pav %}
                                        {% if pav.value_text %}
                                        {{pav.value_text}}
                                        {% else %}
                                        -
                                        {% endif %}

                                    </td>
                                    {% endfor %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>

                </div>
                {% endif %}


                {% 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 %}
                {% include 'components/common/comment.html' %}

            </div>






        </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>
                {% 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>
        </div>
    </div>

</section>


{% endblock content %}