{% extends 'base.html' %}
{% block title %}Gallery{% endblock %}

{% block content %}

<div class="container py-5">

    <h3 class="fw-bold text-success text-center mb-4">
        BUSA Gallery
    </h3>

    {% if images %}
        <div class="row g-4">

            {% for item in images %}
            <div class="col-md-4 col-sm-6">

                <div class="card shadow-sm border-0 h-100">

                    <img src="{{ item.image.url }}"
                         class="card-img-top"
                         style="height: 250px; object-fit: cover;">

                    <div class="card-body text-center">
                        <p class="mb-0 fw-semibold">
                            {{ item.caption }}
                        </p>
                    </div>

                </div>

            </div>
            {% endfor %}

        </div>
    {% else %}

        <div class="alert alert-info text-center">
            No gallery images available yet.
        </div>

    {% endif %}

</div>

{% endblock %}