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

{% block title %}Capture — {{ ecran.titre }}{% endblock %}
{% block largeur %}contenu-large{% endblock %}

{% block body %}
    <p class="barre"><a href="{{ path('edition_ecrans') }}">← Toutes les captures</a>
        <span class="discret">{{ ecran.logiciel.nom }}{% if ecran.versionLogiciel %} · version {{ ecran.versionLogiciel }}{% endif %} · {{ ecran.fichier }}</span></p>

    {% if erreurs is not empty %}
        <div class="flash flash-erreur"><ul>{% for e in erreurs %}<li>{{ e }}</li>{% endfor %}</ul></div>
    {% endif %}

    <form method="post" action="{{ path('edition_ecran', {id: ecran.id}) }}" id="form-ecran" class="formulaire">
        <input type="hidden" name="_token" value="{{ csrf_token('ecran' ~ ecran.id) }}">
        <input type="hidden" name="zones" value="{{ zones|json_encode }}" data-zones-json>

        <div class="grille-2">
            <label>Titre de l'écran<input type="text" name="titre" value="{{ ecran.titre }}" maxlength="150" required></label>
            <label class="case"><input type="checkbox" name="anonymisee" value="1" {{ ecran.anonymisee ? 'checked' }}>
                La capture ne montre aucune donnée client réelle (visible des N1)</label>
        </div>

        <div class="editeur-zones" data-editeur-zones>
            <div class="bloc">
                <p class="discret">Cliquer-glisser sur l'image pour dessiner une zone, puis saisir son libellé à droite.
                    Cliquer sur une zone pour la sélectionner. Les numéros suivent l'ordre de la liste.</p>
                <div class="capture-cadre editeur-cadre" data-cadre>
                    <img src="{{ path('app_image', {id: ecran.id}) }}" alt="{{ ecran.titre }}" draggable="false"
                         width="{{ ecran.largeur }}" height="{{ ecran.hauteur }}">
                </div>
            </div>

            <div class="bloc liste-zones">
                <h2>Zones</h2>
                <ol data-liste-zones></ol>
                <p class="vide" data-aucune-zone>Aucune zone : dessinez-en une sur l'image.</p>
            </div>
        </div>

        {% if parametrages is not empty %}
            <section class="bloc">
                <h2>Fiches qui montrent cette capture de paramétrage</h2>
                <ul>{% for p in parametrages %}
                    <li><a href="{{ path('edition_fiche', {code: p.fonctionnalite.code, _fragment: 'parametrage'}) }}">{{ p.fonctionnalite.code }}</a>
                        {{ p.fonctionnalite.libelle }}{% if p.legende %} <span class="discret">— {{ p.legende }}</span>{% endif %}</li>
                {% endfor %}</ul>
                <p class="discret">Sur ces fiches, toutes les zones sont affichées avec leur légende.</p>
            </section>
        {% endif %}

        <section class="bloc">
            <h2>Fonctionnalités qui utilisent cette capture</h2>
            {% if emplacements is empty %}
                <p class="vide">Aucune. Choisissez cette capture dans le formulaire d'un emplacement.</p>
            {% else %}
                <p class="discret">Choisir la zone à surligner sur la fiche N1 de chaque fonctionnalité (« Toutes » = toutes les zones avec légende).</p>
                <table class="liste">
                    <thead><tr><th class="col-code">Code</th><th>Fonctionnalité</th><th>Chemin / champ</th><th>Zone affichée</th></tr></thead>
                    <tbody>
                    {% for e in emplacements %}
                        <tr>
                            <td class="col-code"><a href="{{ path('edition_fiche', {code: e.fonctionnalite.code}) }}">{{ e.fonctionnalite.code }}</a></td>
                            <td>{{ e.fonctionnalite.libelle }}</td>
                            <td>{{ e.chemin }}{% if e.champ %} <span class="discret">· {{ e.champ }}</span>{% endif %}</td>
                            <td>
                                <select name="liens[{{ e.id }}]" data-choix-zone data-valeur="{{ e.zone ? 'z' ~ e.zone.id : '' }}">
                                    <option value="">Toutes</option>
                                    {% for z in zones %}
                                        <option value="{{ z.cle }}" {{ e.zone and z.cle == 'z' ~ e.zone.id ? 'selected' }}>{{ loop.index }} – {{ z.libelle }}</option>
                                    {% endfor %}
                                </select>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </section>

        <p class="actions barre-collante"><button type="submit" class="bouton">Enregistrer la capture et les zones</button></p>
    </form>

    <form method="post" action="{{ path('edition_ecran_supprimer', {id: ecran.id}) }}" class="actions"
          onsubmit="return confirm('Supprimer définitivement cette capture et son fichier ?');">
        <input type="hidden" name="_token" value="{{ csrf_token('suppr_ecran' ~ ecran.id) }}">
        <button type="submit" class="lien-danger" {% if emplacements is not empty or parametrages is not empty %}disabled title="Capture encore utilisée"{% endif %}>Supprimer la capture</button>
    </form>
{% endblock %}