{% extends "base.html" %}

{% block content %}

{% if not render_partial or render_partial == false %}
<div class="row">
    <aside id="nav_aside" class="col-2 {% if not view_model.default_show_aside %}d-none{% endif %}">
        {% include "list/filter.html" %}
    </aside>

    <div class="col">
        <div class="row">
            <div class="col">
                <div class="btn-group">
                    <a class="btn btn-primary" href="{{ base_path }}/{{ entity_name }}/create" hx-boost="true"
                        hx-indicator="#loading"><i class="fa-solid fa-circle-plus"></i></a>
                    {% if viewmodel_filter | length > 0 %}
                    <button class="btn btn-secondary" onclick="toggle_hidden('nav_aside')"><i
                            class="fa-solid fa-filter"></i></button>
                    {% endif %}
                    <div class="btn-group" role="group">
                        <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa-solid fa-list"></i>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <li><a class="dropdown-item" hx-include="[id='filter_form'], [id='table_form']" hx-vals='{ 
                            "search" : "{{ search }}",
                            "sort_by" : "{{ sort_by }}",
                            "sort_order" : "{{ sort_order }}"
                        }' hx-indicator="#loading" href="export_csv">Export as CSV</a></li>
                            <hr class="dropdown-divider">
                            <li><a class="dropdown-item" hx-include="#table_form" hx-target="#{{ entity_name }}table"
                                    href="#" hx-indicator="#loading" hx-confirm="Are you sure?"
                                    hx-delete="delete">Delete</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col">
                <form id="search_form" action="{{ base_path }}/{{ entity_name }}/list" hx-boost="true"
                    hx-indicator="#loading" hx-target="#{{ entity_name }}table"
                    hx-trigger="reload_table from:#entities_per_page" hx-include="[id='filter_form']">
                    <input type="hidden" id="sort_by" name="sort_by" value="{{ sort_by }}">
                    <input type="hidden" id="sort_order" name="sort_order" value="{{ sort_order }}">
                    <input type="hidden" name="page" value="{{ page }}">
                    <div class="col-auto">
                        <div class="row">
                            {% if view_model.show_search %}
                            <div class="col">
                                <div class="input-group">
                                    <input class="form-control rounded" type="search" id="search" value="{{ search }}"
                                        name="search" placeholder="Search"
                                        hx-get="{{ base_path }}/{{ entity_name }}/list"
                                        hx-trigger="keyup changed delay:500ms, search">
                                    <span class="input-group-text">
                                        <i class="fas fa-search"></i>
                                    </span>
                                </div>
                            </div>
                            {% endif %}
                            <div class="col-auto ms-auto">
                                <div class="input-group">
                                    <select id="entities_per_page" class="form-select" name="entities_per_page"
                                        onchange="this.dispatchEvent(new Event('reload_table'));">
                                        {% for a in [10,20,50,100,] %}
                                        <option {% if entities_per_page==a %}selected{% endif %} value="{{ a }}">{{ a }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                    <label class="input-group-text">Entities per Page</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        {% endif %}

        <div id="{{ entity_name }}table">
            <div class="position-relative">
                <form id="table_form" hx-indicator="#loading" hx-get="{{ base_path }}/{{ entity_name }}/list"
                    hx-target="#{{ entity_name }}table" hx-include="[id='filter_form']">
                    <input type="hidden" id="sort_by" name="sort_by" value="{{ sort_by }}">
                    <input type="hidden" id="sort_order" name="sort_order" value="{{ sort_order }}">
                    <input type="hidden" name="entities_per_page" value="{{ entities_per_page }}">
                    <input type="hidden" name="search" value="{{ search }}">
                    <input type="hidden" name="page" value="{{ page }}">
                </form>
                <table class="table table-hover table-striped">
                    {% include "list/header.html" %}
                    <tbody hx-indicator="#loading" hx-boost="true">
                        {% for entity in entities -%}
                        {% include "list/row.html" %}
                        {%- endfor %}
                    </tbody>
                </table>
                </form>
            </div>
            {% if num_pages > 1 %}
            <nav hx-boost="true" hx-push-url="true" hx-target="#{{ entity_name }}table" hx-vals='{ 
            "entities_per_page" : "{{ entities_per_page }}",
            "search" : "{{ search }}",
            "sort_by" : "{{ sort_by }}",
            "sort_order" : "{{ sort_order }}",
            "render_partial" : "true"
        }' hx-indicator="#loading" class="pagination justify-content-center" role="pagination" aria-label="pagination">
                <ul class="pagination">
                    {% if page > 1 %}
                    <li>
                    <a href="{{ base_path }}/{{ entity_name }}/list?&page={{ page - 1 }}" class="page-link left-arrow-click"
                        aria-label="Previous"><i class="fa-solid fa-arrow-left"></i>
                    </a>
                    </li>
                    {% endif %}
                    <li class="page-item">
                        <a class="page-link pagination-link {% if page == 1 %}active{% endif %}"
                            href="{{ base_path }}/{{ entity_name }}/list?page={{ 1 }}" aria-label="Goto page 1">1</a>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link">&hellip;</span>
                    </li>
                    {% for i in range(start=min_show_page,end=max_show_page) %}
                    <li class="page-item"><a class="page-link pagination-link {% if page == i+1 %}active{% endif %}"
                            aria-label="Goto page {{ i + 1 }}"
                            href="{{ base_path }}/{{ entity_name }}/list?page={{ i + 1 }}">{{
                            i + 1 }}</a></li>
                    {%- endfor %}
                    <li class="page-item disabled">
                        <span class="page-link pagination-link">&hellip;</span>
                    </li>
                    <li class="page-item">
                        <a href="{{ base_path }}/{{ entity_name }}/list?page={{ num_pages }}"
                            class="page-link pagination-link {% if page == num_pages %}active{% endif %}"
                            aria-label="Goto page {{ num_pages }}">{{ num_pages }} </a>
                    </li>
                    {% if page < num_pages %} <li><a href="{{ base_path }}/{{ entity_name }}/list?page={{ page + 1 }}"
                        class="page-link right-arrow-click" aria-label="Next"><i class="fa-solid fa-arrow-right"></i>
                        </a></li>
                        {% endif %}
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
</div>
{% endblock content %}