<%- include('partials/header') %>
  <h1>Teilnehmende</h1>



  <table id="teilnehmendeTabelle">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Vorname</th>
      <th onclick="sortTable(1)">Nachname</th>
      <th onclick="sortTable(2)">Alter</th>
      <th onclick="sortTable(3)">Teilnahmen</th>
    </tr>
  </thead>
  <tbody>
    <% teilnehmende.forEach(teilnehmer => { %>
      <tr>
        <td>
          <% if (teilnehmer.helfer) { %>
            <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.vorname %> <%= teilnehmer.hasBirthday == 2 ? '🎂🎂' : '' %><%= teilnehmer.hasBirthday == 1 ? '🎂' : '' %></strong></a>
          <% } else { %>
            <a href="/mitglied/<%= teilnehmer.id %>"><%= teilnehmer.vorname %> <%= teilnehmer.hasBirthday == 2 ? '🎂🎂' : '' %><%= teilnehmer.hasBirthday == 1 ? '🎂' : '' %></a>
          <% } %>
        </td>
        <td>
          <% if (teilnehmer.helfer) { %>
            <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.nachname %></strong></a>
          <% } else { %>
            <a href="/mitglied/<%= teilnehmer.id %>"><%= teilnehmer.nachname %></a>
          <% } %>
        </td>
        <td><%= teilnehmer.age %> Jahre</td>
        <td> 
          <% if (teilnehmer.probe) { %>
            <span style="color: <%= teilnehmer.anwesenheit <= 3 ? 'green' : 'red' %>">
            <% } %>
            <%= teilnehmer.anwesenheit %>
          </span>
        </td>
      </tr>
    <% }) %>
  </tbody>
</table>

<script>
function sortTable(spaltenIndex) {
  const table = document.getElementById("teilnehmendeTabelle");
  let rows = Array.from(table.rows).slice(1); // Überschrift auslassen
  let isAscending = table.getAttribute('data-sort') === 'asc';

  rows.sort((rowA, rowB) => {
    let cellA = rowA.cells[spaltenIndex].innerText.trim();
    let cellB = rowB.cells[spaltenIndex].innerText.trim();

    // Überprüfen, ob die Zellen numerisch sind
    let numA = parseFloat(cellA);
    let numB = parseFloat(cellB);

    // Wenn beide Zahlen sind, sortiere numerisch
    if (!isNaN(numA) && !isNaN(numB)) {
      return isAscending ? numA - numB : numB - numA;
    }

    // Andernfalls sortiere alphabetisch
    if (cellA < cellB) return isAscending ? -1 : 1;
    if (cellA > cellB) return isAscending ? 1 : -1;
    return 0;
  });

  // Tabelle neu anordnen
  rows.forEach(row => table.tBodies[0].appendChild(row));

  // Sortierrichtung ändern
  table.setAttribute('data-sort', isAscending ? 'desc' : 'asc');
}
</script>


</body>
</html>

<%- include('partials/footer') %>