{% extends 'base.html' %}

{% block title %}{{ task.title }}{% endblock %}

{% block content %}
<!-- Main Content -->
<main class="container mx-auto w-full px-4 my-8 flex-1">
    <h1 class="page-title">Task-Detailansicht</h1>
    <div class="flex flex-col gap-y-4 sm: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 'tasks:index' %}">{{ task.task_list.name }}</a>
            <span><i class="fa-solid fa-angle-right"></i></span>
            <span class="cursor-default">{{ task.title }}</span>
        </aside>
        {% if task.note %}
            <div class="db-page-content-left">
                {{ task.note|safe }}
            </div>
        {% endif %}

        {% if task.due_date %}
            <div class="text-right -mt-6">
                {{ task.due_date }}
            </div>
        {% endif %}

        <section>
            <div class="documentList rounded divide-y divide-gray-300 dark:divide-gray-600">
                <a href="{% url 'tasks:docu_create' task.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 document in documents %}
                    <a href="{{ document.get_absolute_url }}" class="flex justify-between items-center gap-2">
                        <h3 class="text-gray-800 dark:text-gray-200">{{ document.title }}</h2>
                        <span class=" text-gray-700 dark:text-gray-300">{{ document.date }}<span class="ml-2 hidden sm:inline-block"><i class="fa-solid fa-angle-right text-gray-400 dark:text-gray-600"></i></span>
                    </a>
                {% endfor %}

            </div>
        </section>

        <a href="{% url 'tasks:task_update' task.slug %}" class="btn btn-primary block place-self-end"><i class="fa-solid fa-pen-to-square mr-2"></i>Task bearbeiten</a>
    </div>
</main>
{% endblock %}