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

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

{% block hero_preload %}
<link rel="preload" as="image" href="{% static 'images/bali-11-640.webp' %}" type="image/webp" imagesrcset="{% static_webp_srcset 'images/bali-11.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/bali-11.jpg' %}" sizes="100vw">
            <img class="hero-slide-image" src="{% static 'images/bali-11.jpg' %}" alt="" aria-hidden="true" width="599" 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/Buthan-5.png' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/Buthan-5.png' %}" 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/kerala-6.jpg' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/kerala-6.jpg' %}" alt="" aria-hidden="true" width="695" 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">Destinations</span>
                <h1>Beautiful destinations for quick getaways and fuller holidays.</h1>
                <p class="hero-lead">Pick a place you love, and Aarya Holidays will help shape the route, cab plan, and travel rhythm.</p>
            </div>
        </div>
    </div>
</section>

<section class="section-pad">
    <div class="container">
        <div class="row g-4">
            {% for destination in destinations %}
                <div class="col-md-6 col-xl-3">
                    <article class="travel-card destination-list-card" id="{{ destination.slug }}">
                        {% travel_image destination as destination_image %}
                        <img src="{{ destination_image }}" alt="{{ destination.name }}" loading="lazy">
                        <div class="travel-card-body">
                            <h2>{{ destination.name }}</h2>
                            <p>{{ destination.description }}</p>
                            <a class="btn btn-primary btn-sm" href="{% url 'travel:contact' %}?requirement=destination">
                                <i data-lucide="send" aria-hidden="true"></i>
                                Enquire
                            </a>
                        </div>
                    </article>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="empty-state">Destinations will appear here after they are added from the admin panel.</div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}