{% extends "base.html" %}
{% block title %}
    {{ model.name() }}
{% endblock title %}
{% 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 content %}