{% extends 'base.html.twig' %}

{% block title %}Art · dmtools{% endblock %}

{% block body %}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="h3 mb-0">Art</h1>
        <a href="{{ path('app_art_upload') }}" class="btn btn-primary btn-sm">Upload art</a>
    </div>

    {% if artworks is empty %}
        <div class="card shadow-sm">
            <div class="card-body text-center text-body-secondary py-5">
                Nothing uploaded yet. Use <strong>Upload art</strong> to add maps, handouts or character pieces.
            </div>
        </div>
    {% else %}
        <p class="text-body-secondary small mb-2">Drag the <span class="art-drag-handle d-inline-flex">&#10021;</span> handle to reorder.</p>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3 art-grid"
             data-controller="art-reorder"
             data-art-reorder-url-value="{{ path('app_art_reorder') }}"
             data-art-reorder-token-value="{{ csrf_token('reorder-art') }}"
             data-action="dragover->art-reorder#dragOver drop->art-reorder#drop">
            {% for art in artworks %}
                <div class="col art-tile" data-art-reorder-target="item" data-art-id="{{ art.id }}">
                    <div class="card shadow-sm h-100 position-relative">
                        <button type="button" class="art-drag-handle" draggable="true"
                                data-action="dragstart->art-reorder#dragStart dragend->art-reorder#dragEnd"
                                title="Drag to reorder" aria-label="Drag to reorder {{ art.name }}">&#10021;</button>
                        <a href="{{ path('app_art_show', {id: art.id}) }}" class="text-decoration-none text-body">
                            <div class="art-thumb">
                                <img src="{{ path('app_art_file', {id: art.id}) }}" alt="{{ art.name }}" loading="lazy">
                            </div>
                            <div class="card-body py-2">
                                <div class="fw-semibold text-truncate" title="{{ art.name }}">{{ art.name }}</div>
                                <div class="text-body-secondary small">
                                    {{ art.uploadedAt|date('Y-m-d') }} · {{ (art.size / 1024)|round }} KB
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="art-reorder-status" data-art-reorder-target="status" aria-live="polite"></div>
    {% endif %}
{% endblock %}