{% extends "admin/change_list.html" %}
{% load i18n static %}
{% block result_list %}
    {% if cl.result_list %}
        <div class="card-grid">
            {% for result in cl.result_list %}
                <div class="image-card">
                    <figure class="image-card__figure">
                        {% if result.grid_image %}
                            <input type="checkbox"
                                   name="_selected_action"
                                   value="{{ result.pk }}"
                                   class="action-select image-card__control image-card__control--top-left image-card__checkbox"
                                   aria-label="{% translate 'Select item' %}" />
                            {% if cl.model_admin.grid_enable_delete %}
                                <a href="{% url 'admin:'|add:cl.opts.app_label|add:'_'|add:cl.opts.model_name|add:'_delete' result.pk %}"
                                   class="image-card__action image-card__action--overlay image-card__action--danger image-card__control image-card__control--top-right"
                                   title="{% translate 'Delete' %}">
                                    <svg width="16"
                                         height="16"
                                         viewBox="0 0 24 24"
                                         fill="none"
                                         stroke="currentColor"
                                         stroke-width="2"
                                         stroke-linecap="round"
                                         stroke-linejoin="round">
                                        <polyline points="3 6 5 6 21 6"></polyline>
                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                    </svg>
                                </a>
                            {% endif %}
                            {% if cl.model_admin.grid_edit_page %}
                                <a href="{% url 'admin:'|add:cl.opts.app_label|add:'_'|add:cl.opts.model_name|add:'_change' result.pk %}"
                                   class="image-card__link">
                                    <img class="image-card__img"
                                         src="{{ result.grid_image.url }}"
                                         alt="{{ result.grid_title }}" />
                                </a>
                            {% else %}
                                <img class="image-card__img"
                                     src="{{ result.grid_image.url }}"
                                     alt="{{ result.grid_title }}" />
                            {% endif %}
                            <span class="image-card__badge image-card__badge--bottom-left">{{ result.grid_image.size|filesizeformat }}</span>
                            <span class="image-card__badge image-card__badge--bottom-right">{{ result.grid_image.width }}x{{ result.grid_image.height }}</span>
                        {% endif %}
                    </figure>
                    <footer class="image-card__footer">
                        <div class="image-card__title-group">
                            <div class="image-card__title-display">
                                <span class="image-card__title" title="{{ result.grid_title }}">{{ result.grid_title }}</span>
                                {% if result.grid_form %}
                                    <button type="button"
                                            class="image-card__action image-card__action--edit"
                                            title="{% translate 'Edit title' %}">
                                        <svg width="12"
                                             height="12"
                                             viewBox="0 0 24 24"
                                             fill="none"
                                             stroke="currentColor"
                                             stroke-width="2"
                                             stroke-linecap="round"
                                             stroke-linejoin="round">
                                            <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                                        </svg>
                                    </button>
                                {% endif %}
                            </div>
                            {% if result.grid_form %}
                                <div class="image-card__title-edit">
                                    {% for hidden in result.grid_form.hidden_fields %}
                                        {{ hidden }}
                                    {% endfor %}
                                    {{ result.grid_title_input }}
                                    {% if result.grid_title_input.errors %}
                                        <div class="image-card__errors">{{ result.grid_title_input.errors }}</div>
                                    {% endif %}
                                    {% if result.grid_form.non_field_errors %}
                                        <div class="image-card__errors">{{ result.grid_form.non_field_errors }}</div>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </div>
                        {% if cl.model_admin.grid_enable_copy %}
                            <button type="button"
                                    class="image-card__action image-card__action--copy"
                                    aria-label="{% translate 'Copy URL' %}"
                                    data-url="{{ result.grid_abs_url }}">
                                <svg width="16"
                                     height="16"
                                     viewBox="0 0 24 24"
                                     fill="none"
                                     stroke="currentColor"
                                     stroke-width="2"
                                     stroke-linecap="round"
                                     stroke-linejoin="round">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                </svg>
                            </button>
                        {% endif %}
                    </footer>
                </div>
            {% endfor %}
        </div>
        {% if cl.formset and cl.result_count %}
            <div class="submit-row">
                <input type="submit"
                       name="_save"
                       class="default"
                       value="{% translate 'Save' %}">
            </div>
        {% endif %}
    {% endif %}
{% endblock %}