{% extends 'admin/base_admin.html.twig' %}
{% block title %}Étiquettes du portfolio{% endblock %}
{% block breadcrumb %}Étiquettes{% endblock %}
{% block content %}
    <h1 class="page-title" style="font-size:26px">Étiquettes du portfolio</h1>
    <p class="page-sub" style="margin:-6px 0 22px">
        Elles servent aux pastilles des cartes et aux filtres de
        <a href="/nos-realisations/" target="_blank" rel="noopener">nos réalisations</a>.
        Une réalisation peut en porter plusieurs.
        {# Rien à voir avec les tags du blog, qui se règlent dans Catégories & tags. #}
    </p>

    <div class="grid-2">
        <div class="card card--pad">
            <h2 style="font-family:var(--title);font-size:18px;margin:0 0 14px">Étiquettes existantes</h2>
            <table class="data" style="min-width:auto">
                <thead>
                    <tr><th>Nom</th><th style="text-align:center">Réalisations</th><th></th></tr>
                </thead>
                <tbody>
                {% for tag in tags %}
                    {% set n = usage[tag.id] ?? 0 %}
                    <tr>
                        <td>
                            <form method="post" action="{{ path('admin_realisation_tag_save') }}" style="display:flex;align-items:center;gap:8px">
                                <input type="hidden" name="_token" value="{{ csrf_token('tag_save') }}">
                                <input type="hidden" name="id" value="{{ tag.id }}">
                                <input type="hidden" name="order_index" value="{{ tag.orderIndex }}">
                                <span style="display:inline-block;width:12px;height:12px;border-radius:3px;background:{{ tag.color ?? '#327632' }};flex:none"></span>
                                <input type="text" name="name" value="{{ tag.name }}" style="flex:1;min-width:0">
                                <input type="text" name="color" value="{{ tag.color }}" placeholder="#327632" style="width:92px" maxlength="7">
                                <button class="pill-btn" type="submit">Renommer</button>
                            </form>
                        </td>
                        <td style="text-align:center">{{ n }}</td>
                        <td style="text-align:right">
                            {% if n > 0 %}
                                <span class="page-sub" title="Retirez-la des réalisations avant de la supprimer.">verrouillée</span>
                            {% else %}
                                <form method="post" action="{{ path('admin_realisation_tag_delete', {id: tag.id}) }}" style="display:inline"
                                      onsubmit="return confirm('Supprimer l’étiquette « {{ tag.name|e('js') }} » ?')">
                                    <input type="hidden" name="_token" value="{{ csrf_token('tag_delete' ~ tag.id) }}">
                                    <button class="pill-btn" style="color:var(--red)" type="submit">Suppr.</button>
                                </form>
                            {% endif %}
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="3" class="page-sub">Aucune étiquette. Créez la première ci-contre.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="card card--pad" style="align-self:start">
            <h2 style="font-family:var(--title);font-size:18px;margin:0 0 14px">Nouvelle étiquette</h2>
            <form method="post" action="{{ path('admin_realisation_tag_save') }}">
                <input type="hidden" name="_token" value="{{ csrf_token('tag_save') }}">
                <input type="hidden" name="id" value="">
                <label class="field"><span>Nom</span><input type="text" name="name" required placeholder="Site catalogue"></label>
                <label class="field"><span>Couleur (facultative)</span><input type="text" name="color" placeholder="#327632" maxlength="7"></label>
                <label class="field"><span>Ordre d’affichage</span><input type="number" name="order_index" value="900"></label>
                <button class="btn btn--primary" type="submit">Créer</button>
            </form>
            <p class="page-sub" style="margin:16px 0 0">
                Une étiquette se crée aussi directement depuis la fiche d’une réalisation,
                dans le champ « Nouvelles étiquettes ».
            </p>
        </div>
    </div>
{% endblock %}