{% extends "base.html" %}

{% block title %}{{ album.title }} | Gallery | Aarya Holidays & Cabs{% endblock %}

{% block hero_preload %}
<link rel="preload" as="image" href="{{ album.cover.url }}" fetchpriority="high">
{% endblock %}

{% block content %}
<section class="page-hero compact-hero gallery-album-hero">
    <div class="page-hero-media">
        <img class="page-hero-image" src="{{ album.cover.url }}" alt="" aria-hidden="true" width="1600" height="900" loading="eager" fetchpriority="high" decoding="async">
    </div>
    <div class="container">
        <span class="eyebrow">Gallery Album</span>
        <h1>{{ album.title }}</h1>
        <p>A dedicated destination lookbook from the Aarya Holidays travel library.</p>
        <a class="btn btn-light btn-lg" href="{% url 'travel:gallery' %}">
            <i data-lucide="arrow-left" aria-hidden="true"></i>
            Back to Gallery
        </a>
    </div>
</section>

<section class="section-pad gallery-detail-band">
    <div class="container">
        <div class="gallery-detail-layout">
            <aside class="gallery-detail-sidebar">
                <span class="eyebrow">Collection</span>
                <h2>{{ album.title }}</h2>
                <p>Open any scene for a larger view in a new tab.</p>
                <a class="btn btn-primary" href="{% url 'travel:contact' %}?requirement=destination">
                    <i data-lucide="send" aria-hidden="true"></i>
                    Enquire
                </a>
            </aside>

            <div class="gallery-photo-wall">
                {% for image in album.images %}
                    <a class="gallery-photo-card" href="{{ image.url }}" data-gallery-lightbox data-gallery-title="{{ image.title }}" data-gallery-alt="{{ image.alt }}" aria-label="{{ image.title }} image {{ forloop.counter }}">
                        <img src="{{ image.url }}" alt="{{ image.alt }}" loading="lazy" width="1600" height="1200">
                    </a>
                {% endfor %}
            </div>
        </div>

        {% if other_albums %}
            <div class="related-gallery-strip">
                <div class="section-heading">
                    <span class="eyebrow">More Albums</span>
                    <h2>Explore another location.</h2>
                </div>
                <div class="related-gallery-grid">
                    {% for group in other_albums|slice:":6" %}
                        <a class="related-gallery-card" href="{% url 'travel:gallery_album' group.slug %}">
                            <img src="{{ group.cover.url }}" alt="{{ group.title }} cover image" loading="lazy" width="1200" height="900">
                            <span>{{ group.title }}</span>
                        </a>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
</section>

<div class="modal fade gallery-lightbox-modal" id="galleryLightbox" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <button type="button" class="btn-close gallery-lightbox-close" data-bs-dismiss="modal" aria-label="Close"></button>
            <img src="" alt="" data-gallery-lightbox-image>
            <div class="gallery-lightbox-caption" data-gallery-lightbox-caption></div>
        </div>
    </div>
</div>
{% endblock %}