{% extends "base.html" %}

{% block title %}{{ attachment.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-4 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>
            <a class="underline hover:text-gray-900 dark:hover:text-gray-100" href="{% url 'intern:topic' active_topic.slug %}">{{ active_topic.title }}</a>
            <span><i class="fa-solid fa-angle-right"></i></span>
            <span class="cursor-default">{{ attachment.title }}</span>
        </aside>

        {% if attachment.description %}
            <div class="db-page-content-left mt-2">
                {{ attachment.description|safe }}
            </div>
        {% endif %}

        <section>
            <div class="sm:flex flex-row justify-between">
                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Etherpad Dokumente:</h2>
                <!-- <a href="#" class="border border-gray-700 dark:border-gray-300 rounded px-1 py-0.5 hidden sm:block">
                    <i class="fa-solid fa-plus mr-1"></i>Neues Etherpad erstellen
                </a> -->
            </div>
            <div class="documentList rounded divide-y divide-gray-300 dark:divide-gray-600">
                <a href="{% url 'intern:etherpad-create' active_topic.slug attachment.slug %}" class="flex justify-between">
                    <h3 class="text-gray-800 dark:text-gray-200"><i class="fa-solid fa-plus fa-fw mr-1"></i>Neues Etherpad erstellen</h2>
                </a>

                {% for etherpad in etherpads %}
                    <a href="{{ etherpad.etherpad_key }}" class="flex justify-between items-center gap-2">
                        <h3 class="text-gray-800 dark:text-gray-200">{{ etherpad.title }}</h2>
                        <span class=" text-gray-700 dark:text-gray-300">{{ etherpad.date }}<span class="ml-2 hidden sm:inline-block"><i class="fas fa-angle-right text-gray-400 dark:text-gray-600"></i></span>
                    </a>
                {% endfor %}
            </div>
        </section>

        <section>
            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Dokumente:</h2>
            <div class="documentList rounded divide-y divide-gray-300 dark:divide-gray-600">
                <a href="{% url 'intern:file-create' active_topic.slug attachment.slug %}" class="flex justify-between">
                    <h3 class="text-gray-800 dark:text-gray-200"><i class="fa-solid fa-plus fa-fw mr-1"></i>Neues Dokument hochladen</h2>
                </a>

                {% for file in files %}
                    <a href="{{ file.file_field.url }}" target="_blank" class="flex justify-between items-center gap-2">
                        <h3 class="text-gray-800 dark:text-gray-200"><i class="fa-solid fa-file-pdf fa-fw mr-1 hidden sm:inline-block"></i>{{ file.title }}</h2>
                        <span class=" text-gray-700 dark:text-gray-300">{{ file.date }}<span class="ml-2 hidden sm:inline-block"><i class="fas fa-angle-right text-gray-400 dark:text-gray-600"></i></span>
                    </a>
                {% endfor %}
            </div>
        </section>

        <a href="{% url 'intern:attachment-update' active_topic.slug attachment.slug %}" class="btn btn-primary block place-self-end"><i class="fas fa-pen-to-square mr-2"></i>Beschreibung bearbeiten</a>
    </div>
</main>
{% endblock %}
