{{ form_start(form, {
    attr: {
        class: 'm-form m-form--fit crm-password-modal',
        novalidate: 'novalidate'
    }
}) }}

<style>
  .crm-password-modal .modal-body{
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: .9rem;
    background: #f8fafc;
  }
  .crm-password-modal .crm-section{
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 12px;
    padding: .9rem;
  }
  .crm-password-modal .crm-section-title{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin:0 0 .75rem 0;
    font-size:.95rem;
    font-weight:600;
    color:#111827;
  }
  .crm-password-modal .form-label{
    display:block;
    margin-bottom:.3rem;
    font-size:.83rem;
    font-weight:500;
    color:#475569;
  }
  .crm-password-modal .form-control{
    min-height: 42px;
    font-size: .93rem;
  }
  .crm-password-modal .crm-input-wrap{
    position: relative;
  }
  .crm-password-modal .crm-password-toggle{
    position:absolute;
    top:50%;
    right:.55rem;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:#64748b;
    padding:.2rem;
    line-height:1;
  }
  .crm-password-modal .crm-password-toggle:hover{
    color:#111827;
  }
  .crm-password-modal .crm-help{
    display:block;
    margin-top:.35rem;
    font-size:.78rem;
    color:#64748b;
  }
  .crm-password-modal .crm-security-note{
    border:1px solid rgba(245,158,11,.22);
    background:rgba(245,158,11,.10);
    color:#7c2d12;
    border-radius:10px;
    padding:.65rem .75rem;
    font-size:.82rem;
  }
  .crm-password-modal .modal-footer{
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.75rem .9rem;
    border-top:1px solid #e2e8f0;
    background:#fff;
  }
  .crm-password-modal .modal-footer .btn-dark{
    min-width: 140px;
  }
  @media (max-width: 768px) {
    .crm-password-modal .modal-body{
      max-height: calc(100vh - 145px);
      padding: .7rem;
    }
    .crm-password-modal .modal-footer{
      flex-direction:column-reverse;
      align-items:stretch;
    }
    .crm-password-modal .modal-footer .btn{
      width:100%;
    }
  }
</style>

<div class="modal-content">
    <div class="modal-header py-2">
        <h5 class="modal-title mb-0 flex-grow-1">
            <i class="fa fa-lock text-primary me-2"></i>
            Modifier le mot de passe
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
    </div>

    <div class="modal-body">
        <fieldset class="crm-section">
            <div class="crm-section-title">
                <i class="fa fa-user-shield text-primary"></i>
                <span>Compte cible : {{ user.firstname }}</span>
            </div>

            <div class="crm-security-note mb-3">
                L'affichage du mot de passe par un admin est acceptable dans un CRM si l'acces est reserve aux profils autorises,
                si l'action est tracee, et si le mot de passe n'est jamais stocke en clair.
            </div>

            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label" for="{{ form.password.first.vars.id }}">Nouveau mot de passe</label>
                    <div class="crm-input-wrap">
                        {{ form_widget(form.password.first, {
                            attr: {
                                class: 'form-control m-input pe-5',
                                placeholder: 'Saisir le nouveau mot de passe',
                                autocomplete: 'new-password'
                            }
                        }) }}
                        <button type="button"
                                class="crm-password-toggle js-toggle-password"
                                data-target="#{{ form.password.first.vars.id }}"
                                aria-label="Afficher le mot de passe">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                    <span class="crm-help">Le mot de passe doit contenir au minimum 6 caracteres.</span>
                </div>

                <div class="col-12">
                    <label class="form-label" for="{{ form.password.second.vars.id }}">Confirmer le mot de passe</label>
                    <div class="crm-input-wrap">
                        {{ form_widget(form.password.second, {
                            attr: {
                                class: 'form-control m-input pe-5',
                                placeholder: 'Retaper le nouveau mot de passe',
                                autocomplete: 'new-password'
                            }
                        }) }}
                        <button type="button"
                                class="crm-password-toggle js-toggle-password"
                                data-target="#{{ form.password.second.vars.id }}"
                                aria-label="Afficher le mot de passe">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-secondary me-auto" data-bs-dismiss="modal">Fermer</button>
        {{ form_widget(form.save, {'attr': {'class': 'btn btn-dark'}, 'label': 'Enregistrer'}) }}
    </div>
</div>

{{ form_errors(form) }}
{{ form_rest(form) }}
{{ form_end(form) }}

<script>
  (function () {
    document.querySelectorAll('.js-toggle-password').forEach(function (button) {
      button.addEventListener('click', function () {
        var target = document.querySelector(button.getAttribute('data-target'));
        if (!target) return;

        var isPassword = target.getAttribute('type') === 'password';
        target.setAttribute('type', isPassword ? 'text' : 'password');

        var icon = button.querySelector('i');
        if (icon) {
          icon.classList.toggle('fa-eye', !isPassword);
          icon.classList.toggle('fa-eye-slash', isPassword);
        }
      });
    });
  })();
</script>