{% 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">…</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">…</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 %}