{% 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._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' %}" />
                            <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>
                            {% if cl.model_admin.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._image.url }}"
                                         alt="{{ result._name }}" />
                                </a>
                            {% else %}
                                <img class="image-card__img"
                                     src="{{ result._image.url }}"
                                     alt="{{ result._name }}" />
                            {% endif %}
                            <span class="image-card__badge image-card__badge--bottom-left">{{ result._image.size|filesizeformat }}</span>
                            <span class="image-card__badge image-card__badge--bottom-right">{{ result._image.width }}x{{ result._image.height }}</span>
                        {% endif %}
                    </figure>
                    <footer class="image-card__footer">
                        <div class="image-card__name-group">
                            <div class="image-card__name-display">
                                <span class="image-card__title" title="{{ result._name }}">{{ result._name }}</span>
                                <button type="button"
                                        class="image-card__action image-card__action--edit"
                                        title="{% translate 'Edit name' %}">
                                    <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>
                            </div>
                            <div class="image-card__name-edit">
                                <input type="hidden"
                                       name="form-{{ forloop.counter0 }}-id"
                                       value="{{ result.pk }}" />
                                <input type="text"
                                       name="form-{{ forloop.counter0 }}-{{ result._name_field }}"
                                       value="{{ result._name }}"
                                       class="image-card__input"
                                       required
                                       aria-label="{% translate 'Edit name' %}" />
                            </div>
                        </div>
                        <button type="button"
                                class="image-card__action image-card__action--copy"
                                aria-label="{% translate 'Copy URL' %}"
                                data-url="{{ result._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>
                    </footer>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}