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

<main class="app-main profile-app">
  <section class="profile-app-identity" aria-label="Profil">
    <span class="profile-app-avatar" aria-hidden="true">
      <img src="/assets/topstats-robot-cutout.png" alt="">
    </span>
    <div>
      <h1><%= currentUser.name %></h1>
      <p>Pack <%= subscriptionLabel === 'Pro' ? 'PRO' : 'gratuit' %> · compte connecté</p>
      <small><%= currentUser.email %></small>
    </div>
  </section>

  <section class="profile-app-subscription <%= subscriptionLabel === 'Pro' ? 'is-pro' : 'is-free' %>">
    <span class="profile-app-pill"><%= subscriptionLabel === 'Pro' ? 'PRO activo' : 'Gratis' %></span>
    <div class="profile-app-subscription-main">
      <div>
        <h2><%= subscriptionLabel === 'Pro' ? 'Votre accès premium est actif.' : 'Débloquez les meilleurs signaux.' %></h2>
        <% if (subscriptionLabel === 'Pro' && subscription && subscription.current_period_end) { %>
          <p>Renouvellement : <%= formatDate(subscription.current_period_end) %></p>
        <% } else if (subscriptionLabel === 'Pro') { %>
          <p>Renouvellement non renseigné pour le moment.</p>
        <% } else { %>
          <p>Le gratuit affiche les avis prudents jusqu’à 1.45. Les cotes plus hautes, le chat et les analyses complètes sont réservés aux membres PRO.</p>
        <% } %>
      </div>
      <span class="profile-app-crown" aria-hidden="true">
        <svg viewBox="0 0 24 24" focusable="false">
          <path d="m3.5 8 4.2 3.4L12 4l4.3 7.4L20.5 8l-1.7 10.2H5.2L3.5 8z"></path>
          <path d="M5.7 21h12.6"></path>
        </svg>
      </span>
    </div>
    <div class="profile-app-access-note">
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
        <path d="M9 12.5 11 14.5 15.5 9.5"></path>
        <path d="M12 3.5 14.6 5.2 17.7 5.1 18.8 8 21.2 10 20.4 13 21.2 16 18.8 18 17.7 20.9 14.6 20.8 12 22.5 9.4 20.8 6.3 20.9 5.2 18 2.8 16 3.6 13 2.8 10 5.2 8 6.3 5.1 9.4 5.2 12 3.5z"></path>
      </svg>
      <span><%= subscriptionLabel === 'Pro' ? 'Accès complet actif sur les recommandations, le chat et les alertes.' : 'Passez PRO pour débloquer tous les signaux et le chat TopStats.' %></span>
    </div>
    <a class="btn btn-primary profile-app-primary" href="/pro"><%= subscriptionLabel === 'Pro' ? 'Gérer TopStats PRO' : 'Passer PRO' %></a>
  </section>

  <section class="profile-app-section">
    <h2>Cuenta</h2>
    <div class="profile-app-menu">
      <a class="profile-app-row" href="/mon-compte">
        <span class="profile-app-row-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path><path d="M4 21a8 8 0 0 1 16 0"></path><path d="M18.5 4.5 20 6l-4.5 4.5"></path></svg>
        </span>
        <span>Mon compte</span>
        <em aria-hidden="true">›</em>
      </a>
      <a class="profile-app-row" href="/recommendations">
        <span class="profile-app-row-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="3"></circle><path d="M12 2v4"></path><path d="M12 18v4"></path><path d="M2 12h4"></path><path d="M18 12h4"></path></svg>
        </span>
        <span>Consejos del día</span>
        <em aria-hidden="true">›</em>
      </a>
      <a class="profile-app-row" href="/historique-neo">
        <span class="profile-app-row-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false"><path d="M5 5.5h14"></path><path d="M5 12h14"></path><path d="M5 18.5h9"></path><path d="M3 5.5h.01"></path><path d="M3 12h.01"></path><path d="M3 18.5h.01"></path></svg>
        </span>
        <span>Historial TopStats</span>
        <em aria-hidden="true">›</em>
      </a>
      <% if (currentUser.role === 'admin') { %>
        <a class="profile-app-row" href="/admin">
          <span class="profile-app-row-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" focusable="false"><path d="M4 19V5"></path><path d="M4 5h10l.5 4H20v10H4"></path></svg>
          </span>
          <span>Espace admin</span>
          <em aria-hidden="true">›</em>
        </a>
      <% } %>
      <form class="profile-app-row-form" method="post" action="/deconnexion">
        <button class="profile-app-row" type="submit">
          <span class="profile-app-row-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" focusable="false"><path d="M14 8V5a2 2 0 0 0-2-2H5v18h7a2 2 0 0 0 2-2v-3"></path><path d="M9 12h12"></path><path d="M17 8l4 4-4 4"></path></svg>
          </span>
          <span>Déconnexion</span>
          <em aria-hidden="true">›</em>
        </button>
      </form>
    </div>
  </section>
</main>

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