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

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

{% block hero_preload %}
<link rel="preload" as="image" href="{% static 'images/kerala-6-640.webp' %}" type="image/webp" imagesrcset="{% static_webp_srcset 'images/kerala-6.jpg' %}" imagesizes="100vw" fetchpriority="high">
{% endblock %}

{% block content %}
<section class="hero-section hero-slider-section" data-hero-slider>
    <div class="hero-slide is-active">
        <picture>
            <source type="image/webp" srcset="{% static_webp_srcset 'images/kerala-6.jpg' %}" sizes="100vw">
            <img class="hero-slide-image" src="{% static 'images/kerala-6.jpg' %}" alt="" aria-hidden="true" width="695" height="900" loading="eager" fetchpriority="high" decoding="async">
        </picture>
    </div>
    <div class="hero-slide">
        <picture>
            <source type="image/webp" data-lazy-srcset="{% static_webp_srcset 'images/kashmir-6.jpg' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/kashmir-6.jpg' %}" alt="" aria-hidden="true" width="1359" height="900" decoding="async">
        </picture>
    </div>
    <div class="hero-slide">
        <picture>
            <source type="image/webp" data-lazy-srcset="{% static_webp_srcset 'images/singapore-10.jpg' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/singapore-10.jpg' %}" alt="" aria-hidden="true" width="1350" height="900" decoding="async">
        </picture>
    </div>
    <div class="hero-slide">
        <picture>
            <source type="image/webp" data-lazy-srcset="{% static_webp_srcset 'images/andaman-6.png' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/andaman-6.png' %}" alt="" aria-hidden="true" width="1350" height="900" decoding="async">
        </picture>
    </div>
    <div class="hero-shade"></div>
    <div class="container position-relative">
        <div class="row align-items-center min-vh-hero">
            <div class="col-lg-8">
                <span class="eyebrow">Gallery</span>
                <h1>Destination collections from the Aarya Holidays travel library.</h1>
                <p class="hero-lead">Choose a location to open a dedicated page with the complete visual story for that place.</p>
            </div>
        </div>
    </div>
</section>

<section class="section-pad gallery-page-band gallery-studio">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">Travel Albums</span>
                <h2>Explore by destination.</h2>
            </div>
            <p class="gallery-note">Each collection opens as its own polished destination page.</p>
        </div>

        {% if static_gallery_groups %}
            <div class="gallery-location-grid" aria-label="Destination gallery albums">
                {% for group in static_gallery_groups %}
                    {% if group.location_key != "cab services" %}
                        <a class="gallery-location-card" href="{% url 'travel:gallery_album' group.slug %}" aria-label="Open {{ group.title }}">
                            <img src="{{ group.cover.url }}" alt="{{ group.title }} cover image" loading="lazy" width="1400" height="1050">
                            <span class="gallery-location-meta">
                                <strong>{{ group.title }}</strong>
                                <small>Open Collection</small>
                            </span>
                        </a>
                    {% endif %}
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-state">Gallery albums will appear here after images are added to the website image folder.</div>
        {% endif %}
    </div>
</section>
{% endblock %}