{% extends 'base.html.twig' %}
{% block title %}Mon profil — RepTrack{% endblock %}
{% block body %}

<div class="page-title">MON PROFIL</div>
<div class="page-sub">{{ user.firstName }} · {{ user.email }}</div>

{# ── Informations ── #}
<div class="section-label">INFORMATIONS</div>
<div class="card">
  {{ form_start(form) }}
  <div class="form-group">
    {{ form_label(form.firstName) }}
    {{ form_widget(form.firstName) }}
    {{ form_errors(form.firstName) }}
  </div>
  <div class="form-group">
    {{ form_label(form.email) }}
    {{ form_widget(form.email) }}
    {{ form_errors(form.email) }}
  </div>

  <div class="section-label" style="margin-top:20px">TEMPS DE REPOS PAR DÉFAUT</div>
  <div style="background:var(--surface2);border-radius:8px;padding:10px 12px;
              margin-bottom:14px;font-size:12px;color:var(--text-muted);
              border:1px solid var(--border)">
    Ces valeurs pré-remplissent les formulaires à la création d'un exercice.
    Tu peux les modifier exercice par exercice.
  </div>

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
    <div class="form-group">
      {{ form_label(form.defaultRestSeconds) }}
      {{ form_widget(form.defaultRestSeconds) }}
      {{ form_errors(form.defaultRestSeconds) }}
      <div style="font-size:11px;color:var(--text-dim);margin-top:4px">Entre les séries</div>
    </div>
    <div class="form-group">
      {{ form_label(form.defaultRestAfterExercise) }}
      {{ form_widget(form.defaultRestAfterExercise) }}
      {{ form_errors(form.defaultRestAfterExercise) }}
      <div style="font-size:11px;color:var(--text-dim);margin-top:4px">Entre les exercices</div>
    </div>
  </div>

  {# ── Checkbox appliquer aux exercices existants ── #}
  <label style="display:flex;align-items:flex-start;gap:10px;
                background:var(--surface2);border-radius:8px;
                padding:12px;margin-bottom:16px;cursor:pointer;
                border:1px solid var(--border)">
    <input type="checkbox" name="apply_to_all" value="1"
           style="width:18px;height:18px;margin-top:1px;
                  accent-color:var(--accent);flex-shrink:0;cursor:pointer"/>
    <div>
      <div style="font-size:13px;font-weight:500;margin-bottom:2px">
        Appliquer à tous mes exercices existants
      </div>
      <div style="font-size:11px;color:var(--text-muted)">
        Met à jour les temps de repos de toutes les séries de tous tes programmes.
      </div>
    </div>
  </label>

  <button type="submit" class="btn btn-primary">ENREGISTRER</button>
  {{ form_end(form) }}
</div>

{# ── Sécurité ── #}
<div class="section-label">SÉCURITÉ</div>
<a href="{{ path('app_profile_password') }}" style="text-decoration:none">
  <div class="card row-between">
    <div>
      <div style="font-weight:500">Mot de passe</div>
      <div style="font-size:12px;color:var(--text-muted);margin-top:2px">Modifier ton mot de passe</div>
    </div>
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
         stroke="var(--text-dim)" stroke-width="2" stroke-linecap="round">
      <polyline points="9,18 15,12 9,6"/>
    </svg>
  </div>
</a>

{# ── Navigation mobile — liens supplémentaires ── #}
<div class="mobile-only">

  {% if is_granted('ROLE_ADMIN') %}
    <div class="section-label">ADMINISTRATION</div>
    <a href="{{ path('app_admin_dashboard') }}" style="text-decoration:none">
      <div class="card row-between" style="border-color:rgba(232,255,71,.2)">
        <div style="display:flex;align-items:center;gap:10px">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
               stroke="var(--accent)" stroke-width="1.8" stroke-linecap="round">
            <path d="M12 2a4 4 0 014 4 4 4 0 01-4 4 4 4 0 01-4-4 4 4 0 014-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z"/>
          </svg>
          <span style="font-weight:500;color:var(--accent)">Dashboard Admin</span>
        </div>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
             stroke="var(--text-dim)" stroke-width="2">
          <polyline points="9,18 15,12 9,6"/>
        </svg>
      </div>
    </a>
  {% endif %}

  <div class="section-label">COMPTE</div>
  <a href="{{ path('app_logout') }}" style="text-decoration:none">
    <div class="card row-between" style="border-color:rgba(255,68,68,.2)">
      <div style="display:flex;align-items:center;gap:10px">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
             stroke="#ff4444" stroke-width="1.8" stroke-linecap="round">
          <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
          <polyline points="16,17 21,12 16,7"/>
          <line x1="21" y1="12" x2="9" y2="12"/>
        </svg>
        <span style="font-weight:500;color:#ff4444">Déconnexion</span>
      </div>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
           stroke="var(--text-dim)" stroke-width="2">
        <polyline points="9,18 15,12 9,6"/>
      </svg>
    </div>
  </a>

  <div style="text-align:center;padding:16px 0;font-size:11px;color:var(--text-dim)">
    RepTrack · {{ app.user.firstName }} · inscrit le {{ app.user.createdAt|date('d/m/Y') }}
  </div>
</div>

{% endblock %}

{% block stylesheets %}
<style>
  /* Visible uniquement sur mobile */
  .mobile-only { display:none }
  @media (max-width:639px) {
    .mobile-only { display:block }
  }
</style>
{% endblock %}