{% extends "base.html" %}
{% load static %}

{% block title %}{{ publication.name }} | ArchDune{% endblock %}

{% block meta_description %}{{ publication.description|striptags|truncatechars:160 }}{% endblock %}
{% block meta_keywords %}publication, sketchbook, {{ publication.name }}, architecture{% endblock %}

{% block og_type %}article{% endblock %}
{% block og_title %}{{ publication.name }} | ArchDune{% endblock %}
{% block og_description %}{{ publication.description|striptags|truncatechars:200 }}{% endblock %}
{% block og_url %}{{ request.build_absolute_uri }}{% endblock %}
{% block og_image %}{{ publication.images.all.0.image.url }}{% endblock %}

{% block twitter_title %}{{ publication.name }} | ArchDune{% endblock %}
{% block twitter_description %}{{ publication.description|striptags|truncatechars:200 }}{% endblock %}
{% block twitter_image %}{{ publication.images.all.0.image.url }}{% endblock %}

{% block css %}

<link rel="stylesheet" id="astra-google-fonts-css"
    href="https://fonts.googleapis.com/css?family=Poppins%3A400%2C&#038;display=fallback&#038;ver=4.0.2" media="all" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<!--  -->
<link rel="stylesheet" id="google-fonts-1-css"
    href="https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CPoppins%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=auto&#038;ver=6.2"
    media="all" />

<!-- Local CSS Files -->

<link rel="stylesheet" href="{% static 'css/photography/photography.css' %}" />
<link rel="stylesheet" href="{% static 'css/utils/utils.css' %}" />
<link rel="stylesheet" href="{% static 'css/swiper/swiper-bundle.min.css' %}" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-autoplay.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-fullscreen.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-rotate.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-share.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-thumbnail.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-zoom.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-pager.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lg-comments.min.css" />

<!-- Local JavaScript Files -->
<script src="{% static 'script/swiper/swiper-bundle.min.js' %}" defer></script>
<script src="{% static 'script/swiper/autoplay-basic.js' %}" defer></script>
<script src="{% static 'script/lightgallery/lightGalleryFinal.js' %}" type="module" defer></script>
<script src="{% static 'script/lightgallery/showCloseIcon.js' %}" type="module" defer></script>
<script src="{% static 'script/book-landing-page-2/date-script.js' %}" defer></script>

{% endblock css %}

{% block content %}

<section class="px-1rem py-1rem">
    <div class="m-auto max-w-1200px">
        <div class="flex justify-between items-center">
            <div class="font-weight-400 text-1rem md-text-2-2rem my-1rem md-my-1-7rem">
                {{ publication.name }}
            </div>
            <div
                class="font-bold aktiv-grotesk-light preferred-date-color text-11px md-text-15px book-landing-page-2-date-1">
                {{ publication.created_at|date:"F d, Y" }}
            </div>
        </div>
        <hr />
        <div class="my-1rem md-my-2rem flex items-center justify-center flex-col">
            <div class="swiper mySwiper max-w-50rem w-full">
                <div class="swiper-wrapper" id="gallery">
                    {% for image in publication.images.all %}
                    <a class="card swiper-slide" data-lg-size="1600-1067" src="{{ image.image.url }}">
                        <img class="w-full card" src="{{ image.image.url }}"
                            alt="{{ publication.name }} image {{ forloop.counter }}" />
                    </a>
                    {% endfor %}
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="my-1rem aktiv-grotesk-light md-text-19px px-0-2rem max-w-50rem line-height-30px">
                {{ publication.description|safe }}
            </div>
            <div
                class="my-1rem font-weight-400 aktiv-grotesk-light md-text-19px px-0-2rem max-w-50rem line-height-30px">
                {{ publication.notes }}
            </div>

            {% if publication.design_team %}
            <div
                class="my-1rem aktiv-grotesk-light font-weight-400 md-text-19px px-0-2rem max-w-50rem line-height-16px w-full">
                <span class="font-weight-700 aktiv-grotesk-regular">Design Team:</span>
                {{ publication.design_team }}
            </div>
            {% endif %}

            {% if publication.photographers %}
            <div
                class="my-0-5rem aktiv-grotesk-light font-weight-400 md-text-19px px-0-2rem max-w-50rem line-height-16px w-full">
                <span class="font-weight-700 aktiv-grotesk-regular">Photographs:</span>
                {{ publication.photographers }}
            </div>
            {% endif %}

            <div
                class="my-1rem aktiv-grotesk-light font-weight-400 md-text-19px px-0-2rem max-w-50rem line-height-16px w-full">
                <span class="font-weight-700 aktiv-grotesk-regular">Price:</span>
                {{ publication.price }} Taka [Single Sketchbook]
            </div>
        </div>

        <!-- Social Media -->
            <div class="my-2rem">
                <div class="font-weight-400 color-singapore-title">Share</div>
                <div class="m-top-1rem">
                    <div class="flex gap-0-5rem">
                        <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}"
                            class="black-and-white hover-colorful transition-all-0-5s">
                            <img class="w-2rem facebook-border rounded-full p-2px cursor-pointer"
                                src="{% static 'images/icons/facebook.svg' %}" alt="Share on Facebook" />
                        </a>
                        <a target="_blank"
                            href="https://twitter.com/intent/tweet?url={{ request.build_absolute_uri }}&text={{ publication.name|urlencode }}"
                            class="black-and-white hover-colorful transition-all-0-5s">
                            <img class="w-2rem twitter-border rounded-full p-2px cursor-pointer"
                                src="{% static 'images/icons/twitter.svg' %}" alt="Share on Twitter" />
                        </a>
                        <a target="_blank"
                            href="https://www.linkedin.com/shareArticle?mini=true&url={{ request.build_absolute_uri }}&title={{ publication.name|urlencode }}"
                            class="black-and-white hover-colorful transition-all-0-5s">
                            <img class="w-2rem linkedin-border rounded-full p-2px cursor-pointer"
                                src="{% static 'images/icons/linkedin.svg' %}" alt="Share on LinkedIn" />
                        </a>
                        <a target="_blank"
                            href="https://pinterest.com/pin/create/button/?url={{ request.build_absolute_uri }}&media={{ publication.images.first.image.url }}&description={{ publication.name|urlencode }}"
                            class="black-and-white hover-colorful transition-all-0-5s">
                            <img class="w-2rem pinterest-border rounded-full p-2px cursor-pointer"
                                src="{% static 'images/icons/pinterest.svg' %}" alt="Share on Pinterest" />
                        </a>
                    </div>
                </div>
            </div>
        <hr />

        <!-- DELIVERY SECTION -->
        {% if delivery_info %}
        <div class="my-3rem mb-2rem">
            <div class="font-weight-500 text-1rem md-text-2-2rem md-my-1-7rem">
                Delivery Info
            </div>
            <div class="my-3rem">
                <div class="flex items-center justify-center">
                    <img src="{% static 'images/icons/delivery-man.png' %}" alt=""
                        class="w-7rem md-w-11rem black-and-white hover-colorful transition-all-0-5s" />
                </div>
            </div>
            <div>
                <ul class="grid md-grid-cols-2 gap-2rem">
                    <li>
                        <div class="font-weight-400 aktiv-grotesk-light md-text-19px line-height-27px my-5px">
                            <span class="aktiv-grotesk-light font-bold">Delivery Charge:</span>
                            {{ delivery_info.delivery_charge }}
                        </div>
                    </li>
                    <li>
                        <div class="aktiv-grotesk-light md-text-19px line-height-27px my-5px">
                            <span class="aktiv-grotesk-light font-bold">Delivery Time:</span>
                            {{ delivery_info.delivery_time }}
                        </div>
                    </li>
                    <li>
                        <div class="aktiv-grotesk-light md-text-19px line-height-27px my-5px">
                            <span class="aktiv-grotesk-light font-bold">Payment:</span>
                            {{ delivery_info.payment_methods }}
                        </div>
                    </li>
                    <li>
                        <div class="font-weight-400 md-text-19px line-height-27px my-5px aktiv-grotesk-light">
                            <span class="aktiv-grotesk-light font-bold">Home Delivery:</span>
                            {{ delivery_info.delivery_type }}
                        </div>
                    </li>
                </ul>
                <div class="my-3rem">
                    <div class="aktiv-grotesk-light md-text-19px">
                        Note: {{ delivery_info.notes }}
                    </div>
                </div>

                <!-- Pagination buttons -->
                <div class="m-top-2rem">
                    <div class="flex items-center justify-center">
                        {% if previous_publication %}
                        <button
                            onclick="window.location.href='{% url 'publicationapp:publication_detail' previous_publication.slug %}'"
                            class="py-0-3rem px-1rem opacity-50 cursor-pointer hover:opacity-100 transition-all duration-300">
                            <img src="{% static 'images/icons/left-arrow.png' %}" alt="Previous" class="w-0-8rem" />
                        </button>
                        {% else %}
                        <button disabled class="py-0-3rem px-1rem opacity-50 cursor-not-allowed">
                            <img src="{% static 'images/icons/left-arrow.png' %}" alt="No Previous" class="w-0-8rem" />
                        </button>
                        {% endif %}

                        {% if next_publication %}
                        <button
                            onclick="window.location.href='{% url 'publicationapp:publication_detail' next_publication.slug %}'"
                            class="py-0-3rem px-1rem opacity-50 cursor-pointer hover:opacity-100 transition-all duration-300">
                            <img src="{% static 'images/icons/right-arrow.png' %}" alt="Next" class="w-0-8rem" />
                        </button>
                        {% else %}
                        <button disabled class="py-0-3rem px-1rem opacity-50 cursor-not-allowed">
                            <img src="{% static 'images/icons/right-arrow.png' %}" alt="No Next" class="w-0-8rem" />
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</section>

{% endblock content %}

{% block page_js %}

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<script src="{% static 'js/home/script.js' %}"></script>
<script src="{% static 'script/home/nav.js' %}"></script>
<script src="{% static 'script/photography/photography.js' %}"></script>
<script>
    const gallery = document.getElementById("gallery");
    lightGallery(gallery, {
        controls: true,
        counter: true,
        download: true,
        plugins: [
            lgAutoplay,
            //   lgRotate,
            lgZoom,
            lgShare,
            lgFullscreen,
            lgThumbnail,
            lgComment,
            lgRelativeCaption,
        ],
    });
</script>

{% endblock %}