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

{% block title %}Créations des sites{% endblock %}

{% block breadcrumb %}Super Administration <i class="fas fa-chevron-right"></i> Créations des sites{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .sc { max-width: 1200px; margin: 0 auto; padding: 1rem 0 2rem; }
    .sc h1 { font-family: var(--font-heading); }
    .sc-lead { color: var(--ink, #16181d); opacity: .8; max-width: 70ch; }
    .sc-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line, #e7e0d4); border-radius: 12px; overflow: hidden; }
    .sc-table th, .sc-table td { padding: .7rem .8rem; border-bottom: 1px solid var(--line, #e7e0d4); vertical-align: top; text-align: left; }
    .sc-table th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; background: var(--paper, #faf6ef); }
    .sc-kind { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--brand-soft, #e3eaf4); color: var(--brand-primary, #24477a); font-size: .82rem; font-weight: 600; }
    .sc-error { color: var(--action, #b8461e); font-size: .88rem; }
    .sc-form { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: 0; }
    .sc-form input[type="text"] { min-height: 44px; min-width: 14rem; padding: 0 .7rem; border: 1px solid var(--line-strong, #c9c2b6); border-radius: 8px; }
    .sc-form button { min-height: 44px; }
    .sc-section { margin-top: 2rem; }
    .sc-empty { padding: 1.5rem; text-align: center; border: 1px dashed var(--line-strong, #c9c2b6); border-radius: 12px; }
    .sc-wrap { overflow-x: auto; }
</style>
{% endblock %}

{% block body %}
<div class="sc">
    <h1 class="h3 mb-2"><i class="fas fa-shapes me-2 text-primary" aria-hidden="true"></i>Créations des sites</h1>
    <p class="sc-lead">Les en-têtes, pieds de page et blocs que l'assistant a dessinés pour les sites. Une création réussie peut rejoindre le
        catalogue : l'assistant la proposera alors aux autres sites, qui en recevront chacun une copie. Retirer un modèle ne change aucun site.</p>

    {% for message in app.flashes('success') %}<div class="alert alert-success" role="status">{{ message }}</div>{% endfor %}

    <section class="sc-section" aria-labelledby="sc-recent">
        <h2 id="sc-recent" class="h5">Créations récentes</h2>
        {% if components is empty %}
            <p class="sc-empty">Aucune création pour l'instant.</p>
        {% else %}
        <div class="sc-wrap">
        <table class="sc-table">
            <thead><tr><th scope="col">Création</th><th scope="col">Site</th><th scope="col">État</th><th scope="col">Catalogue</th></tr></thead>
            <tbody>
            {% for c in components %}
                <tr>
                    <td>
                        <strong>{{ c.label }}</strong> <span class="sc-kind">{{ {'header': 'En-tête', 'footer': 'Pied de page', 'block': 'Bloc'}[c.kind] ?? c.kind }}</span><br>
                        <code>{{ c.key }}</code> · modifiée le {{ c.updatedAt|date('d/m/Y H:i') }}
                    </td>
                    <td>{{ c.site.name }} <span class="text-muted">#{{ c.site.id }}</span></td>
                    <td>{% if c.lastError %}<span class="sc-error">En panne : {{ c.lastError|length > 140 ? c.lastError|slice(0, 140) ~ '…' : c.lastError }}</span>{% else %}Affichée{% endif %}</td>
                    <td>
                        {% if promoted[c.site.id ~ ':' ~ c.key] is defined %}
                            Au catalogue
                        {% else %}
                            <form class="sc-form" method="post" action="{{ path('admin_super_component_promote', {id: c.id}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('super-components') }}">
                                <label class="visually-hidden" for="sc-desc-{{ c.id }}">Description du modèle</label>
                                <input type="text" id="sc-desc-{{ c.id }}" name="description" maxlength="255" placeholder="À quoi elle sert (facultatif)">
                                <button type="submit" class="btn btn-sm btn-outline-primary">Promouvoir au catalogue</button>
                            </form>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
        {% endif %}
    </section>

    <section class="sc-section" aria-labelledby="sc-catalog">
        <h2 id="sc-catalog" class="h5">Catalogue</h2>
        {% if presets is empty %}
            <p class="sc-empty">Le catalogue est vide : promouvez une création réussie.</p>
        {% else %}
        <div class="sc-wrap">
        <table class="sc-table">
            <thead><tr><th scope="col">Modèle</th><th scope="col">Origine</th><th scope="col">Proposé</th></tr></thead>
            <tbody>
            {% for p in presets %}
                <tr>
                    <td><strong>{{ p.label }}</strong> <span class="sc-kind">{{ {'header': 'En-tête', 'footer': 'Pied de page', 'block': 'Bloc'}[p.kind] ?? p.kind }}</span>{% if p.description %}<br>{{ p.description }}{% endif %}</td>
                    <td>Site #{{ p.sourceSiteId }}, le {{ p.createdAt|date('d/m/Y') }}</td>
                    <td>
                        <form class="sc-form" method="post" action="{{ path('admin_super_component_preset_toggle', {id: p.id}) }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('super-components') }}">
                            <span>{{ p.active ? 'Oui' : 'Non' }}</span>
                            <button type="submit" class="btn btn-sm btn-outline-secondary">{{ p.active ? 'Retirer du catalogue' : 'Remettre au catalogue' }}</button>
                        </form>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
        {% endif %}
    </section>
</div>
{% endblock %}