{% extends "_base.html" %}

{% block content %}
{% load static %}
{% load mptt_tags %}
<div class="table-header">
    <div class="flex flex-wrap">
        <div class="w-1/2">
            <h2 class="heading font-normal mb-2">Seiten</h2>
        </div>
        <div class="w-1/2 flex flex-wrap flex-col justify-center">
            <div class="flex flex-wrap justify-end">
                <a href="{% url 'archived_pages' %}" class="font-bold text-xs text-grey-darkest block pb-2">Archivierte Seiten</a>
            </div>
        </div>
    </div>
    <div class="flex flex-wrap">
        <form class="table-search relative w-1/2">
            <i data-feather="search" class="absolute"></i>
            <input type="search" placeholder="Suche" class="h-full pl-10 pr-4 rounded shadow">
        </form>
        <div class="w-1/2 flex flex-wrap justify-end">
            <a href="{% url 'new_page' %}" class="bg-grey-dark hover:bg-integreat hover:text-grey-darkest text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                Seite erstellen
            </a>
        </div>
    </div>
</div>

<div class="table-listing">
    <table class="w-full mt-4 rounded border border-solid border-grey-light shadow bg-white">
        <thead>
            <tr class="border-b border-solid border-grey-light">
                <th class="text-sm text-left uppercase py-3 pl-4 pr-2"></th>
                <th class="text-sm text-left uppercase py-3 px-2">Titel</th>
                <th class="text-sm text-left uppercase py-3 px-2">
                    <div class="lang-grid flags">
                        <a href="">
                            <img src="{% static 'images/flags/ar.png' %}" title="Arabisch" />
                        </a>
                        <a href="">
                            <img src="{% static 'images/flags/de.png' %}" title="Deutsch" />
                        </a>
                        <a href="">
                            <img src="{% static 'images/flags/en.png' %}" title="Englisch" />
                        </a>
                        <a href="">
                            <img src="{% static 'images/flags/fa.png' %}" title="Farsi" />
                        </a>
                    </div>
                </th>
                <th class="text-sm text-left uppercase py-3 pl-2 pr-4">Optionen</th>
            </tr>
        </thead>
        <tbody>
        {% if pages %}
            {% recursetree pages %}
                {% include "pages/tree_row.html" with node=node %}
                {% if not node.is_leaf_node %}
                    {{children}}
                {% endif %}
            {% endrecursetree %}
        {% else %}
            <tr>
                <td></td>
                <td colspan="5" class="px-2 py-3">
                    Noch keine Seiten vorhanden.
                </td>
            </tr>
        {% endif %}
        </tbody>
    </table>
</div>
{% endblock %}