{% extends "base.html" %}

{% block content %}
<a href="create" role="button">&#43;</a>
<table role="grid">
    <thead>
        <tr>
            <th>{{ view_model.primary_key }}</th>
            {% for model_field in view_model.fields -%}
            <th>{{ model_field.field_name }}</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>{{ 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 }}">&#9998;</a>
                <a href="#" hx-post="delete/{{ entity.primary_key }}">&#128465;</a>
            </td>
        </tr>
        {%- endfor %}
    </tbody>
    <tfoot>
        <tr>
            <td colspan="{{ num_pages + 2 }}">
                <div>
                    <a href="?page={{ page - 1 }}&entities_per_page={{ entities_per_page }}">&laquo;</a>
                    {% for i in range(end=num_pages) %}
                    <a href="?page={{ i + 1 }}&entities_per_page={{ entities_per_page }}">{{ i + 1 }}</a>
                    {%- endfor %}
                    <a href="?page={{ page + 1 }}&entities_per_page={{ entities_per_page }}">&raquo;</a>
            </td>
        </tr>
    </tfoot>
</table>
{% endblock content %}