{% extends "base.html" %}

{% block title %}{{ active_topic.title }}{% 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-8 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
        <aside class="flex gap-2 flex-wrap align-bottom text-sm sm:text-base text-gray-600 dark:text-gray-300">
            <a class="underline hover:text-gray-900 dark:hover:text-gray-100" href="{% url 'intern:index' %}#{{ active_topic.topic_group.slug }}">{{ active_topic.topic_group.title }}</a>
            <span><i class="fa-solid fa-angle-right"></i></span>
            <span class="cursor-default">{{ active_topic.title }}</span>
        </aside>

        <!-- TODO: description -->
        {% if active_topic.description %}
            <div class="db-page-content-left">
                {{ active_topic.description|safe }}
            </div>
        {% endif %}

        <!-- TODO: tasks -->

        <ul class="flex flex-col gap-1 max-w-fit">
            {% for attachment in attachments %}
                <li><a href="{% url 'intern:attachment' active_topic.slug attachment.slug %}" class="py-1 inline-block">{{ attachment.title }}</a></li>
            {% endfor %}

            <li class="mt-2">
                <a href="{% url 'intern:attachment-create' active_topic.slug %}" class="border border-gray-700 dark:border-gray-300 rounded px-1.5 py-1">
                    <i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen
                </a>
            </li>
        </ul>
        
        <section class="flex flex-col sm:flex-row justify-end gap-4">
            <a href="{% url 'intern:topic-update' active_topic.slug %}" class="btn btn-primary block"><i class="fas fa-pen-to-square mr-2"></i>Thema bearbeiten</a>
            {% if active_topic.task_list %}
                <a href="{% url 'intern:task-create' active_topic.slug %}" class="btn btn-primary block"><i class="fas fa-plus-square mr-2"></i>Task hinzufügen</a>
            {% endif %}
        </section>
    </div>
</main>




{% endblock %}
