{% extends "base.html" %}

{% block content %}

<article>
    <div class="grid">
        <div>
            <a href="create" role="button">&#43;</a>
        </div>
    </div>
    <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="{{ view_model.fields | length + 2 }}">
                    <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>
    <div class="grid">
        <div>
            <form>
                <label for="entities_per_page">Entities per Page
                    <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>
                </label>
            </form>
        </div>
    </div>
</article>
{% endblock content %}