<%- include('../partials/head', { title, bodyClass: 'app-page profile-app-page account-app-page' }) %>
<%- include('../partials/app-header') %>

<main class="app-main profile-app account-app">
  <a class="account-app-back" href="/profil" aria-label="Volver al perfil">‹ Perfil</a>

  <section class="profile-app-identity account-app-identity" aria-label="Mi cuenta">
    <span class="profile-app-avatar" aria-hidden="true">
      <img src="/assets/topstats-robot-cutout.png" alt="">
    </span>
    <div>
      <h1>Mi cuenta</h1>
      <p>Sécurité, confidentialité et préférences d’affichage.</p>
      <small><%= currentUser.email %></small>
    </div>
  </section>

  <section class="profile-app-detail-grid account-app-grid">
    <section class="glass-panel profile-password-card profile-app-detail account-app-card">
      <div class="section-heading">
        <p class="eyebrow">Sécurité</p>
        <h2>Modifier le mot de passe</h2>
        <p>Choisissez un mot de passe d’au moins 8 caractères.</p>
      </div>
      <form class="form-stack" method="post" action="/profil/mot-de-passe">
        <input type="hidden" name="redirect_to" value="/mon-compte">
        <label>Contraseña actual
          <input type="password" name="current_password" autocomplete="current-password" required>
        </label>
        <label>Nouveau mot de passe
          <input type="password" name="next_password" autocomplete="new-password" minlength="8" required>
        </label>
        <button class="btn btn-primary" type="submit">Mettre à jour</button>
      </form>
    </section>

    <section class="glass-panel streamer-card profile-app-detail account-app-card">
      <div class="section-heading">
        <p class="eyebrow">Mode streamer</p>
        <h2>Masquer les informations sensibles</h2>
        <p>Floute les cotes, bookmakers, montants et gains lorsque vous filmez ou partagez votre écran.</p>
      </div>
      <form class="streamer-form" method="post" action="/profil/streamer">
        <input type="hidden" name="redirect_to" value="/mon-compte">
        <label class="streamer-toggle">
          <input type="checkbox" name="streamer_mode" <%= discipline.streamer_mode ? 'checked' : '' %>>
          <span>
            <strong><%= discipline.streamer_mode ? 'Mode streamer actif' : 'Mode streamer désactivé' %></strong>
            <small><%= discipline.streamer_mode ? 'Les informations sensibles sont floutées sur le site.' : 'Activez-le avant une vidéo ou un partage d’écran.' %></small>
          </span>
        </label>
        <button class="btn btn-soft" type="submit"><%= discipline.streamer_mode ? 'Désactiver / enregistrer' : 'Activer / enregistrer' %></button>
      </form>
    </section>
  </section>

  <section class="glass-panel danger-card profile-app-detail account-app-danger">
    <div>
      <p class="eyebrow">Zone sensible</p>
      <h2>Supprimer mon compte</h2>
      <p>Cette action supprime votre compte et les données liées. Écrivez SUPPRIMER pour confirmer.</p>
    </div>
    <form class="form-stack" method="post" action="/profil/supprimer" data-confirm="Confirmer la suppression définitive de votre compte TopStats ?">
      <input type="hidden" name="redirect_to" value="/mon-compte">
      <label>Confirmation
        <input type="text" name="confirmation" placeholder="SUPPRIMER" autocomplete="off">
      </label>
      <button class="btn btn-ghost" type="submit">Supprimer définitivement</button>
    </form>
  </section>
</main>

<%- include('../partials/bottom-nav') %>
<%- include('../partials/footer') %>
