{% 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">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-confirm="Are you sure?" hx-delete="delete">Delete</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column is-narrow">
        <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 }}"
                    hx-trigger="keyup changed delay:500ms, search" hx-target="#{{ entity_name }}table"
                    hx-indicator=".htmx-indicator">
                <span class="icon is-small is-left">
                    <i class="fas fa-search"></i>
                </span>
            </p>
        </div>
    </div>
    <div class="column is-narrow">
        <div>
            <form>
                <input type="hidden" value="{{ search }}" name="search">
                <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">
        <table class="table is-fullwidth is-hoverable">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" onclick="checkAll(this)">
                    </th>
                    <th>{{ view_model.primary_key | title }}</th>
                    {% for model_field in view_model.fields -%}
                    <th>{{ model_field.field_name | split(pat="_") | join(sep=" ") | title }}</th>
                    {%- endfor %}
                    <th>
                        <!-- Edit Action -->
                        <!-- Delete Action -->
                    </th>
                </tr>
            </thead>
            <tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML">
                {% for entity in entities -%}
                <tr>
                    <td><input type="checkbox" name="ids" value="{{ entity.primary_key }}"></td>
                    <td>{{ entity.primary_key }}</td>
                    {% for model_field in view_model.fields -%}
                    <td>{{ entity.values | get(key=model_field.field_name) }}</td>
                    {%- 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>
    </form>
    <nav class="pagination" aria-label="pagination">
        <a href="?page={{ page - 1 }}&entities_per_page={{ entities_per_page }}&search={{ search }}"
            class="pagination-previous">Previous Page</a>
        <a href="?page={{ page + 1 }}&entities_per_page={{ entities_per_page }}&search={{ search }}"
            class="pagination-next">Next page</a>
        <ul class="pagination-list">
            <!-- <li>
                <a class="pagination-link"
                    href="?page={{ 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(end=num_pages) %}
            <li><a class="pagination-link" aria-label="Goto page 45"
                    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 class="pagination-link" aria-label="Goto page {{ num_pages }}">{{ num_pages }} </a>
            </li> -->
        </ul>
    </nav>
</div>

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

{% endif %}

{% endblock content %}