<h1>Hola, <%= user.nombre %> 👋</h1>

<% if (!torneo) { %>
  <section class="card center">
    <p class="muted">No hay un torneo abierto en este momento. Vuelve pronto. ⚽</p>
  </section>
<% } else { %>
  <section class="card jackpot">
    <div class="label muted">Jackpot actual · <%= torneo.nombre %></div>
    <div class="amount"><%= fmt.dinero(jackpot.total, torneo.moneda) %></div>
    <div class="muted"><%= jackpot.cantidad %> quiniela(s) en juego</div>
  </section>

  <section class="card">
    <div class="section-title">
      <h2>Mis quinielas</h2>
      <span class="badge badge-<%= torneo.estado %>"><%= fmt.estadoLabel(torneo.estado) %></span>
    </div>

    <% if (quinielas.length === 0) { %>
      <p class="muted">Aún no tienes quinielas en este torneo.</p>
    <% } else { %>
      <table>
        <thead>
          <tr><th>Quiniela</th><th>Estado</th><th>Puntos</th><th>Pronósticos</th><th></th></tr>
        </thead>
        <tbody>
          <% quinielas.forEach(function (q) { %>
            <tr>
              <td><%= q.nombre || ('Quiniela (pendiente) #' + q.id) %></td>
              <td><span class="badge badge-<%= q.estado %>"><%= fmt.estadoLabel(q.estado) %></span></td>
              <td><strong><%= q.puntos %></strong></td>
              <td><%= q.pronosticos_hechos %><span class="muted">/<%= totalPartidos %></span></td>
              <td>
                <% if (q.estado === 'activa') { %>
                  <a class="btn btn-sm" href="/quiniela/<%= q.id %>/pronosticos">
                    <%= q.pronosticos_hechos > 0 ? 'Continuar' : 'Pronosticar' %>
                  </a>
                <% } %>
              </td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    <% } %>
  </section>

  <% if (torneo.estado === 'abierto') { %>
    <section class="card">
      <h2>Comprar quiniela</h2>
      <p class="muted">
        Cada quiniela cuesta <strong><%= fmt.dinero(torneo.precio_quiniela, torneo.moneda) %></strong>.
        Tras solicitarla, el administrador confirmará tu pago para activarla.
      </p>
      <form action="/comprar" method="post" class="row" style="align-items:flex-end">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
        <div class="field" style="margin:0">
          <label for="cantidad">¿Cuántas?</label>
          <input type="number" id="cantidad" name="cantidad" value="1" min="1" max="20" />
        </div>
        <div><button class="btn" type="submit">Solicitar compra</button></div>
      </form>
    </section>
  <% } %>

  <p class="center"><a class="btn btn-ghost" href="/leaderboard">Ver tabla de posiciones</a></p>
<% } %>
