<!doctype html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ wedstrijd.naam }} — Live scorebord</title>
  <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
  <style>
    :root {
      --accent: #043353;
      --accent-dark: #022238;
      --accent-light: #e8eef3;
      --rand: #e2e7ec;
      --achtergrond-zacht: #f7f9fa;
      --klasse-a: #9a3412;
      --klasse-a-licht: #ffedd5;
      --klasse-b: #166534;
      --klasse-b-licht: #dcfce7;
      --klasse-c: #854d0e;
      --klasse-c-licht: #fef9c3;
    }
    * { box-sizing: border-box; }
    html, body {
      height: 100%;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin: 0;
      padding: clamp(0.9rem, 0.6rem + 1vw, 2rem) clamp(1.25rem, 0.8rem + 1.5vw, 3rem);
      color: #16222c;
      background: #fff;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .scorebord-header {
      display: flex;
      align-items: center;
      gap: clamp(0.6rem, 0.4rem + 0.6vw, 1.1rem);
      margin-bottom: 0.1rem;
    }
    .scorebord-header img {
      height: clamp(1.75rem, 1.3rem + 1.3vw, 2.75rem);
      width: auto;
      border-radius: 8px;
      box-shadow: 0 0 0 2px rgba(4, 51, 83, 0.08);
    }
    .scorebord-header h1 {
      font-size: clamp(1.15rem, 0.9rem + 1vw, 1.75rem);
      margin: 0;
    }
    h2 {
      font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.35rem);
      margin: 0 0 0.4rem;
      color: #555;
      font-weight: 500;
    }
    #laatste-update {
      color: #999;
      font-size: clamp(0.7rem, 0.6rem + 0.2vw, 0.85rem);
      margin: 0.4rem 0 0;
    }
    #moeilijkste-baan-info {
      color: #555;
      font-size: clamp(0.85rem, 0.75rem + 0.3vw, 1.05rem);
      margin: 0 0 0.6rem;
    }
    #moeilijkste-baan-info:empty {
      display: none;
    }
    .table-wrap {
      overflow: hidden;
      border: 1px solid var(--rand);
      border-radius: 10px;
      flex: 1;
      min-height: 0;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      table-layout: fixed;
      font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.35rem);
    }
    th, td {
      border-bottom: 1px solid var(--rand);
      padding: clamp(0.35rem, 0.25rem + 0.3vw, 0.65rem) clamp(0.6rem, 0.5rem + 0.4vw, 1rem);
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    th {
      background: var(--achtergrond-zacht);
      text-transform: uppercase;
      font-size: 0.65em;
      letter-spacing: 0.03em;
      color: #666;
    }
    th:nth-child(1), td:nth-child(1) { width: 14%; }
    th:nth-child(3), td:nth-child(3) { width: 14%; }
    th:nth-child(4), td:nth-child(4) { width: 18%; }
    th:nth-child(5), td:nth-child(5) { width: 16%; }
    tbody tr:nth-child(even) {
      background: var(--achtergrond-zacht);
    }
    td.plek-cel {
      font-weight: 700;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 0.2em 0.7em;
      border-radius: 999px;
      font-size: 0.75em;
      font-weight: 700;
    }
    .badge-a { background: var(--klasse-a-licht); color: var(--klasse-a); }
    .badge-b { background: var(--klasse-b-licht); color: var(--klasse-b); }
    .badge-c { background: var(--klasse-c-licht); color: var(--klasse-c); }

    #pagina-indicator {
      display: flex;
      justify-content: center;
      gap: 0.4rem;
      margin-top: 0.6rem;
    }
    .pagina-dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 999px;
      background: var(--rand);
    }
    .pagina-dot.actief {
      background: var(--accent);
    }
  </style>
</head>
<body>
  <div class="scorebord-header">
    {% if logo_bestand %}
      <img src="{{ url_for('instellingen.logo', bestandsnaam=logo_bestand) }}" alt="">
    {% else %}
      <img src="{{ url_for('static', filename='favicon.svg') }}" alt="">
    {% endif %}
    <h1>{{ vereniging_naam }}</h1>
  </div>
  <h2>{{ wedstrijd.naam }} — live tussenstand</h2>
  <p id="moeilijkste-baan-info"></p>

  <div class="table-wrap">
    <table id="scorebord-tabel">
      <thead>
        <tr><th>Plek</th><th>Naam</th><th>Totaal</th><th>Totaal 2e schot</th><th>Klasse</th></tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>

  <div id="pagina-indicator" hidden></div>
  <p id="laatste-update">Bezig met laden...</p>

  <script>
    const WEDSTRIJD_ID = {{ wedstrijd.id | tojson }};
    const VERVERS_INTERVAL_MS = 5000;
    const PAGINA_INTERVAL_MS = 8000;
    const RIJEN_PER_PAGINA = 14;

    let ranking = [];
    let paginaIndex = 0;

    function bouwRij(deelnemer) {
      const tr = document.createElement('tr');
      const plekTekst = deelnemer.gedeeld ? `${deelnemer.plek} (gedeeld)` : `${deelnemer.plek}`;
      const gewoneCellen = [
        { waarde: plekTekst, klasse: 'plek-cel' },
        { waarde: deelnemer.naam, klasse: '' },
        { waarde: deelnemer.totaal, klasse: '' },
        { waarde: deelnemer.totaal_tweede_schot, klasse: '' },
      ];
      gewoneCellen.forEach((cel) => {
        const td = document.createElement('td');
        td.textContent = cel.waarde;
        if (cel.klasse) td.className = cel.klasse;
        tr.appendChild(td);
      });

      const klasseTd = document.createElement('td');
      const klasseLetter = (deelnemer.klasse || '').charAt(0).toLowerCase();
      const klasseBadge = document.createElement('span');
      klasseBadge.className = `badge badge-${klasseLetter}`;
      klasseBadge.textContent = deelnemer.klasse;
      klasseTd.appendChild(klasseBadge);
      tr.appendChild(klasseTd);

      return tr;
    }

    function renderPagina() {
      const totaalPaginas = Math.max(1, Math.ceil(ranking.length / RIJEN_PER_PAGINA));
      if (paginaIndex >= totaalPaginas) paginaIndex = 0;

      const tbody = document.querySelector('#scorebord-tabel tbody');
      tbody.innerHTML = '';
      const start = paginaIndex * RIJEN_PER_PAGINA;
      ranking.slice(start, start + RIJEN_PER_PAGINA).forEach((deelnemer) => {
        tbody.appendChild(bouwRij(deelnemer));
      });

      const indicator = document.getElementById('pagina-indicator');
      indicator.innerHTML = '';
      if (totaalPaginas <= 1) {
        indicator.hidden = true;
      } else {
        indicator.hidden = false;
        for (let i = 0; i < totaalPaginas; i += 1) {
          const dot = document.createElement('span');
          dot.className = 'pagina-dot' + (i === paginaIndex ? ' actief' : '');
          indicator.appendChild(dot);
        }
      }
    }

    function ververs() {
      fetch(`/wedstrijden/${WEDSTRIJD_ID}/tussenstand.json`)
        .then((response) => response.json())
        .then((data) => {
          ranking = data.ranking;
          renderPagina();

          const infoEl = document.getElementById('moeilijkste-baan-info');
          if (data.moeilijkste_baan) {
            infoEl.textContent =
              `Moeilijkste baan op dit moment: Baan ${data.moeilijkste_baan.volgnummer} (${data.moeilijkste_baan.discipline})`;
          } else {
            infoEl.textContent = '';
          }

          document.getElementById('laatste-update').textContent =
            'Laatst bijgewerkt: ' + new Date().toLocaleTimeString('nl-NL');
        })
        .catch(() => {
          document.getElementById('laatste-update').textContent =
            'Kon geen verbinding maken met de server. Nieuwe poging over ' + (VERVERS_INTERVAL_MS / 1000) + ' seconden...';
        });
    }

    ververs();
    setInterval(ververs, VERVERS_INTERVAL_MS);
    setInterval(() => {
      paginaIndex += 1;
      renderPagina();
    }, PAGINA_INTERVAL_MS);
  </script>
</body>
</html>
