{% 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);
url.searchParams.set("page", 1);
window.location.href = url.toString();
});
</script>
{%- endblock content %}