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

{% block content %}
    <h2><i class="fa-regular fa-images"></i> Manage Images</h2>
    <div class="card-deck">
        <div class="card bg-light mb-3">
            <div class="card-body">
                <h5 class="card-title">Options</h5>
                <div class="list-group">
                    <a href="{% url 'ndr_core:create_image' %}" class="list-group-item list-group-item-action py-2">
                        <i class="fa-regular fa-file-import"></i>
                        Upload Image
                    </a>
                    <a href="{% url 'ndr_core:help_chapter' 'images' %}" class="list-group-item list-group-item-action py-2">
                        <i class="fa-regular fa-circle-info"></i>
                        Help
                    </a>
                </div>
            </div>
        </div>

        <div class="card bg-light mb-3">
            <div class="card-body">
                <h5 class="card-title">Image Groups</h5>
                <ul class="list-group">
                    {% for group in groups %}
                        <li class="list-group-item list-group-item-action d-flex py-2{% if request.resolver_match.kwargs.group == group.name %} bg-selected {% endif%}">
                            <p class="p-0 m-0 flex-grow-1">
                                <i class="fa-regular fa-image"></i>
                                <a href="{% url 'ndr_core:view_images' group.name %}">{{ group.label }}</a><br/>
                                <small>{{ group.help_text }}</small>
                            </p>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    {% if images is not None %}
       <div class="card bg-light mb-3">
            <div class="card-body">
                <h5 class="card-title">{{ title }}</h5>
                {% if images|length == 0 %}
                    <div class="alert alert-info small" role="alert">
                        <i class="fa-regular fa-circle-info"></i>
                        There are no images in this group. Choose 'Upload Image' to create one.
                    </div>
                {% else %}
                    <div class="container">
                        {% for image in images %}
                            {% if forloop.counter0|divisibleby:4 %}
                                <div class="row">
                            {% endif %}

                            <div class="col-3 border">
                                {% if image.title %}
                                    {{ image.title }}<br/>
                                {% else %}
                                    <i>No Title</i><br/>
                                {% endif %}
                                <img src="{{ image.image.url }}" class="img-thumbnail" /><br/>
                                {% if image.caption %}
                                    <small>{{ image.caption }}</small><br/>
                                {% else %}
                                    <small><i>No caption</i></small><br/>
                                {% endif %}
                                {% if image.image_group == "figures" %}
                                    <small>To display this image, use this code in your page text: <code>[[figure|{{ image.pk }}]]</code></small><br/>
                                {% endif %}
                                <p class="p-0 m-0">
                                    <div style="white-space: nowrap;">
                                        {% if not forloop.first %}
                                            <a href="{% url 'ndr_core:move_image_up' image.pk %}" class="btn btn-sm btn-secondary">
                                                <i class="fa-regular fa-arrow-left"></i>
                                            </a>
                                        {% endif %}
                                        <a href="{% url 'ndr_core:edit_image' image.pk %}" class="btn btn-sm btn-secondary">
                                            <i class="fa-regular fa-pen-to-square"></i>
                                        </a>
                                        <a href="{% url 'ndr_core:delete_image' image.pk %}" class="btn btn-sm btn-danger">
                                            <i class="fa-regular fa-delete-left"></i>
                                        </a>
                                     </div>
                                </p>
                            </div>

                            {% if forloop.counter0|modulo:4 == 3 %}
                                </div>
                            {% endif %}
                        {% endfor %}
                        {% if images|length|modulo:4 != 0 %}
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    {% endif %}

    <div class="alert alert-info small" role="alert">
        <i class="fa-regular fa-circle-info"></i>
    </div>

{% endblock %}