{% extends "base.html" %}

{% block content %}

{% if not render_partial or render_partial == false %}
<div class="columns">
    <div class="column">
        <div class="buttons">
            <a class="button is-primary" href="create" hx-boost="true" hx-indicator="#loading">Create</a>

            <div class="dropdown is-hoverable">
                <div class="dropdown-trigger">
                    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
                        <span>With selected</span>
                        <span class="icon is-small">
                            <i class="fas fa-angle-down" aria-hidden="true"></i>
                        </span>
                    </button>
                </div>
                <div class="dropdown-menu" id="dropdown-menu4">
                    <div class="dropdown-content">
                        <div class="dropdown-item">
                            <a hx-include="#table_form" hx-target="#{{ entity_name }}table" href="#"
                                hx-indicator="#loading" hx-confirm="Are you sure?" hx-delete="delete">Delete</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form id="search_form" action="/admin/{{ entity_name }}/list" hx-boost="true" hx-indicator="#loading"
        hx-target="#{{ entity_name }}table" hx-trigger="reload_table from:#entities_per_page"
        hx-vals='{ "render_partial" : "true" }'>
        <input type="hidden" id="sort_by" name="sort_by" value="{{ sort_by }}">
        <input type="hidden" id="sort_order" name="sort_order" value="{{ sort_order }}">
        <div class="column is-narrow">
            <div class="field is-horizontal">
                {% if view_model.show_search %}
                <p class="control has-icons-left has-icons-right">
                    <input class="input is-rounded" type="search" id="search" value="{{ search }}" name="search"
                        placeholder="Search" hx-get="/admin/{{ entity_name }}/list"
                        hx-trigger="keyup changed delay:500ms, search">
                    <span class="icon is-small is-left">
                        <i class="fas fa-search"></i>
                    </span>
                </p>
                {% endif %}
                <div class="select">
                    <div class="ml-1 control has-icons-left has-icons-right">
                        <select id="entities_per_page" class="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>
                        <p class="help">Entities per Page</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
{% endif %}

<div id="{{ entity_name }}table">
    <div class="is-relative">
        {% include "loader.html" %}
        <form id="table_form" hx-indicator="#loading" hx-get="/admin/{{ entity_name }}/list"
        hx-vals='{ "render_partial" : "true" }' hx-target="#{{ entity_name }}table">
        <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 }}">
        <table class="table is-relative is-fullwidth is-hoverable is-striped">
            <thead>
                    <tr>
                        <th>
                            <input type="checkbox" onclick="checkAll(this)">
                        </th>
                        <th onclick="sort_by('{{ view_model.primary_key }}');" class="is-clickable">{{
                            view_model.primary_key | title }}
                            {% if sort_by == view_model.primary_key %}
                            {% if sort_order == "Asc" %}
                            <i class="ml-1 fa-solid fa-caret-up"></i>
                            {% elif sort_order == "Desc" %}
                            <i class="ml-1 fa-solid fa-caret-down"></i>
                            {% endif %}
                            {% endif %}
                        </th>
                        {% for model_field in view_model.fields | filter(attribute="list_hide_column", value=false) | sort(attribute="list_sort_position") -%}
                        <th onclick="sort_by('{{ model_field.field_name }}');" class="is-clickable">{{
                            model_field.field_name | split(pat="_") | join(sep=" ") | title }}
                            {% if sort_by == model_field.field_name %}
                            {% if sort_order == "Asc" %}
                            <i class="ml-1 fa-solid fa-caret-up"></i>
                            {% elif sort_order == "Desc" %}
                            <i class="ml-1 fa-solid fa-caret-down"></i>
                            {% endif %}
                            {% endif %}
                        </th>
                        {%- endfor %}
                        <th>
                            <!-- Edit Action -->
                            <!-- Delete Action -->
                        </th>
                    </tr>
                </form>
            </thead>
            <tbody hx-indicator="#loading" hx-boost="true">
                    {% for entity in entities -%}
                    <tr>
                        <td><input type="checkbox" name="ids" value="{{ entity.primary_key }}"></td>
                        <td>
                            <a href="show/{{ entity.primary_key }}">
                                <i class="fa-solid fa-magnifying-glass"></i> {{ entity.primary_key }}
                            </a>
                        </td>
                        {% for model_field in view_model.fields | filter(attribute="list_hide_column", value=false) | sort(attribute="list_sort_position") -%}
                        {% if model_field.field_type == "Checkbox" %}
                        <td>{{ entity.values | get(key=model_field.field_name) | get_icon | safe }}</td>
                        {% elif model_field.field_type == "FileUpload" %}
                        <td><a href="file/{{ entity.primary_key }}/{{ model_field.field_name }}">{{
                                entity.values
                                | get(key=model_field.field_name) }}</a></td>
                        {% else %}
                        <td>{{ entity.values | get(key=model_field.field_name) }}</td>
                        {% endif %}
                        {%- endfor %}
                        <td>
                            <a hx-target="body" href="edit/{{ entity.primary_key }}"><i class="fa-solid fa-pen-to-square"></i></a>
                            <a hx-target="closest tr" hx-confirm="Are you sure?"
                                hx-delete="delete/{{ entity.primary_key }}"><i class="fa-solid fa-trash"></i></a>
                        </td>
                    </tr>
                    {%- endfor %}
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="{{ view_model.fields | length + 3 }}">
                    </td>
                </tr>
            </tfoot>
        </table>
    </form>
    </div>
    <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 is-rounded is-centered" role="pagination"
        aria-label="pagination">
        {% if page > 1 %}
        <a href="?&page={{ page - 1 }}"
            class="pagination-previous left-arrow-click"><i class="fa-solid fa-arrow-left"></i>
        </a>
        {% endif %}
        {% if page < num_pages %} <a
            href="?page={{ page + 1 }}"
            class="pagination-next right-arrow-click"><i class="fa-solid fa-arrow-right"></i>
            </a>
            {% endif %}
            <ul class="pagination-list">
                <li>
                    <a class="pagination-link {% if page == 1 %}is-current{% endif %}"
                        href="?page={{ 1 }}"
                        aria-label="Goto page 1">1</a>
                </li>
                <li>
                    <span class="pagination-ellipsis">&hellip;</span>
                </li>
                {% for i in range(start=min_show_page,end=max_show_page) %}
                <li><a class="pagination-link {% if page == i+1 %}is-current{% endif %}"
                        aria-label="Goto page {{ i + 1 }}"
                        href="?page={{ i + 1 }}">{{
                        i + 1 }}</a></li>
                {%- endfor %}
                <li>
                    <span class="pagination-ellipsis">&hellip;</span>
                </li>
                <li>
                    <a href="?page={{ num_pages }}"
                        class="pagination-link is-rounded {% if page == num_pages %}is-current{% endif %}"
                        aria-label="Goto page {{ num_pages }}">{{ num_pages }} </a>
                </li>
            </ul>
    </nav>
</div>

{% if not render_partial or render_partial == false %}

{% endif %}

{% endblock content %}