{% extends 'layouts/base.html' %}
{% load static %}
{% load custom_tags %}

{% block extra_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'layouts/entity_list.css' %}">
{% endblock %}

{% block content %}
    <h1>{{ title }}</h1>

    {% block before_table %}{% endblock %}

    <div class="entity_search">
        <p>Busca geral</p>
        <!-- Search -->
        <form method="GET" action="{% url list_url %}">
            {% if query %}
                <a href="{% url list_url %}" class="btn-clear-filter">
                    {{ query }} <i class="fa-solid fa-xmark"></i>
                </a>
            {% endif %}

            <label for="search">Buscar</label>
            <input type="text" name="q" value="{{ query }}" required>
            <button type="submit">
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
            <!-- New -->
            <a class="new-entity-button" hx-get="{% url create_url %}" hx-swap="beforeend" hx-target="body">Novo <i class="fa-solid fa-plus"></i></a>
        </form>
    </div>

    {% if not object_list %}
        <p>Nenhum registro encontrado.</p>
    {% else %}
        {% block table %}
        <table>
            <tr>
                {% for col in columns %}
                    <th>{{ col.label }}</th>
                {% endfor %}
                <th>Editar</th>
                <th>Excluir</th>
            </tr>

            {% for obj in object_list %}
                <tr>
                    {% for col in columns %}
                        <td>
                            {{ obj|get_attr:col.field }}
                        </td>
                    {% endfor %}

                    <!-- Update -->
                    <td>
                        <a class="entity-update" hx-get="{% url edit_url obj.id %}" hx-swap="beforeend" hx-target="body">
                            <i class="fa-solid fa-pen-to-square"></i>
                        </a>
                    </td>

                    <!-- Delete -->
                    <td>
                        <a class="entity-delete" hx-get="{% url delete_url obj.id %}" hx-swap="beforeend" hx-target="body"><i class="fa-solid fa-trash"></i></a>
                    </td>
                </tr>
                {% endfor %}
        </table>
        {% endblock %}

        <!-- Pagination -->
        {% if is_paginated %}
            <div class="pagination">
                <div class="left">
                    {% if page_obj.has_previous %}
                        <a href="?page=1&q={{ query }}"><i class="fa-solid fa-angles-left"></i></a>
                        <a href="?page={{ page_obj.previous_page_number }}&q={{ query }}"><i class="fa-solid fa-angle-left"></i></a>
                    {% endif %}
                </div>

            
                <span class="center">
                    Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}
                </span>

                <div class="right">
                    {% if page_obj.has_next %}
                        <a href="?page={{ page_obj.next_page_number }}&q={{ query }}"><i class="fa-solid fa-angle-right"></i></a>
                        <a href="?page={{ page_obj.paginator.num_pages }}&q={{ query }}"><i class="fa-solid fa-angles-right"></i></a>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    {% endif %}

    {% block after_table %}{% endblock %}

{% endblock %}