{% extends "base.html" %}

{% block title %}{{ model.name() }}{% endblock %}

{% block content -%}
{%- let urls = urls -%}
{%- let model = model -%}
<div class="model-header">
    <h2>{{ model.name() }}</h2>
    <div class="action-box">
        <a class="btn primary" href="{{ cot::reverse!(urls, "create_model_instance", model_name = model.url_name())? }}">Create {{ model.name() }} {% include "icons/plus.svg" %}</a>
    </div>
</div>

<div class="models-wrapper">
    <table class="models">
        <thead>
            <tr>
                <th>Object</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {%- for object in objects -%}
            <tr>
                {%- let edit_link = cot::reverse!(urls, "edit_model_instance", model_name = model.url_name(), pk = object.id())? -%}
                {%- let remove_link = cot::reverse!(urls, "remove_model_instance", model_name = model.url_name(), pk = object.id())? -%}
                <td><a href="{{ edit_link }}">{{ object.display() }}</a></td>
                <td class="model-actions-cell"><a href="{{ edit_link }}" class="edit-model" title="Edit this {{ model.name() }}">{% include "icons/pencil.svg" %}</a> <a href="{{ remove_link }}" class="remove-model" title="Remove this {{ model.name() }}">{% include "icons/trash.svg" %}</a></td>
            </tr>
        {%- endfor -%}
        </tbody>
    </table>

    <footer>
        Displaying {{ objects.len() }} out of {{ total_object_counts }} {{ model.name() }}{{ total_object_counts|pluralize }}.

        <div class="pagination">
            <select id="page-size-selector">
                {% for option in [10, 20, 30, 40] %}
                    <option value="{{ option }}" {% if option == page_size %}selected{% endif %}>{{ option }}</option>
                {% endfor %}
            </select>

            {% if page > 1 %}
                <a href="?page={{ page - 1 }}&page_size={{ page_size }}" class="btn secondary">Previous</a>
            {% else %}
                <button class="btn disabled">Previous</button>
            {% endif %}

             <span>Page {{page}} of {{total_pages}}</span>

            {% if page < total_pages %}
                <a href="?page={{ page + 1 }}&page_size={{ page_size }}" class="btn secondary">Next</a>
            {% else %}
                <button class="btn disabled">Next</button>
            {% endif %}
        </div>
    </footer>
</div>

<script>
    document.getElementById("page-size-selector").addEventListener("change", function() {
        const pageSize = this.value;
        const url = new URL(window.location.href);
        url.searchParams.set("page_size", pageSize);
        // Reset to page 1 when changing page size
        url.searchParams.set("page", 1);
        window.location.href = url.toString();
    });
</script>

{%- endblock %}