{% extends "base.html" %}

{% block title %}Intern{% endblock %}

{% block content %}
<!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1">
    <h1 class="page-title">Intern</h1>
    <div class="flex flex-col gap-y-4 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
        {% regroup topic by topic_group as topic_group_list %}
        {% for topic_group in topic_group_list %}
            <section x-data="{ expandList: $persist(true).as('expandListState-{{ topic_group.grouper.title }}') }">
                <div class="flex gap-x-6">
                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="expandList = ! expandList">
                        <i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
                        :class="expandList ? 'rotate-90' : ''"
                        ></i>
                        {{ topic_group.grouper.title }}
                    </h2>
                    <button class="border border-gray-700 dark:border-gray-300 rounded px-1.5 text-sm hidden sm:block"
                        x-show="expandList"
                        x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="transform origin-top opacity-0 -translate-x-6"
                        x-transition:enter-end="transform origin-top opacity-100 translate-x-0"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="transform origin-top opacity-100 translate-x-0"
                        x-transition:leave-end="transform origin-top opacity-0 -translate-x-6"
                    ><a href="{% url 'intern:topic-create' topic_group.grouper.slug %}"><i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen</a></button>
                </div>
                <ul class="ml-7 w-fit" x-show="expandList" x-collapse>
                    {% for topic in topic_group.list %}
                        <li><a href="{% url 'intern:topic' topic.slug %}" class="w-full py-1 inline-block">{{ topic.title }}</a></li>
                    {% endfor %}
                    <li class="py-1">
                        <a href="{% url 'intern:topic-create' topic_group.grouper.slug %}" class="border border-gray-700 dark:border-gray-300 rounded px-1.5 py-1 text-sm sm:hidden">
                            <i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen
                        </a>
                    </li>
                </ul>
            </section>
        {% endfor %}

        {% for topic_group in empty_topic_groups %}
            <section x-data="{ expandList: $persist(true).as('expandListState-{{ topic_group.title }}') }">
                <div class="flex gap-x-6">
                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="expandList = ! expandList">
                        <i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
                        :class="expandList ? 'rotate-90' : ''"
                        ></i>
                        {{ topic_group.title }}
                    </h2>
                    <button class="border border-gray-700 dark:border-gray-300 rounded px-1.5 text-sm hidden sm:block"
                        x-show="expandList"
                        x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="transform origin-top opacity-0 -translate-x-6"
                        x-transition:enter-end="transform origin-top opacity-100 translate-x-0"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="transform origin-top opacity-100 translate-x-0"
                        x-transition:leave-end="transform origin-top opacity-0 -translate-x-6"
                    ><a href="{% url 'intern:topic-create' topic_group.slug %}"><i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen</a></button>
                </div>
                <ul class="ml-7 w-fit" x-show="expandList" x-collapse>
                    <li class="py-1">
                        <a href="{% url 'intern:topic-create' topic_group.slug %}" class="border border-gray-700 dark:border-gray-300 rounded px-1.5 py-1 text-sm sm:hidden">
                            <i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen
                        </a>
                    </li>
                </ul>
            </section>
        {% endfor %}

        {% if archive_topic %}
            <section x-data="{ expandList: $persist(true).as('expandListState-Archive') }">
                <div class="flex gap-x-6">
                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="expandList = ! expandList">
                        <i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
                        :class="expandList ? 'rotate-90' : ''"
                        ></i>
                        Archiv
                    </h2>
                </div>
                <ul class="ml-7 w-fit" x-show="expandList" x-collapse>
                    {% for topic in archive_topic %}
                        <li><a href="{% url 'intern:topic' topic.slug %}" class="w-full py-1 inline-block">{{ topic.title }}</a></li>
                    {% endfor %}
                </ul>
            </section>
        {% endif %}

        <a href="{% url 'admin:intern_topicgroup_add' %}" class="btn btn-primary block w-full"><i class="fas fa-plus-square mr-2"></i>Neuer Themenbereich</a>
    </div>
</main>
{% endblock %}
