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

{% block title %}
    {{ t!("book.index.title_tag") }}
{% endblock %}

{% block main %}
  {% call typography::heading(t!("book.index.title")) %}
    <a href="{{ router.download_csv_book_path() }}?{{ base_query }}" class="btn btn-info">
      <i class="fa fa-download me-2" aria-hidden="true"></i> {{ t!("common.download") }} (csv)
    </a>
  {% endcall %}

  {% call cards::card() %}
    <form method="get">
      <div class="row">
        <div class="col-md-3">
          <label for="title" class="form-label">{{ t!("book.attributes.title") }}</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">{{ t!("book.attributes.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">{{ t!("book.attributes.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">{{ t!("book.attributes.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='{{ t!("common.search") }}' class="btn btn-info w-100">
        </div>

        <div class="col-md-1 d-flex align-items-end">
          <a href="{{ router.root_path() }}" class="btn btn-light">{{ t!("common.reset") }}</a>
        </div>
      </div>
    </form>
  {% endcall %}

  {% call cards::card() %}
    {% if books_with_user.is_empty() %}
      <div class="d-flex flex-column align-items-center justify-content-center">
        <h2>{{ t!("common.no_result") }}</h2>

        <a class="btn btn-success text-white text-nowrap mt-3" href="{{ router.new_book_path() }}">
          {{ t!("book.new.button_short") }}
        </a>
      </div>
    {% else %}
      <table class="table table-hover">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">{{ t!("book.attributes.title") }}</th>
            <th scope="col">{{ t!("book.attributes.authors") }}</th>
            <th scope="col">{{ t!("book.attributes.owner") }}</th>
            <th scope="col">{{ t!("book.attributes.current_holder") }}</th>
            <th scope="col">{{ t!("common.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, t!("common.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="{{ router.root_path() }}?{{ base_query }}page={% if current_page > 1 %}{{ current_page - 1 }}{% else %}1{% endif %}">{{ t!("common.previous") }}</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="{{ router.root_path() }}?{{ 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="{{ router.root_path() }}?{{ base_query }}page={{ current_page + 1 }}">{{ t!("common.next") }}</a>
              </li>
            </ul>
          </nav>
        </div>
      {% endif %}
    
    {% endif %}
  {% endcall %}
{% endblock %}