Files
fet2020/fet2020/templates/intern/index.html
2025-01-26 22:42:20 +01:00

96 lines
5.5 KiB
HTML

{% 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="toggleList" data-title="{{ 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="toggleItem">
<i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
x-bind="iconContent"
></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.topic_group.slug 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="toggleList" data-title="{{ 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="toggleItem">
<i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
x-bind="iconContent"
></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="toggleList" data-title="archive">
<div class="flex gap-x-6">
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="toggleItem">
<i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
x-bind="iconContent"
></i>
Archiv
</h2>
</div>
<ul class="ml-7 w-fit" x-show="expandList" x-collapse>
<li class="py-1">
{% for topic in archive_topic %}
<li><a href="{% url 'intern:topic' topic.topic_group.slug topic.slug %}" class="w-full py-1 inline-block">{{ topic.title }}</a></li>
{% endfor %}
</li>
</ul>
</section>
{% endif %}
<a href="{% url 'admin:intern_topicgroup_add' %}" class="btn btn-primary block w-full"><i class="fa-solid fa-plus-square mr-2"></i>Neuer Themenbereich</a>
</div>
</main>
{% endblock content %}