{% extends 'main/base.html' %}
{% block title %}Photo Gallery - Monaco Institute{% endblock %}

{% block content %}
<section class="page-banner">
    <div class="container">
        <h1>Photo Gallery</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-custom">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="breadcrumb-item active">Gallery</li>
            </ol>
        </nav>
    </div>
</section>

{% if categories %}
<section class="py-3 bg-light">
    <div class="container">
        <div class="d-flex flex-wrap gap-2 py-2">
            <a href="{% url 'gallery' %}" class="btn btn-sm {% if not selected_category %}btn-primary{% else %}btn-outline-primary{% endif %}">All</a>
            {% for cat in categories %}
            {% if cat %}<a href="{% url 'gallery' %}?category={{ cat }}" class="btn btn-sm {% if selected_category == cat %}btn-primary{% else %}btn-outline-primary{% endif %}">{{ cat }}</a>{% endif %}
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<section class="py-5">
    <div class="container">
        <div class="row g-3">
            {% for img in images %}
            <div class="col-lg-3 col-md-4 col-6" data-aos="fade-up">
                <div class="gallery-item">
                    <img src="{{ img.image.url }}" alt="{{ img.title }}">
                    <div class="gallery-overlay">
                        <i class="fas fa-search-plus"></i>
                    </div>
                </div>
                <p class="text-center small mt-2 text-muted">{{ img.title }}</p>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <i class="fas fa-images fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">No gallery images yet.</h4>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}