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

{% block content %}

<div class="container py-5">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="fw-bold text-success mb-0">
            Manage Gallery
        </h3>

        <a href="{% url 'add_gallery' %}" class="btn btn-success">
            <i class="fas fa-plus me-1"></i>
            Add Image
        </a>
    </div>

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

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

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

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

                <div class="card-body text-center">

                    <p class="fw-semibold mb-3">
                        {{ item.caption }}
                    </p>

                    <div class="d-flex justify-content-center gap-2">

                        <a href="{% url 'edit_gallery' item.id %}"
                           class="btn btn-sm btn-outline-primary">
                            Edit
                        </a>

                        <form action="{% url 'delete_gallery' item.id %}"
                              method="post"
                              class="d-inline">
                            {% csrf_token %}
                            <button type="submit"
                                    class="btn btn-sm btn-outline-danger">
                                Delete
                            </button>
                        </form>

                    </div>

                </div>

            </div>

        </div>
        {% endfor %}

    </div>
    {% else %}
        <div class="alert alert-info">
            No gallery images uploaded yet.
        </div>
    {% endif %}

</div>

{% endblock %}