{% extends 'cPanel/base.html' %}
{% load cms_tags %}

{% block content %}
<main class="py-2 px-2 space-y-2 flex w-full">

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

        <div class="w-full mb-4 px-2 mr-6 text-white {% if enq.enqProduct %} bg-indigo-400 {% else %} bg-yellow-600 {% endif %}
        ">
            <h1 class="text-4xl font-semibold py-2">Blog Detail

            </h1>
            <!-- <h2 class="text-gray-600 ml-0.5">Mobile UX/UI Design course</h2> -->
        </div>


        <div class="pt-2 bg-white container mx-auto shadow">
            <h1 class="text-gray-900 text-3xl text-center py-4">{{blogObj.title}}</h1>

            <div class="flex w-full gap-2 items-center justify-center pb-1 text-sm">

                <h1 class="capitalize" title="Author">
                    <b>By</b>
                    {{blogObj.owner}}
                </h1>
                |
                <span title="Publish Date">
                    <b>Published On : </b>
                    {{blogObj.first_published_at|date:'d M,Y'}}
                </span>
                |
                <span title="Reading Time">
                    <b>Read Time :</b>
                    {{blogObj.blPoReadingTime}} mins
                </span>
                |
                {% if blogObj.product %}
                <a href="{% url 'blogs_cat_filter' %}?q={{blogObj.product.coProdCat.catName.catSlug}}" title="Category"
                    class="text-blue-800 hover:text-orange-400 hover:font-bold underline">

                    {{blogObj.product.coProdCat.catName}},
                </a>
                <a href="{% url 'blogs_cat_filter' %}?q={{blogObj.product.coProdCat.scSlug}}" title="Sub-Category"
                    class="text-blue-800 hover:text-orange-400 hover:font-bold underline">
                    {{blogObj.product.coProdCat}}
                </a>
                {% endif %}
                |
                {% if blogObj.blogStory %}
                <a href="/story/{{blogObj.slug}}" class="text-sm flex gap-1 items-center" title="Web Story">
                    <i class='bx bx-images text-xl text-orange-400'></i>
                    <b> Web Story </b>
                </a>
                {% endif %}

            </div>


        </div>
        <div>
            {{blogObj.shortDesc|safe}}
        </div>

        {% for block in blogObj.body %}
        <div>

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

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

            {% else %}
            <div>

                <h1>

                    {{block.block_type}}
                </h1>
            </div>
            {% endif %}
        </div>
        {% endfor %}



    </div>
    <div class="w-[30%] px-0.5 border-l-2 h-screen overflow-auto">
        <h1 class="text-xl font-bold">Comments</h1>
        {% for item in blogObj.blog_comments.all %}
        <div
            class="{% if enq.enqProduct %} even:bg-indigo-200 {% else %} even:bg-yellow-100 {% endif %} px-2 py-0.5 rounded border-b">
            <div class="flex justify-between items-center">

                <h1 class="font-bold">
                    <button onclick="openModal('modelConfirm{{forloop.counter}}')">
                        {{item.posted_by}}
                    </button>

                </h1>
                <span class="text-xs">
                    {{item.createdAt |date:'d M,y'}}
                </span>
            </div>
            {% if item.comment %}
            <h2 class="pl-2">
                <button onclick="openModal('modelConfirm{{forloop.counter}}')">

                    {{item.comment|safe|truncatewords:10}}
                </button>

                <div id="modelConfirm{{forloop.counter}}"
                    class="fixed hidden z-50 inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full px-4 ">
                    <div class="relative top-40 mx-auto shadow-xl rounded-md bg-main max-w-xl">

                        <div class="flex justify-end p-2">
                            <button onclick="closeModal('modelConfirm{{forloop.counter}}')" type="button"
                                class="text-white  hover:bg-white hover:text-red-500 rounded-lg font-bold p-1.5 ml-auto inline-flex items-center">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </button>
                        </div>

                        <div class="p-6 pt-0 text-justify">
                            <h1 class="flex justify-between mb-4">
                                <span>

                                    <b>Posted By : </b>

                                    {{item.posted_by}}
                                </span>

                                {{item.createdAt |date:'d M,Y'}}


                            </h1>
                            <p>
                                <b>Comment : </b>

                                {{item.comment|safe}}
                            </p>
                            <div class="flex justify-center">


                                <a href="#" onclick="closeModal('modelConfirm{{forloop.counter}}')"
                                    class="mt-6 text-blue-900 font-bold bg-white focus:ring-4 border border-gray-200 font-medium inline-flex items-center rounded-lg text-base px-3 py-2.5 text-center"
                                    data-modal-toggle="delete-user-modal">
                                    Okay
                                </a>
                            </div>
                        </div>

                    </div>
                </div>

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


    </div>



    <script type="text/javascript">
        window.openModal = function (modalId) {
            document.getElementById(modalId).style.display = 'block'
            document.getElementsByTagName('body')[0].classList.add('overflow-y-hidden')
        }

        window.closeModal = function (modalId) {
            document.getElementById(modalId).style.display = 'none'
            document.getElementsByTagName('body')[0].classList.remove('overflow-y-hidden')
        }

        // Close all modals when press ESC
        document.onkeydown = function (event) {
            event = event || window.event;
            if (event.keyCode === 27) {
                document.getElementsByTagName('body')[0].classList.remove('overflow-y-hidden')
                let modals = document.getElementsByClassName('modal');
                Array.prototype.slice.call(modals).forEach(i => {
                    i.style.display = 'none'
                })
            }
        };
    </script>
</main>
{% endblock content %}