{# La liste des travaux de l'atelier. Rendue dans la page, et rechargée
   telle quelle (GET …/atelier/list) quand /status dit que quelque chose a
   bougé : une seule écriture des cartes, côté serveur.
   Variables : rows (JobRowPresenter), site, canEdit. #}
{% set openRows = rows|filter(r => r.open) %}
{% set failedRows = rows|filter(r => r.status == 'failed') %}
{% set doneRows = rows|filter(r => r.status == 'done') %}
{% set cancelledRows = rows|filter(r => r.status == 'cancelled') %}

{% if rows is empty %}
    <div class="atelier-empty">
        <div class="atelier-empty-icon"><i class="fas fa-wand-magic-sparkles"></i></div>
        <p class="fw-semibold mb-1">Aucune image demandée pour l'instant.</p>
        <p class="text-muted small mb-0">Décrivez-en une ci-dessus, ou retouchez une image de votre médiathèque : elle apparaîtra ici, puis dans la médiathèque dès qu'elle sera dessinée.</p>
    </div>
{% endif %}

{% if openRows is not empty %}
<section class="mb-4" id="atelier-open">
    <h2 class="h5 fw-bold d-flex align-items-center gap-2 mb-3">
        <i class="fas fa-hourglass-half text-primary"></i> En cours
        <span class="badge rounded-pill bg-primary-subtle text-primary border border-primary-subtle">{{ openRows|length }}</span>
    </h2>
    <div class="atelier-list">
        {% for r in openRows %}
        <article class="atelier-job atelier-job-{{ r.status }}" data-id="{{ r.id }}">
            <div class="atelier-job-thumb">
                {% if r.sourceUrl %}
                    <img src="{{ r.sourceUrl }}" alt="" loading="lazy">
                {% else %}
                    <i class="fas {{ r.kind == 'edit' ? 'fa-wand-magic' : 'fa-image' }}"></i>
                {% endif %}
            </div>
            <div class="atelier-job-body">
                <div class="d-flex align-items-center flex-wrap gap-2 mb-1">
                    <span class="badge bg-light text-dark border">{{ r.kindLabel }}</span>
                    <span class="badge atelier-status atelier-status-{{ r.status }}{{ not r.sent ? ' atelier-status-unsent' : '' }}">
                        {% if r.status == 'running' %}<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>{% endif %}
                        {{ r.statusLabel }}
                    </span>
                    {% if r.position or r.eta %}
                        <span class="text-muted small">{% if r.position %}position {{ r.position }}{% endif %}{% if r.position and r.eta %} · {% endif %}{% if r.eta %}{{ r.eta }}{% endif %}</span>
                    {% endif %}
                    {% if r.priority %}<span class="badge bg-warning-subtle text-warning border border-warning-subtle"><i class="fas fa-bolt me-1"></i>Prioritaire</span>{% endif %}
                </div>
                <p class="atelier-job-prompt mb-1" title="{{ r.prompt }}">{{ r.prompt }}</p>
                <div class="text-muted small">
                    {% if r.location %}<i class="fas fa-location-dot me-1"></i>{{ r.location }} · {% endif %}{{ r.width }} × {{ r.height }} · dossier « {{ r.folder }} » · demandée le {{ r.createdAt|date('d/m à H:i') }}
                </div>
                {% if r.error %}<div class="small text-warning-emphasis mt-1"><i class="fas fa-triangle-exclamation me-1"></i>{{ r.error }}</div>{% endif %}
            </div>
            {% if canEdit and r.canCancel %}
            <div class="atelier-job-actions">
                <button type="button" class="btn btn-sm btn-outline-secondary js-cancel" data-id="{{ r.id }}" title="Retirer cette demande de la file">
                    <i class="fas fa-xmark me-1"></i>Annuler
                </button>
            </div>
            {% endif %}
        </article>
        {% endfor %}
    </div>
</section>
{% endif %}

{% if failedRows is not empty %}
<section class="mb-4" id="atelier-failed">
    <h2 class="h5 fw-bold d-flex align-items-center gap-2 mb-3">
        <i class="fas fa-triangle-exclamation text-danger"></i> En échec
        <span class="badge rounded-pill bg-danger-subtle text-danger border border-danger-subtle">{{ failedRows|length }}</span>
    </h2>
    <div class="atelier-list">
        {% for r in failedRows %}
        <article class="atelier-job atelier-job-failed" data-id="{{ r.id }}">
            <div class="atelier-job-thumb">
                {% if r.sourceUrl %}<img src="{{ r.sourceUrl }}" alt="" loading="lazy">{% else %}<i class="fas fa-image"></i>{% endif %}
            </div>
            <div class="atelier-job-body">
                <div class="d-flex align-items-center flex-wrap gap-2 mb-1">
                    <span class="badge bg-light text-dark border">{{ r.kindLabel }}</span>
                    <span class="badge atelier-status atelier-status-failed">{{ r.statusLabel }}</span>
                </div>
                <p class="atelier-job-prompt mb-1" title="{{ r.prompt }}">{{ r.prompt }}</p>
                <div class="small text-danger"><i class="fas fa-circle-info me-1"></i>{{ r.error ?? 'Le poste n\'a pas rendu d\'image.' }}</div>
                <div class="text-muted small">{% if r.location %}<i class="fas fa-location-dot me-1"></i>{{ r.location }} · {% endif %}{{ r.width }} × {{ r.height }} · {{ r.createdAt|date('d/m à H:i') }}</div>
            </div>
            {% if canEdit and r.canRetry %}
            <div class="atelier-job-actions">
                <button type="button" class="btn btn-sm btn-outline-primary js-retry" data-id="{{ r.id }}" title="Redemander cette image (nouveau travail)">
                    <i class="fas fa-rotate-right me-1"></i>Relancer
                </button>
            </div>
            {% endif %}
        </article>
        {% endfor %}
    </div>
</section>
{% endif %}

{% if doneRows is not empty %}
<section class="mb-4" id="atelier-done">
    <h2 class="h5 fw-bold d-flex align-items-center gap-2 mb-3">
        <i class="fas fa-circle-check text-success"></i> Livrées récemment
        <span class="badge rounded-pill bg-success-subtle text-success border border-success-subtle">{{ doneRows|length }}</span>
        <span class="text-muted small fw-normal ms-1">dans la médiathèque, dossier « ai-generated »</span>
    </h2>
    <div class="atelier-grid">
        {% for r in doneRows %}
        <figure class="atelier-done" data-id="{{ r.id }}">
            <a href="{{ r.resultUrl }}" target="_blank" rel="noopener" class="atelier-done-thumb" title="Ouvrir l'image dans un nouvel onglet">
                <img src="{{ r.resultUrl }}" alt="{{ r.location ?? (r.prompt|slice(0, 80)) }}" loading="lazy">
                {% if r.sourceUrl %}<span class="atelier-done-badge"><i class="fas fa-wand-magic me-1"></i>Retouche</span>{% endif %}
            </a>
            <figcaption>
                <p class="atelier-job-prompt small mb-1" title="{{ r.prompt }}">{{ r.prompt }}</p>
                <div class="text-muted small mb-2">{% if r.location %}<i class="fas fa-location-dot me-1"></i>{{ r.location }} · {% endif %}{{ r.width }} × {{ r.height }}{% if r.finishedAt %} · {{ r.finishedAt|date('d/m à H:i') }}{% endif %}</div>
                <div class="d-flex flex-wrap gap-1">
                    {% if canEdit %}
                    <button type="button" class="btn btn-sm btn-outline-primary js-fix" data-url="{{ r.resultUrl }}" title="Retoucher cette image avec une consigne">
                        <i class="fas fa-wand-magic me-1"></i>Corriger
                    </button>
                    {% endif %}
                    <button type="button" class="btn btn-sm btn-outline-secondary js-copy" data-url="{{ r.resultUrl }}" title="Copier l'adresse de l'image">
                        <i class="fas fa-link me-1"></i>Copier l'URL
                    </button>
                </div>
            </figcaption>
        </figure>
        {% endfor %}
    </div>
</section>
{% endif %}

{% if cancelledRows is not empty %}
<details class="mb-4 atelier-cancelled" id="atelier-cancelled">
    <summary class="text-muted small" style="cursor: pointer;">
        <i class="fas fa-ban me-1"></i>{{ cancelledRows|length }} demande{{ cancelledRows|length > 1 ? 's' : '' }} annulée{{ cancelledRows|length > 1 ? 's' : '' }}
    </summary>
    <ul class="list-unstyled mt-2 mb-0">
        {% for r in cancelledRows %}
        <li class="d-flex align-items-center flex-wrap gap-2 py-1 border-bottom small" data-id="{{ r.id }}">
            <span class="badge bg-light text-dark border">{{ r.kindLabel }}</span>
            <span class="atelier-job-prompt flex-grow-1 text-muted" title="{{ r.prompt }}">{{ r.prompt }}</span>
            {% if canEdit and r.canRetry %}
            <button type="button" class="btn btn-sm btn-link p-0 js-retry" data-id="{{ r.id }}">Redemander</button>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</details>
{% endif %}