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

<main class="app-main">
  <%- include('../partials/admin-nav') %>
  <section class="page-title">
    <p class="eyebrow">Compétitions suivies</p>
    <h1>Compétitions autorisées</h1>
    <p>Définissez les ligues/tournois que TopStats synchronise.</p>
  </section>

  <section class="glass-panel">
    <h2>Ajouter une compétition</h2>
    <form method="post" action="/admin/competitions" class="form-grid">
      <label>ID technique
        <input type="number" name="api_league_id" required placeholder="2">
      </label>
      <label>Nom
        <input type="text" name="name" required placeholder="UEFA Champions League">
      </label>
      <label>Pays
        <input type="text" name="country" required placeholder="Europe">
      </label>
      <label>Type
        <select name="type">
          <option value="europeen">européen</option>
          <option value="coupe_du_monde">coupe_du_monde</option>
          <option value="autre">autre</option>
        </select>
      </label>
      <label>Actif
        <select name="is_active">
          <option value="1">oui</option>
          <option value="0">non</option>
        </select>
      </label>
      <button class="btn btn-primary" type="submit">Enregistrer</button>
    </form>
  </section>

  <div class="table-card">
    <table>
      <thead><tr><th>ID</th><th>Nom</th><th>Pays</th><th>Type</th><th>Actif</th></tr></thead>
      <tbody>
        <% competitions.forEach((competition) => { %>
          <tr>
            <td><%= competition.api_league_id %></td>
            <td><%= competition.name %></td>
            <td><%= competition.country %></td>
            <td><%= competition.type %></td>
            <td><%= Number(competition.is_active) === 1 ? 'oui' : 'non' %></td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
</main>

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