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

{# ── Bannière PWA install ──────────────────────────────── #}
<div class="pwa-banner" id="pwaBanner">
  <div class="pwa-banner-left">
    <div class="pwa-banner-icon">RT</div>
    <div class="pwa-banner-text">
      <strong>Installer RepTrack</strong>
      <span>Accès rapide · Fonctionne hors ligne</span>
    </div>
  </div>
  <div class="pwa-banner-actions">
    <button class="pwa-btn-dismiss" onclick="pwaDismiss()">Plus tard</button>
    <button class="pwa-btn-install" onclick="pwaInstall()">⊕ Installer</button>
  </div>
</div>

<style>
  .pwa-banner {
    display: none;
    align-items: center; justify-content: space-between;
    background: #1a1a1a; border-bottom: 1px solid #2e2e2e;
    padding: 12px 16px; gap: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  }
  .pwa-banner.show { display: flex; }
  .pwa-banner-left { display: flex; align-items: center; gap: 12px; }
  .pwa-banner-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: #e8ff47; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 13px; color: #0f0f0f; letter-spacing: 1px;
  }
  .pwa-banner-text { font-size: 13px; color: var(--text, #f0f0f0); line-height: 1.4; }
  .pwa-banner-text strong { display: block; font-size: 14px; font-weight: 600; }
  .pwa-banner-text span { color: var(--text-muted, #888); font-size: 12px; }
  .pwa-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
  .pwa-btn-install {
    background: #e8ff47; color: #0f0f0f;
    border: none; border-radius: 8px;
    padding: 8px 14px; font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
  }
  .pwa-btn-dismiss {
    background: transparent; color: var(--text-muted, #888);
    border: 1px solid var(--border, #2e2e2e); border-radius: 8px;
    padding: 8px 12px; font-size: 13px;
    cursor: pointer; white-space: nowrap;
  }
</style>

<script>
(function () {
  var deferredPrompt = null;
  var bar = document.getElementById('pwaBanner');

  var dismissed = localStorage.getItem('pwa_dismissed');
  if (dismissed && Date.now() - parseInt(dismissed) < 7 * 24 * 3600 * 1000) return;

  window.addEventListener('beforeinstallprompt', function (e) {
    e.preventDefault();
    deferredPrompt = e;
    bar.classList.add('show');
  });

  window.addEventListener('appinstalled', function () {
    bar.classList.remove('show');
    deferredPrompt = null;
  });

  window.pwaInstall = function () {
    if (!deferredPrompt) return;
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then(function () {
      deferredPrompt = null;
      bar.classList.remove('show');
    });
  };

  window.pwaDismiss = function () {
    bar.classList.remove('show');
    localStorage.setItem('pwa_dismissed', Date.now().toString());
  };
})();
</script>

{# ── Contenu login ─────────────────────────────────────── #}
<div style="max-width:420px;margin:24px auto">
  <div style="text-align:center;margin-bottom:28px">
    <div style="font-family:var(--font-display);font-size:52px;color:var(--accent);letter-spacing:4px">REPTRACK</div>
    <div style="font-size:13px;color:var(--text-muted);margin-top:4px">Ton suivi de séances</div>
  </div>

  {% if app.request.query.get('not_verified') %}
    <div class="flash flash-error" style="text-align:center">
      <strong>Email non confirmé.</strong><br>
      Vérifie ta boîte mail ou
      <a href="{{ path('app_resend_verification', {email: app.request.query.get('not_verified')}) }}"
         style="color:#ff4444;text-decoration:underline">
        renvoyer le lien de confirmation
      </a>.
    </div>
  {% endif %}

  {% if error %}
    <div class="flash flash-error">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
  {% endif %}

  <div class="card">
    <div class="card-title">CONNEXION</div>
    <form method="post" action="{{ path('app_login') }}">
      <div class="form-group">
        <label for="email">EMAIL</label>
        <input type="email" id="email" name="email" value="{{ last_username }}" autofocus autocomplete="email"/>
      </div>
      <div class="form-group">
        <label for="password">MOT DE PASSE</label>
        <input type="password" id="password" name="password" autocomplete="current-password"/>
      </div>
      <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
      <button type="submit" class="btn btn-primary btn-full">SE CONNECTER</button>
    </form>
  </div>

  <div style="text-align:center;margin-top:12px;font-size:13px;color:var(--text-muted)">
    <a href="{{ path('app_forgot_password') }}" style="color:var(--text-dim)">Mot de passe oublié ?</a>
  </div>
  <div style="text-align:center;margin-top:8px;font-size:13px;color:var(--text-muted)">
    Pas encore de compte ? <a href="{{ path('app_register') }}">S'inscrire</a>
  </div>
</div>

{% endblock %}