{% extends "base.html" %}
{% load wagtailimages_tags %}
{% load cms_tags %}
{% load blog_tags %}

{% block title %}
{{page.seo_title}}
{% endblock %}

{% block extra_css %}
<script src="https://unpkg.com/alpinejs" defer></script>
<script src="https://unpkg.com/htmx.org@2.0.0/dist/htmx.js"
    integrity="sha384-Xh+GLLi0SMFPwtHQjT72aPG19QvKB8grnyRbYBNIdHWc2NkCrz65jlU7YrzO6qRp"
    crossorigin="anonymous"></script>
<style>
    .mySlides {
        display: none;
        /* height: 40rem; */
    }

    img {
        vertical-align: middle;
        /* height: 40rem; */
    }

    /* Slideshow container */


    /* Caption text */
    .text {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 2px;
        position: absolute;
        top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .active {
        background-color: #717171;
    }

    /* Fading animation */
    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @keyframes fade {
        from {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
        .text {
            font-size: 11px
        }
    }
</style>
<style>
    html,
    body {
        scroll-behavior: smooth;
        line-height: 1.6;
    }

    /* margin-top: 10px; */
    /* margin-bottom: 5px; */

    .toolbar {
        background-color: #FFFFFF;
        color: #000000;
    }

    [x-cloak] {
        display: none;
    }
</style>


<style>
    nav {
        position: fixed;
        right: 20px;
        top: 20px;
    }

    div {
        height: 2000px;
    }

    div>h1 {
        height: 200px;
    }

    .active {
        color: red;
    }
</style>

{% endblock %}

{% block content %}
{% blog_comment_approved page.slug as app_commList %}

<div x-data="scrollProgress()" x-init="init()" x-cloak class="fixed inset-x-0 z-50">
    <div class="h-1 bg-blue-500" :style="`width: ${percent}%`"></div>
</div>
<div class="bg-gray-100 pb-10 min-h-screen">

    <!-- Banner -->
    <section class="relative">

        {% for block in page.blPoBanner %}
        {% if block.block_type == 'banner' %}

        <div class="z-0">
            {% for content in block.value.content %}
            <div class="mySlides fade">
                <!-- <div class="numbertext pt-10">{{forloop.counter}} / {{block.value.content|length}}</div> -->
                {% srcset_image content.value.image width-600 class="w-[100%] h-[25rem]" %}
                <!-- <img src="{{thumbnail.file.url}}" srcset="{{ thumbnail.srcset }}" alt="{{content.value.image.title}}"
                class="w-[100%] h-auto" loading="lazy" /> -->
            </div>
            {% endfor %}
        </div>
        <div style="text-align:center" class="-mt-6 z-50">
            {% for content in block.value.content %}

            <span class="dot"></span>
            {% endfor %}

        </div>

        {% endif %}
        {% endfor %}
    </section>


    <div class="absolute relative flex w-full bg-gray-100">

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

            {% if page.blPoTitleTemplate == 'Multi Row' %}
            {% include 'components/blogs/mRowTitle.html' with page=page %}
            {% else %}
            {% include 'components/blogs/sRowTitle.html' with page=page comment=app_commList %}
            {% endif %}



            <div class="bg-white pt-2 container mx-auto ">


                <!-- Tags -->
                <div>
                    {% for tag in page.tags.all %}
                    <a href="{{page.get_parent.url}}tag/{{tag.slug}}/"
                        class="bg-[{{tag.bgColor}}] px-2 py-0.5 rounded text-[{{tag.fgColor}}] text-lg">#{{tag.name}}</a>
                    {% endfor %}
                </div>
                <!-- Like & Bookmark -->
                <div class="flex gap-4 items-center">
                    <!-- <form action="{{page.url}}" method="POST" role="form">
                    {% csrf_token %}
                    <input type="hidden" name="like" value="true">
                    <button type="submit" class="text-3xl flex items-center">
                        {{page.blPoLikeCount}}
                        <i class='bx bxs-heart'></i>
                    </button>
                </form> -->

                </div>


                <!-- {{page.blCategory|length}} -->
                {% for block in page.body %}
                <div>

                    {% if block.block_type == 'section' %}
                    {% include 'Components/BlogPageBlocks/sectionBlock.html' %}

                    {% elif block.block_type == 'row' %}
                    {% include 'Components/BlogPageBlocks/rowBlock.html' %}

                    {% else %}
                    <div>

                        <h1>

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


                <!-- Comparision -->
                {% if page.products %}
                <div class="bg-white container mx-auto">
                    <h1 class="text-2xl text-orange-400">Comparision</h1>
                    <table class="w-full">
                        <tr class="bg-orange-500 text-left [&>th]:border">
                            <th>Product</th>
                            <th>Brand</th>
                            <th>Technology</th>
                            <th>Support</th>
                            <th>Users</th>
                        </tr>
                        {% for prod in page.products %}
                        <tr class="odd:bg-orange-300 [&>td]:border">
                            <td>
                                {{prod.value.coProdName}}
                            </td>
                            <td>{{prod.value.coProdBrand}}</td>
                            <td>{{prod.value.coProdTechStack}}</td>
                            <td>{% if prod.value.coSupport %}{{prod.value.coSupport}}{% endif %}</td>
                            <td>{% if prod.value.coUsers %}{{prod.value.coUsers}}{% endif %}</td>
                        </tr>
                        {% endfor %}
                    </table>

                </div>
                {% endif %}

                <div class="bg-white container mx-auto">
                    <hr class="h-0.5 bg-gray-400" />

                    <div class=" py-4 flex items-center justify-center gap-2">

                        {% 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-xl text-orange-400'></i>
                            <b> Web Story </b>
                        </a>
                        {% endif %}

                        |
                        <b class="text-gray-900">Share on :</b>

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

                    <hr />


                </div>

                <!-- Comments Section -->

                {% if app_commList.count > 0 %}
                <section class="container mx-auto h-96 overflow-auto">
                    <h1 class="text-2xl text-orange-400">{{app_commList.count}} Comments</h1>

                    {% for comment in app_commList %}

                    {% include 'components/blogs/comments.html' with comment=comment %}

                    {% endfor %}

                </section>
                {% endif %}

                <form action="/blog-comment/" method="post" class="container mt-4">
                    <h1 class="text-2xl text-orange-400 mb-4">Write a comment</h1>

                    {% csrf_token %}
                    <input type="number" name="blog" value="{{page.id}}" hidden>

                    <div class="flex grid grid-cols-2 gap-2 mb-2">

                        <input type="text" name="name" id="" class="w-full rounded" placeholder="Name">
                        <input type="email" name="email" id="" class="w-full rounded" placeholder="Email">
                    </div>
                    <input type="text" name="title" id="" class="w-full rounded mb-2" placeholder="Title">

                    <textarea name="comment" id="" class="rounded w-full h-20 p-1" placeholder="Write comment here ...">

                </textarea>
                    <div class="flex justify-center">
                        {% if user.is_authenticated %}

                        <button type="submit" class="bg-orange-400 text-xl rounded px-2 py-1 mt-2">Submit</button>
                        {% else %}
                        <a href="/login/?next={{page.url}}" class="bg-orange-400 rounded px-2 py-1 text-xl">Login To
                            Comment</a>
                        {% endif %}
                    </div>

                </form>
            </div>


            
            
        </div>
        <div class="w-[30%] px-2">

            <div class="bg-white rounded-xl shadow-xl px-6 py-8 mt-2">

                <form action="" method="get" class="flex w-full items-center">
                    <input type="text" name="q" id="" class="rounded p-1 w-[100%] h-12 text-lg"
                        placeholder="Search ..." />
                    <!-- <button type="submit" class="text-3xl">
                    <i class='bx bx-search-alt'></i>
                </button> -->
                </form>
            </div>

            <div class="mt-60 bg-white sticky top-20 rounded-xl shadow-xl px-3.5 pt-2 pb-4 ">
                <h1 class="font-bold text-2xl pb-2">Table Of Contents</h1>
                <hr class="w-full h-1 bg-gray-400" />

                {% for block in page.body %}
                <nav class="mt-2">

                    {% if block.block_type == 'section' %}
                    <ul class="flex w-full flex-col">
                        {% if block.value.title %}
                        <li>

                            <a href="#{{ block.value.title.split|join:" -"|lower }}" class="text-xl font-bold">
                                {{block.value.title}}
                            </a>
                        </li>
                        {% endif %}
                        {% for content in block.value.content %}
                        {% if content.block_type == 'heading' %}
                        <li>

                            <a href="#{{ content.value.title.split|join:" -"|lower }}"
                                class="text-lg {{content.value.alignment}} truncate ">
                                {{content.value.title}}

                            </a>
                        </li>
                        {% endif %}
                        {% endfor %}
                    </ul>
                    {% elif block.block_type == 'row' %}
                    <ul class="flex w-full flex-col">

                        {% if block.value.title %}
                        <li>

                            <a href="#{{ block.value.title.split|join:" -"|lower }}" class="text-xl font-bold">
                                {{block.value.title}}
                            </a>
                        </li>
                        {% endif %}

                        {% for block in block.value.content %}
                        <div class="w-full ">
                            {% for block in block.value %}
                            <div class="">

                                {% if block.block_type == 'heading' %}
                                <a href="#{{ block.value.title.split|join:" -"|lower }}"
                                    class="{{block.value.alignment}} text-lg">
                                    {{block.value.title}}
                                </a>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>


                        {% endfor %}
                    </ul>
                    {% endif %}
                </nav>
                {% endfor %}
            </div>
            <!-- Archives -->
            <div class="bg-white rounded-xl shadow-xl px-3.5 pt-2 pb-4 ">
                <h1 class="font-bold text-2xl">Archives</h1>
                <hr class="w-full h-1 bg-gray-400" />

                {% for month in page.archives %}
                <b>

                    {% ifchanged month.0 %} {{ month.0 }} ( {{month.4}} ) <br /> {% endifchanged %}
                </b>
                <a href="{{page.get_parent.url}}{{month.0}}/{{month.1}}/" class="pl-2"> {{ month.2 }} ( {{month.3}}
                    )
                </a> <br />
                {% endfor %}
            </div>
        </div>

       
        
        

        
        
        
    </div>
    <div class="absolute">
        {% if page.blog_reLinks.all %}

        {% if page.blPoRelatedTemplate == 'Img Two Column' %}
        {% include 'components/blogs/relImgTwoCol.html' with relList=page.blog_reLinks.all %}
        {% endif %}
        {% if page.blPoRelatedTemplate == 'Img One Column' %}
        {% include 'components/blogs/relImgOneCol.html' with relBlogList=page.blog_reLinks.all %}
        {% endif %}
        {% endif %}
    </div>


    <script>
        let slideIndex = 0;
        showSlides();

        function showSlides() {
            let i;
            let slides = document.getElementsByClassName("mySlides");
            let dots = document.getElementsByClassName("dot");
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) { slideIndex = 1 }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
            setTimeout(showSlides, 2000); // Change image every 2 seconds
        }
    </script>
    <script>
        const scrollProgress = () => {
            return {
                init() {
                    window.addEventListener('scroll', () => {
                        let winScroll = document.body.scrollTop || document.documentElement.scrollTop
                        let height = document.documentElement.scrollHeight - document.documentElement.clientHeight
                        this.percent = Math.round((winScroll / height) * 100)
                    })
                },
                circumference: 30 * 2 * Math.PI,
                percent: 0,
            }
        }
    </script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>

    <script>
        $(window).scroll(function () {
            var scrollTop = $(document).scrollTop();
            var anchors = $('body').find('h1');

            for (var i = 0; i < anchors.length; i++) {
                if (scrollTop > $(anchors[i]).offset().top - 50 && scrollTop < $(anchors[i]).offset().top + $(anchors[i]).height() - 50) {
                    $('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').addClass('active');
                } else {
                    $('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').removeClass('active');
                }
            }
        });
    </script>

    {% endblock %}