{% load i18n %}

<!-- Collections Grid — Apple cover cards -->
<div class="collection-grid">
    {% for collection in collections %}
        <div class="collection-card" role="group">
            <a href="{% url 'collection-detail' collection.pk %}" class="block" aria-label="{{ collection.name }}">
                <div class="cover-wrap">
                    {% with images=collection.images.all|slice:":1" %}
                        {% for image in images %}
                            <img class="cover-img" src="{{ image.get_thumbnail_url }}"
                                 alt="{{ collection.name }}" loading="lazy" decoding="async">
                        {% empty %}
                            <div class="cover-empty">
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21zm10.5-11.25h.008v.008h-.008v-.008z"/>
                                </svg>
                                <span>{% trans "No images yet" %}</span>
                            </div>
                        {% endfor %}
                    {% endwith %}
                    <div class="cover-scrim"></div>
                    <div class="cover-badge">
                        <span class="cover-count">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v9a2.25 2.25 0 002.25 2.25h10.5A2.25 2.25 0 0019.5 18V9a2.25 2.25 0 00-2.25-2.25"/>
                            </svg>
                            {{ collection.images.count }}
                        </span>
                    </div>
                </div>
                <div class="card-body">
                    <h3 class="card-title">{{ collection.name }}</h3>
                    {% if collection.description %}
                        <p class="card-desc">{{ collection.description }}</p>
                    {% else %}
                        <p class="card-desc">&nbsp;</p>
                    {% endif %}
                    <div class="card-footer">
                        <span class="card-updated">{{ collection.created_at|date:"Y-m-d" }}</span>
                        <span class="apple-link" style="color: var(--apple-blue); font-size: 0.82rem; font-weight: 600;">
                            {% trans "Open" %} →
                        </span>
                    </div>
                </div>
            </a>

            <!-- Overlay actions (hover on desktop, always on mobile) -->
            <div class="card-actions">
                <a href="{% url 'collection-slideshow' collection.pk %}"
                   class="act-btn blue" title="{% trans 'Slideshow' %}" aria-label="{% trans 'Slideshow' %}">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 3l14 9-14 9V3z"/>
                    </svg>
                </a>
                <a href="{% url 'collection-update' collection.pk %}"
                   class="act-btn" title="{% trans 'Edit Collection' %}" aria-label="{% trans 'Edit Collection' %}">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                </a>
                <button type="button" onclick="deleteCollection('{{ collection.pk }}')"
                        class="act-btn red" title="{% trans 'Delete Collection' %}" aria-label="{% trans 'Delete Collection' %}">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                </button>
            </div>
        </div>
    {% empty %}
        <div class="empty-state">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21zm10.5-11.25h.008v.008h-.008v-.008z"/>
            </svg>
            <h3 class="empty-title">{% trans "No collections" %}</h3>
            <p class="empty-sub">{% trans "Get started by creating a new collection." %}</p>
            <a href="{% url 'collection-create' %}" class="apple-btn apple-btn-primary">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
                </svg>
                {% trans "Create Collection" %}
            </a>
        </div>
    {% endfor %}
</div>

<!-- Apple-style pagination (page-local; shared partial untouched) -->
{% if is_paginated %}
<div class="pagination" aria-label="Pagination">
    {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}"
           hx-get="?page={{ page_obj.previous_page_number }}"
           hx-target="#paginated-content" hx-swap="innerHTML" hx-push-url="true"
           aria-label="{% trans 'Previous' %}">←</a>
    {% endif %}
    <span class="current">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
    {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}"
           hx-get="?page={{ page_obj.next_page_number }}"
           hx-target="#paginated-content" hx-swap="innerHTML" hx-push-url="true"
           aria-label="{% trans 'Next' %}">→</a>
    {% endif %}
</div>
{% endif %}
