{% extends 'ndr_core/admin_views/base.html' %}
{% load static %}

{% block content %}
    <h2><i class="fa-regular fa-images"></i> Image Library</h2>

    <!-- Options Bar -->
    <div class="d-flex flex-wrap align-items-center bg-light border rounded p-2 mb-3">
        <div class="me-auto">
            <a href="{% url 'ndr_core:create_image' %}" class="btn btn-sm btn-primary m-1">
                <i class="fa-regular fa-upload"></i> Upload Image
            </a>
        </div>
        <div>
            <span class="me-2 text-muted">{{ images|length }} image{{ images|length|pluralize }} in library</span>
            <a href="{% url 'ndr_core:help_chapter' 'images' %}" class="btn btn-sm btn-outline-secondary m-1">
                <i class="fa-regular fa-circle-info"></i> Help
            </a>
        </div>
    </div>

    <div class="card bg-light mb-3">
        <div class="card-body">
            {% if images|length == 0 %}
                <div class="text-center py-5">
                    <i class="fa-regular fa-images fa-3x text-muted mb-3"></i>
                    <h5>No Images Yet</h5>
                    <p class="text-muted">Upload your first image to get started.</p>
                    <a href="{% url 'ndr_core:create_image' %}" class="btn btn-primary">
                        <i class="fa-regular fa-upload"></i> Upload Image
                    </a>
                </div>
            {% else %}
                <div class="row">
                    {% for image in images %}
                        <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-4">
                            <div class="card h-100">
                                <div class="position-relative">
                                    <img src="{{ image.image.url }}"
                                         class="card-img-top"
                                         alt="{{ image.alt_text|default:'Image' }}"
                                         style="height: 150px; object-fit: cover;">
                                    {% if not image.image_active %}
                                        <span class="badge badge-warning position-absolute" style="top: 5px; right: 5px;">Inactive</span>
                                    {% endif %}
                                </div>
                                <div class="card-body p-2">
                                    <p class="card-text small text-truncate mb-2" title="{{ image.alt_text }}">
                                        {% if image.alt_text %}
                                            {{ image.alt_text }}
                                        {% else %}
                                            <span class="text-muted">No alt text</span>
                                        {% endif %}
                                    </p>
                                    <small class="text-muted d-block mb-2">ID: {{ image.pk }}</small>
                                    <div class="btn-group btn-group-sm d-flex" role="group">
                                        <a href="{% url 'ndr_core:edit_image' image.pk %}"
                                           class="btn btn-secondary flex-fill"
                                           title="Edit">
                                            <i class="fa-regular fa-pen-to-square"></i>
                                        </a>
                                        <a href="{% url 'ndr_core:delete_image' image.pk %}"
                                           class="btn btn-danger flex-fill"
                                           title="Delete">
                                            <i class="fa-regular fa-trash"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>

    <div class="alert alert-info small" role="alert">
        <i class="fa-regular fa-circle-info"></i>
        <strong>Image Library:</strong> Upload images here and use them in UI Elements (carousels, slideshows, people cards, etc.).
        Add contextual information (title, caption, citation) when creating the UI Element, not the image itself.
    </div>

{% endblock %}MyL0veIsSille