{% extends "base.html" %}
{% block head %}
  {{ super() }}
<link
  rel="stylesheet"
  href="assets/extensions/datatables.net-bs5/css/dataTables.bootstrap5.min.css"
/>

<link
  rel="stylesheet"
  href="./assets/compiled/css/table-datatable-jquery.css"
/>

<script src="assets/extensions/jquery/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/dt-1.12.1/datatables.min.js"></script>
{% endblock %}
{% block content %}
<section class="section">
  <div class="card p-0">
    <div class="card-header">
      <div class="container m-0">
        <div class="row align-items-left">
          <div class="col">
          </div>
          <div class="col-auto pl-auto">
            <!-- <button
              type="button"
              class="btn rounded-pill btn-outline-primary"
              data-bs-toggle="modal"
              data-bs-target="#modal-add-event"
            >
              <i class="bi bi-plus-lg"></i>
            </button> -->
          </div>
        </div>
      </div>
    </div>
    

    
    <div class="card-body">
      <div class="table-responsive">
        <table class="table" id="members">
          <thead>
            <tr>
              <th>Naam</th>
              <th>Email</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
              <!--  -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>


<!-- Event edit modals -->





<script>
  $(document).ready(function () {
    let jquery_datatable = $('#members').DataTable({
          order: [[0, 'asc']],
          pageLength: 25,
          lengthMenu: [ 25, 50, 75, 100 ],
          language: {
              url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/nl-NL.json',
          },
          ajax: "/api/members",
          columns: [
            { data: 'naam' },
            { data: 'email' },
            { data: 'view' }
          ],
      });
  
    const setTableColor = () => {
      document.querySelectorAll('.dataTables_paginate .pagination').forEach(dt => {
          dt.classList.add('pagination-primary')
      })
    }
    setTableColor()
    jquery_datatable.on('draw', setTableColor)
  });
  </script>
{% endblock %}