{% 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 hx-include="#checked-rows" hx-target="#{{ entity_name }}table" 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 href="#" hx-indicator="#loading" hx-confirm="Are you sure?" hx-delete="delete">Delete</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column is-narrow">
        {% if view_model.show_search %}
        <div class="field">
            <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?render_partial=true&entities_per_page={{ entities_per_page }}&page={{ page }}&sort_by={{ sort_by }}&sort_order={{ sort_order }}"
                    hx-trigger="keyup changed delay:500ms, search" hx-target="#{{ entity_name }}table"
                    hx-indicator="#loading">
                <span class="icon is-small is-left">
                    <i class="fas fa-search"></i>
                </span>
            </p>
        </div>
        {% endif %}
    </div>
    <div class="column is-narrow">
        <div>
            <form id="search_form" hx-boost="true" hx-indicator="#loading">
                <input type="hidden" value="{{ search }}" name="search">
                <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="select">
                    <div class="control has-icons-left has-icons-right">
                        <select class="select" name="entities_per_page" onchange="this.form.submit()">
                            {% 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>
            </form>
        </div>
    </div>
</div>

{% endif %}

<div id="{{ entity_name }}table">
    <form id="checked-rows">
        <div class="is-relative">
            {% include "loader.html" %}
            <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 == "{{ sort_order_asc }}" %}
                            <i class="ml-1 fa-solid fa-caret-up"></i>
                            {% elif sort_order == "{{ sort_order_desc }}" %}
                            <i class="ml-1 fa-solid fa-caret-down"></i>
                            {% endif %}
                            {% endif %}
                        </th>
                        {% for model_field in view_model.fields -%}
                        <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 == "{{ sort_order_asc }}" %}
                            <i class="ml-1 fa-solid fa-caret-up"></i>
                            {% elif sort_order == "{{ sort_order_desc }}" %}
                            <i class="ml-1 fa-solid fa-caret-down"></i>
                            {% endif %}
                            {% endif %}
                        </th>
                        {%- endfor %}
                        <th>
                            <!-- Edit Action -->
                            <!-- Delete Action -->
                        </th>
                    </tr>
                </thead>
                <tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-indicator="#loading" hx-swap="outerHTML">
                    {% 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 -%}
                        {% 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 href="edit/{{ entity.primary_key }}"><i class="fa-solid fa-pen-to-square"></i></a>
                            <a 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>
        </div>
    </form>
    <nav hx-boost="true" hx-indicator="#loading" class="pagination is-rounded is-centered" role="pagination"
        aria-label="pagination">
        {% if page > 1 %}
        <a href="?page={{ page - 1 }}&entities_per_page={{ entities_per_page }}&search={{ search }}"
            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 }}&entities_per_page={{ entities_per_page }}&search={{ search }}"
            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 }}&entities_per_page={{ entities_per_page }}&search={{ search }}"
                        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 }}&entities_per_page={{ entities_per_page }}&search={{ search }}">{{
                        i + 1 }}</a></li>
                {%- endfor %}
                <li>
                    <span class="pagination-ellipsis">&hellip;</span>
                </li>
                <li>
                    <a href="?page={{ num_pages }}&entities_per_page={{ entities_per_page }}&search={{ search }}"
                        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 %}