{% load hitcount_tags %}

<div class="py-2 bg-white sticky top-16 z-40 container mx-auto shadow">


    {% if page.product %}

    <div class="flex items-center gap-1">

        <a href="{{page.get_parent.url}}category/{{page.product.coProdCat.catName.catSlug}}"
            class="bg-[{{page.product.coProdCat.catName.bgColor}}] text-[{{page.product.coProdCat.catName.fgColor}}] rounded px-1 py-0.5">

            {{page.product.coProdCat.catName}}
        </a>
        <hr class="h-1 bg-black w-3" />

        <a href="{{page.get_parent.url}}category/{{page.product.coProdCat.scSlug}}"
            class="bg-[{{page.product.coProdCat.bgColor}}] text-[{{page.product.coProdCat.fgColor}}] rounded px-1 py-0.5">

            {{page.product.coProdCat}}
        </a>
        <hr class="h-1 bg-black w-3" />
        <span>
            {{page.product}}

        </span>
    </div>
    {% endif %}

    <h1 class="text-gray-900 text-3xl text-center py-4">{{page.title}}</h1>

    <div class="flex items-center w-full justify-between">
        <div class="flex items-center gap-1">
            <div class="w-8 h-8  flex items-center">
                <!-- <i class='bx bxs-user-pin text-4xl'></i> -->
                {% if page.owner.avatar %}

                <img src="/media/{{page.owner.avatar}}" alt="{{page.owner}}" srcset="/media/{{page.owner.avatar}}"
                    class="rounded-full">
                {% else %}
                <i class='bx bxs-user-circle text-4xl'></i>
                {% endif %}
            </div>
            <b>Author:</b>
            <h1 class="capitalize">
                {{page.owner}}
            </h1>

        </div>

        <div>
            <div class="flex items-center gap-1">

                <div class="flex items-center gap-1">
                    <i class='bx bxs-calendar'></i>
                    {{page.first_published_at|date:'d M,Y'}}

                </div>
                |
                <div class="flex items-center gap-1">
                    <i class='bx bxs-stopwatch'></i>
                    {{page.blPoReadingTime}} minutes
                </div>
                |
                &#128065;
                {% get_hit_count for page %}
                |
                <form action="{{page.url}}" method="POST" role="form">
                    {% csrf_token %}
                    <input type="hidden" name="like" value="true">
                    <button type="submit" class="text-xl flex items-center">
                        {{page.blPoLikeCount}}
                        <i class='bx bxs-heart'></i>
                    </button>
                </form>

            </div>



            <div class="hidden flex w-full gap-4 items-center justify-end">
                {% if page.blogStory %}
                <a href="/story/{{page.slug}}" class="text-sm flex gap-1 items-center" title="Web Story">
                    <i class='bx bx-images text-2xl text-orange-400'></i>
                    <b>Web Story </b>
                </a>
                {% endif %}

                <div class="flex gap-3">

                    {% for social in page.blogSocial %}
                    {% if forloop.counter < 6 %} <a href="{{social.value.blsUrl}}" target="_blank"
                        class="text-2xl flex items-center border rounded border-black text-orange-400 border-orange-400">
                        {{social.value.slName.slpImgText |safe}}
                        </a>
                        {% endif %}
                        {% endfor %}


                </div>

            </div>

        </div>


    </div>




</div>