{% extends "base.html" %}
{% block title %}Gallery | Admin Portal{% endblock %}
{% block nav_gallery_admin %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-images me-2"></i>Gallery</h2>
        <p class="text-muted mb-0">Manage photos displayed on the public website gallery page</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{% url 'website:gallery' %}" target="_blank" class="btn btn-outline-secondary btn-sm">
            <i class="fa-solid fa-external-link-alt me-1"></i> View Public Gallery
        </a>
        <a href="{% url 'portal:gallery_add' %}" class="btn btn-primary">
            <i class="fa-solid fa-plus me-1"></i> Add Image
        </a>
    </div>
</div>

{% if gallery_images %}

<div class="row g-3">
    {% for img in gallery_images %}
    <div class="col-6 col-md-4 col-lg-3">
        <div class="portal-card h-100" style="overflow:hidden;">
            <!-- Thumbnail -->
            <div style="position:relative;aspect-ratio:4/3;overflow:hidden;background:#f0f2f5;">
                <img src="{{ img.image.url }}" alt="{{ img.title }}"
                     style="width:100%;height:100%;object-fit:cover;transition:transform 0.3s;"
                     onmouseover="this.style.transform='scale(1.05)'"
                     onmouseout="this.style.transform='scale(1)'">
                <!-- Published badge -->
                <span class="badge position-absolute top-0 start-0 m-2 {% if img.is_published %}bg-success{% else %}bg-secondary{% endif %}"
                      style="font-size:0.7rem;">
                    {% if img.is_published %}Published{% else %}Hidden{% endif %}
                </span>
                <!-- Category badge -->
                <span class="badge bg-warning text-dark position-absolute top-0 end-0 m-2"
                      style="font-size:0.68rem;">
                    {{ img.get_category_display }}
                </span>
            </div>

            <div class="portal-card-body py-2 px-3">
                <div class="fw-semibold small text-truncate" title="{{ img.title }}">{{ img.title }}</div>
                {% if img.description %}
                <div class="text-muted" style="font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
                     title="{{ img.description }}">{{ img.description }}</div>
                {% endif %}
                <div class="d-flex gap-1 mt-2">
                    <!-- Toggle published -->
                    <form method="post" action="{% url 'portal:gallery_toggle' img.pk %}" class="m-0">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-xs {% if img.is_published %}btn-outline-secondary{% else %}btn-outline-success{% endif %}"
                                title="{% if img.is_published %}Hide{% else %}Publish{% endif %}">
                            <i class="fa-solid {% if img.is_published %}fa-eye-slash{% else %}fa-eye{% endif %}"></i>
                        </button>
                    </form>
                    <a href="{% url 'portal:gallery_edit' img.pk %}" class="btn btn-xs btn-outline-primary" title="Edit">
                        <i class="fa-solid fa-pen"></i>
                    </a>
                    <form method="post" action="{% url 'portal:gallery_delete' img.pk %}" class="m-0"
                          onsubmit="return confirm('Delete \'{{ img.title|escapejs }}\'? This cannot be undone.');">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-xs btn-outline-danger" title="Delete">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% if is_paginated %}
<div class="d-flex justify-content-center mt-4">
    <nav>
        <ul class="pagination pagination-sm mb-0">
            {% if page_obj.has_previous %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a></li>
            {% endif %}
            <li class="page-item active"><span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span></li>
            {% if page_obj.has_next %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a></li>
            {% endif %}
        </ul>
    </nav>
</div>
{% endif %}

{% else %}
<div class="portal-card">
    <div class="portal-card-body text-center py-5">
        <i class="fa-solid fa-images fa-2x mb-3 d-block" style="color:var(--color-secondary);opacity:0.5;"></i>
        <h5 class="mb-2">No Gallery Images Yet</h5>
        <p class="text-muted mb-3">Add photos to showcase your training programmes and events on the public website.</p>
        <a href="{% url 'portal:gallery_add' %}" class="btn btn-primary">
            <i class="fa-solid fa-plus me-1"></i> Add First Image
        </a>
    </div>
</div>
{% endif %}
{% endblock %}