{# Affichage masqué d'un mot de passe, avec œil de révélation et copie.
   Partagé entre la fiche d'un accès et la colonne coffre-fort d'un client :
   un seul endroit à modifier. Attend une variable `valeur` (string|null). #}

{% if valeur is null %}
    <span class="mdp-illisible" title="La clé de chiffrement a changé ou la donnée est corrompue.">Illisible</span>
{% else %}
    <span class="mdp-champ" data-mdp="{{ valeur|e('html_attr') }}">
        <code class="mdp-valeur">••••••••••</code>

        <button type="button" class="mdp-icone mdp-voir" title="Afficher le mot de passe" aria-label="Afficher le mot de passe">
            {# œil ouvert : état masqué, cliquer révèle #}
            <svg class="icone icone-oeil" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
            </svg>
            {# œil barré : état révélé, cliquer masque #}
            <svg class="icone icone-oeil-barre" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
                <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/>
                <line x1="1" y1="1" x2="23" y2="23"/>
            </svg>
        </button>

        <button type="button" class="mdp-icone mdp-copier" title="Copier le mot de passe" aria-label="Copier le mot de passe">
            <svg class="icone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
            </svg>
        </button>
    </span>
{% endif %}