{% 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="users">
          <thead>
            <tr>
              <!-- <th>ID</th> -->
              <th></th>
              <th>Naam</th>
              <th>E-mailadres</th>
              <th>Rollen</th>
              <th>Groepen</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
              {% for user in User.get_all_users() %}
              <tr>
                <!-- <td>{{ user.get_id() }}</td> -->
                <td>
                    <div class="avatar avatar-xl">
                        <img src="{{ user.get_gravatar() }}" alt="Avatar" />
                    </div>
                </td>
                <td>{{ user.get_name() }}</td>
                <td>{{ user.get_email() }}</td>
                <td>{{ ", ".join(user.get_roles(as_name=True)) }}</td>
                <td>{{ ", ".join(user.get_groups(sort_by_name=True, as_name=True)) }}</td>
                <td><a href="/user/{{ user.get_id() }}">
                    <button
                        type="button"
                        class="btn rounded-pill btn-outline-primary"
                    >
                        <i class="bi bi-eye"></i>
                    </button>
                </a></td>
              </tr>
              {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<!--Event Add Modal -->
<div
class="modal fade text-left"
id="modal-add-event"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel1"
aria-hidden="true"
>
  <div
    class="modal-dialog modal-dialog-scrollable"
    role="document"
  >
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel1">
          Gebruiker toevoegen
        </h5>
        <button
          type="button"
          class="close rounded-pill"
          data-bs-dismiss="modal"
          aria-label="Close"
        >
          <i data-feather="x"></i>
        </button>
      </div>
      <div class="modal-body">
        <form id="user-form" class="form">
          <h6>Naam</h6>
          <input
                type="text"
                class="form-control"
                id="input-name"
                name="input-name"
              />
          <hr class="w-25 m-top-3 m-bottom-3">
          <p class="card-text">
            <h6>E-mailadres</h6>
            <input
                type="text"
                class="form-control"
                id="input-email"
                name="input-email"
              />
            <hr class="w-25 m-top-3 m-bottom-3">

            <h6>Rollen</h6>
            <select
              class="choices form-select multiple-remove"
              multiple="multiple"
              id="input-roles"
              name="input-roles"
            >
            {% for role in Role.get_all_roles() %}
              <option value="{{ role.get_id() }}">{{ role.get_name() }}</option>
            {% endfor %}
            </select>

            <hr class="w-25 m-top-3 m-bottom-3">
            <h6>Groepen</h6>
            <select
              class="choices form-select multiple-remove"
              multiple="multiple"
              id="input-groups"
              name="input-groups"
            >
            {% for group in Group.get_all_groups() %}
              <option value="{{ group.get_id() }}">{{ group.get_name() }}</option>
            {% endfor %}
            </select>

          </p>
        </form>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn"
          data-bs-dismiss="modal"
        >
          <i class="bx bx-x d-block d-sm-none"></i>
          <span class="d-none d-sm-block">Annuleren</span>
        </button>
        <button
          type="button"
          class="btn btn-primary ms-1"
          data-bs-dismiss="modal"
        >
          <i class="bx bx-check d-block d-sm-none"></i>
          <span class="d-none d-sm-block">Toevoegen</span>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Event edit modals -->





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