{% extends "base.html" %}

{% block title %}Users{% endblock %}

{% block users_active %}active{% endblock %}

{% block content %}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal">
  Add User
</button>

<!-- Modal -->
<div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" action="/form_add_user">
        <div class="modal-header">
          <h5 class="modal-title" id="userModalLabel">Add User</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control" id="username" name="username" placeholder="Username">
          </div>
          <div class="mb-3">
            <label for="first_name" class="form-label">First Name</label>
            <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
          </div>
          <div class="mb-3">
            <label for="last_name" class="form-label">Last Name</label>
            <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">Email address</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com">
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" name="password">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Add</button>
        </div>
      </form>
    </div>
  </div>
</div>

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Username</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    {% for user in users %}
    <tr style="vertical-align: middle;">
      <th scope="row">{{ loop.index1 }}</th>
      <td>{{ user.username }}</td>
      <td>{{ user.first_name }}</td>
      <td>{{ user.last_name }}</td>
      <td>{{ user.email }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

{% if exists("pagination") %}
<ul class="pagination">
  {% if existsIn(pagination, "previous") %}
  <li class="page-item">
    <a class="page-link" href="/users/{{ pagination.previous }}" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
    </a>
  </li>
  {% else %}
  <li class="page-item disabled">
    <a class="page-link" href="#" aria-label="Previous">
      <span aria-hidden="true">&laquo;</span>
    </a>
  </li>
  {% endif %}
  {% if existsIn(pagination, "left_ellipsis") %}
  <li class="page-item"><a class="page-link" href="/users/1">1</a></li>
  <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
  {% endif %}
  {% for page in pagination.pages_left %}
  <li class="page-item"><a class="page-link" href="/users/{{ page }}">{{ page }}</a></li>
  {% endfor %}
  <li class="page-item active" aria-current="page"><a class="page-link" href="/users/{{ pagination.current }}">{{ pagination.current }}</a></li>
  {% for page in pagination.pages_right %}
  <li class="page-item"><a class="page-link" href="/users/{{ page }}">{{ page }}</a></li>
  {% endfor %}
  {% if existsIn(pagination, "right_ellipsis") %}
  <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
  <li class="page-item"><a class="page-link" href="/users/{{ pagination.total }}">{{ pagination.total }}</a></li>
  {% endif %}
  {% if existsIn(pagination, "next") %}
  <li class="page-item">
    <a class="page-link" href="/users/{{ pagination.next }}" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
    </a>
  </li>
  {% else %}
  <li class="page-item disabled">
    <a class="page-link" href="#" aria-label="Next">
      <span aria-hidden="true">&raquo;</span>
    </a>
  </li>
  {% endif %}
</ul>
{% endif %}
{% endblock %}