{% extends "base_template.html" %}
{% set is_poster = kind == 'poster' %}
{% block title %}{{ _('Posters') if is_poster else _('Photos') }} — {{ edition.name }}{% endblock %}
{% block content %}
<div class="d-flex flex-column align-items-start gap-2 mb-4">
    <a href="{{ url_for('editions.admin_index') }}" class="btn btn-outline-secondary btn-sm">← {{ _('All editions') }}</a>
    <h1 class="h3 mb-0">{{ (_('Posters of %(name)s', name=edition.name)) if is_poster else (_('Photos of %(name)s', name=edition.name)) }}</h1>
    <div class="btn-group btn-group-sm mt-1" role="group">
        <a class="btn {{ 'btn-primary' if not is_poster else 'btn-outline-primary' }}" href="{{ url_for('editions.admin_photos', edition_id=edition.id) }}">{{ _('Photos') }}</a>
        <a class="btn {{ 'btn-primary' if is_poster else 'btn-outline-primary' }}" href="{{ url_for('editions.admin_photos', edition_id=edition.id, kind='poster') }}">{{ _('Posters') }}</a>
    </div>
    <p class="text-muted mb-0 small">{{ _('Posters are pulled from the whole image library.') if is_poster else _('Photos come from the public gallery; upload new ones in Media first.') }}</p>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}<div class="alert alert-{{ 'danger' if category == 'danger' else ('info' if category=='info' else 'success') }} py-2">{{ message }}</div>{% endfor %}
{% endwith %}

<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <strong>{{ _('In this edition') }}</strong><span class="badge bg-secondary">{{ photos | length }}</span>
    </div>
    <div class="card-body">
        {% if photos %}
        <div class="row g-2">
            {% for p in photos %}
            <div class="col-4 col-md-2">
                <div class="position-relative">
                    <img src="{{ p.thumbnail_url }}" alt="{{ p.alt }}" loading="lazy" class="img-fluid rounded" style="aspect-ratio:1;object-fit:cover;width:100%">
                    <form method="POST" action="{{ url_for('editions.admin_photos_detach', edition_id=edition.id, media_id=p.media_id, kind=kind) }}" class="position-absolute top-0 end-0 m-1">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button class="btn btn-sm btn-danger py-0 px-1" type="submit" title="{{ _('Remove') }}">&times;</button>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-muted mb-0">{{ _('Nothing here yet. Add some below.') }}</p>
        {% endif %}
    </div>
</div>

<div class="card">
    <div class="card-header"><strong>{{ _('Add posters') if is_poster else _('Add photos') }}</strong></div>
    <form method="POST" action="{{ url_for('editions.admin_photos_attach', edition_id=edition.id, kind=kind) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="card-body">
            {% if available %}
            <p class="text-muted small">{{ _('Tick the images to add, then Save.') }}</p>
            <div class="row g-2" style="max-height:520px;overflow:auto">
                {% for m in available %}
                <div class="col-4 col-md-2">
                    <label class="d-block position-relative" style="cursor:pointer">
                        <input class="form-check-input position-absolute top-0 start-0 m-1" type="checkbox" name="media_ids" value="{{ m.id }}">
                        <img src="{{ m.thumbnail_url }}" alt="{{ m.alt or m.title }}" loading="lazy" class="img-fluid rounded" style="aspect-ratio:1;object-fit:cover;width:100%">
                    </label>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-muted mb-0">{{ _('Nothing left to add. Upload more in Media.') }}</p>
            {% endif %}
        </div>
        {% if available %}<div class="card-footer text-end"><button class="btn btn-primary" type="submit">{{ _('Add selected') }}</button></div>{% endif %}
    </form>
</div>
{% endblock %}