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

{% block content %}

<section class="container mx-auto 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.tutorial_social.all %}
            <a href="{{social.url}}" title="{{social.slp.title}}">
                {{social.slp.soLogoText|safe}}
            </a>
            {% endfor %}

        </div>

    </div>
    <div class="hidden md:block">

        <div class="flex items-center py-2 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.tutorial_social.all %}
            |
            <div class="flex items-center mt-1 gap-4">
                {% for social in page.tutorial_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>
    <div class="md:flex w-full gap-6 pb-10">

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

                <!-- <a href="#test">TEST TOC</a> -->

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

            {{page.shortDesc|add_list_classes}}


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

</section>


<!-- ======= 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" /> -->
                {% image_url news.search_image "width-230" as img %}
                <img src="{{img}}" alt="{{news.title}}" />

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

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


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

{% block script %}

<script>
    function progressBarScroll() {
        let winScroll = document.body.scrollTop || document.documentElement.scrollTop,
            height = document.documentElement.scrollHeight - document.documentElement.clientHeight,
            scrolled = (winScroll / height) * 100;
        document.getElementById("progressBar").style.width = scrolled + "%";
    }
    window.onscroll = function () {
        progressBarScroll();
    };

</script>

{% endblock script %}