<section class="flex flex-col gap-4">
    {% include 'lib/alert.twig' %}

    <h3 class="text-2xl font-semibold">
        Categories
    </h3>
    <a href="/admin/categories/add">
        {% include 'lib/buttons/primary.twig' with {
            label: 'Create a Category'
        } %}
    </a>
    <table class="min-w-full">
        <tr>
            <th class="py-2">
                Category ID
            </th>
            <th class="py-2">
                Title
            </th>
            <th class="py-2">
                Slug
            </th>
            <th class="py-2">
                Action
            </th>
        </tr>
    </thead>
    <tbody>
        {% macro renderCategory(category, depth) %}
            <tr>
                <td class="border px-4 py-2">
                    {{ category.id }}
                </td>
                <td class="border px-4 py-2">
                    {% if depth > 0 %}
                        {% for i in 1..depth %}
                            -
                        {% endfor %}
                    {% endif %}
                    {{ category.label }}
                </td>
                <td class="border px-4 py-2">
                    {{ category.value }}
                </td>
                <td class="border px-4 py-2">
                    <a href="/admin/categories/edit/{{ category.id }}">
                        Edit
                    </a>
                </td>
            </tr>
            {% if category.children is defined and category.children is not empty %}
                {% for child in category.children %}
                    {{ _self.renderCategory(child, depth + 1) }}
                {% endfor %}
            {% endif %}
        {% endmacro %}

        {% if categories %}
            {% for category in categories %}
                {{ _self.renderCategory(category, 0) }}
            {% endfor %}
        {% else %}
            <tr>
                <td class="border px-4 py-2" colspan="4">
                    No categories yet.
                </td>
            </tr>
        {% endif %}
    </tbody>
</table></section>