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

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <% Object.keys(riegen).forEach((riegennummer, index) => { %>
    <li class="nav-item" role="presentation">
      <button class="nav-link <%= index === 0 ? 'active' : '' %>" id="tab-<%= riegennummer %>" data-bs-toggle="tab" data-bs-target="#riege-<%= riegennummer %>" type="button" role="tab" aria-controls="riege-<%= riegennummer %>" aria-selected="<%= index === 0 ? 'true' : 'false' %>">Riege <%= riegennummer %></button>
    </li>
  <% }) %>
</ul>

<!-- Tab panes -->
<div class="tab-content" id="myTabContent">
  <% Object.keys(riegen).forEach((riegennummer, index) => { %>
    <div class="tab-pane fade <%= index === 0 ? 'show active' : '' %>" id="riege-<%= riegennummer %>" role="tabpanel" aria-labelledby="tab-<%= riegennummer %>">
      <h3>
      <% riegen[riegennummer].forEach(teilnehmer => { if(teilnehmer.helfer) { %> <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.name %></strong> (<%= teilnehmer.age %> Jahre)</a> <% }}) %>
      </h3>
      <ul class="list-group list-group-flush">
        
          <% riegen[riegennummer].forEach(teilnehmer => { if(!teilnehmer.helfer) { %> <li> <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.name %></strong> (<%= teilnehmer.age %> Jahre)</a> </li> <% }}) %>
      </ul>
    </div>
  <% }) %>
</div>

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