{% extends "base.html" %}
{% import "components/typography.html" as typography %}
{% import "components/dropdown.html" as dropdown %}
{% import "components/cards.html" as cards %}

{% block main %}
  {{ typography::heading("All books") }}

  {% call cards::card() %}
    <form method="get">
      <div class="row">
        <div class="col-md-3">
          <label for="title" class="form-label">Name</label>
          {% match query.title %}
            {% when Some with (value) %}
              <input type="text" name="title" value="{{ value }}" class="form-control" placeholder="Ex: La liberte ou rien">
            {% when None %}
              <input type="text" name="title" class="form-control" placeholder="Ex: La liberte ou rien">
          {% endmatch %}
        </div>

        <div class="col-md-3">
          <label for="authors" class="form-label">Authors</label>

          {% match query.authors %}
            {% when Some with (value) %}
              <input type="text" name="authors" value="{{ value }}" class="form-control" placeholder="Ex: Emma Goldmann">
            {% when None %}
              <input type="text" name="authors" class="form-control" placeholder="Ex: Emma Goldmann">
          {% endmatch %}
        </div>

        <div class="col-md-2">
          <label for="owner_id" class="form-label">Owner</label>

          <select name="owner_id" class="form-select">
            <option></option>
            {% match query.owner_id %}
            {% when Some with (owner_id) %}
              {% for user in users %}
                {% if *owner_id == user.id %}
                  <option value="{{ user.id }}" selected>{{ user.name }}</option>
                {% else %}
                  <option value="{{ user.id }}">{{ user.name }}</option>
                {% endif %}
              {% endfor %}
            {% when None %}
              {% for user in users %}
                <option value="{{ user.id }}">{{ user.name }}</option>
              {% endfor %}
            {% endmatch %}
          </select>
        </div>

        <div class="col-md-2">
          <label for="current_holder_id" class="form-label">Current Holder</label>

          <select name="current_holder_id" class="form-select">
            <option></option>
            {% match query.current_holder_id %}
            {% when Some with (current_holder_id) %}
              {% for user in users %}
                {% if *current_holder_id == user.id %}
                  <option value="{{ user.id }}" selected>{{ user.name }}</option>
                {% else %}
                  <option value="{{ user.id }}">{{ user.name }}</option>
                {% endif %}
              {% endfor %}
            {% when None %}
              {% for user in users %}
                <option value="{{ user.id }}">{{ user.name }}</option>
              {% endfor %}
            {% endmatch %}
          </select>
        </div>

        <div class="col-md-1 d-flex align-items-end">
          <input type="submit" value="Search" class="btn btn-info w-100">
        </div>

        <div class="col-md-1 d-flex align-items-end">
          <a href="/" class="btn btn-light">Reset</a>
        </div>
      </div>
    </form>
  {% endcall %}

  {% call cards::card() %}
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Name</th>
          <th scope="col">Author(s)</th>
          <th scope="col">Owner</th>
          <th scope="col">Current Holder</th>
          <th scope="col">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for book_user in books_with_user %}
        <tr class="align-middle">
          <th scope="row">{{ book_user.book.id }}</th>
          <td>{{ book_user.book.title }}</td>
          <td>{{ book_user.book.authors }}</td>
          <td>{{ book_user.owner.name }}</td>
          <td>
            {% match book_user.current_holder %}
            {% when Some with (current_holder) %}
              {{ current_holder.name }}
            {% when None %}
              -
            {% endmatch %}
          </td>
          <td>
            {{ dropdown::crud_dropdown_button(book_user.book, "Actions", "books") }}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    
    {% if total_page > 1 %}
      <div class="d-flex justify-content-center mt-1">
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li class="page-item {% if current_page <= 1 %}disabled{% endif %}">
              <a class="page-link" href="/?{{ base_query }}page={% if current_page > 1 %}{{ current_page - 1 }}{% else %}1{% endif %}">Prev</a>
            </li>
        
            {% for page in 1..(total_page + 1) %}
              {% if page >= current_page - 1 && page <= current_page + 1 %}
                <li class="page-item {% if page == current_page %}active{% endif %}">
                  <a class="page-link" href="/?{{ base_query }}page={{ page }}">{{ page }}</a>
                </li>
              {% endif %}
            {% endfor %}

            <li class="page-item {% if current_page == total_page %}disabled{% endif %}">
              <a class="page-link" href="/?{{ base_query }}page={{ current_page + 1 }}">Next</a>
            </li>
          </ul>
        </nav>
      </div>
    {% endif %}
  {% endcall %}
{% endblock %}