{% extends 'posts/show.html' %}

{% load flatpages %}

{% block title %}{{ post.title }} vom {{ post.event_start|date }}{% endblock %}

{% block prev_text_big %}Vorherige<br>Sitzung{% endblock %}
{% block next_text_big %}Nächste<br>Sitzung{% endblock %}

{% block prev_text %}Vorherige Sitzung{% endblock %}
{% block next_text %}Nächste Sitzung{% endblock %}

{% block update_button_desktop %}
    {% if request.user.is_authenticated %}
        <a href="{% url 'posts:post_update' post.slug %}" class="hidden sm:block btn-small btn-primary">
            <i class="fa-solid fa-pen-to-square mr-1"></i>FET Sitzung bearbeiten
        </a>
    {% endif %}
{% endblock %}

{% block event_details_desktop %}
    <div class="hidden lg:block absolute top-0 right-0 bg-white dark:bg-gray-950 rounded-bl p-2 bg-opacity-60 dark:bg-opacity-60 gap-2 backdrop-blur">
        <div class="items-center lg:flex gap-2">
            <i class="flex-none fa-solid fa-calendar-day fa-fw text-gray-800 dark:text-gray-200"></i>
            <span class="flex-1 text-sm text-gray-800 dark:text-gray-100">
                Event-Start: {{ post.event_start|date }} um {{ post.event_start|time }} Uhr<br>
                Event-Ende: {{ post.event_end|date }} um {{ post.event_end|time }} Uhr
            </span>
        </div>
        {% if post.event_place %}
        <div class="items-center lg:flex gap-2">
            <i class="flex-none fa-solid fa-location-dot fa-fw text-gray-800 dark:text-gray-200"></i>
            <span class="flex-1 text-sm text-gray-800 dark:text-gray-200">
                Event-Ort: {{ post.event_place }}
            </span>
        </div>
        {% endif %}
    </div>
    <div class="hidden absolute top-0 right-0 bg-white dark:bg-gray-900 rounded-bl p-2 bg-opacity-80 dark:bg-opacity-70 items-center gap-2">
        <i class="flex-none fa-solid fa-calendar-day text-gray-800 dark:text-gray-200"></i>
        <span class="flex-1 text-sm text-gray-800 dark:text-gray-200">
            Event-Start: {{ post.event_start|date }} um {{ post.event_start|time }} Uhr<br>
            Event-Ende: {{ post.event_end|date }} um {{ post.event_end|time }} Uhr<br>
            {% if post.event_place %}
                Event-Ort: {{ post.event_place }}
            {% endif %}
        </span>
    </div>
{% endblock %}

{% block post_body %}
    {% if post.has_agenda %}
        <h2>Agenda</h2>
        {{ post.agenda_html|safe }}
    {% endif %}

    {% if request.user.is_authenticated and post.has_protocol %}
        <hr>
        <h2>Protokoll</h2>
        {{ post.protocol_html|safe }}
    {% endif %}
{% endblock %}

{% block event_details_mobile %}
    <hr class="lg:hidden -mx-4 border-gray-200 dark:border-gray-800 dark:border my-4">
    <div class="lg:hidden">
        <h2 class="text-gray-800 dark:text-gray-200 font-medium"><i class="fa-solid fa-calendar-days mr-2 text-gray-400 dark:text-gray-500"></i>Termindetails:</h2>
        <ul class="text-base text-gray-700 dark:text-gray-300 my-1">
            <li>Start: {{ post.event_start|date }} um {{ post.event_start|time }} Uhr</li>
            <li>Ende: {{ post.event_end|date }} um {{ post.event_end|time }} Uhr</li>
            {% if post.event_place %}
                <li>Ort: {{ post.event_place }}</li>
            {% endif %}
        </ul>
    </div>
{% endblock %}

{% block docu_buttons %}
    {% if request.user.is_authenticated %}
        {% if post.has_agenda or post.has_protocol %}
            <hr class="-mx-4 border-gray-200 dark:border-gray-800 dark:border my-4">
            <h2 class="text-gray-800 dark:text-gray-200 font-medium"><i class="fa-solid fa-inbox mr-2 text-gray-400 dark:text-gray-500"></i>Dokument(e):</h2>
        {% endif %}

        {% if post.has_agenda %}
            <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="optionsToggle">
                <span class="flex-1">Agenda</span>
                <div class="relative">
                    <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions">
                        <i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
                    </button>
                    <ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
                        @click.outside="hideOptions"
                        x-show="optionsVisible"
                        x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="transform origin-right opacity-0 scale-95"
                        x-transition:enter-end="transform origin-right opacity-100 scale-100"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="transform origin-right opacity-100 scale-100"
                        x-transition:leave-end="transform origin-right opacity-0 scale-95"
                    >
                        <li class="block sm:inline-block group hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200">
                            <a href="{{ post.agenda_link }}" class="inline-flex items-center px-2 py-1">
                                <i class="fa-solid fa-file-signature fa-fw text-proprietary dark:text-proprietary-light md:text-inherit group-hover:text-proprietary dark:group-hover:text-proprietary-light"></i>
                                <span class="ml-2 sm:ml-1">Bearbeiten</span>
                            </a>
                        </li>
                        {% if post.filename_agenda %}
                            <li class="block sm:inline-block group hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200">
                                <a href="{% url 'posts:show_pdf_agenda' post.slug %}" class="inline-flex items-center px-2 py-1">
                                    <i class="fa-solid fa-file-pdf fa-fw text-red-800 dark:text-red-500 md:text-inherit group-hover:text-red-800 dark:group-hover:text-red-500"></i>
                                    <span class="ml-2 sm:ml-1">Download</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        {% endif %}

        {% if post.has_protocol %}
            <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="optionsToggle">
                <span class="flex-1">Protokoll</span>
                <div class="relative">
                    <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions">
                        <i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
                    </button>
                    <ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
                        @click.outside="hideOptions"
                        x-show="optionsVisible"
                        x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="transform origin-right opacity-0 scale-95"
                        x-transition:enter-end="transform origin-right opacity-100 scale-100"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="transform origin-right opacity-100 scale-100"
                        x-transition:leave-end="transform origin-right opacity-0 scale-95"
                    >
                        <li class="block sm:inline-block group hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200">
                            <a href="{{ post.protocol_link }}" class="inline-flex items-center px-2 py-1"><i class="fa-solid fa-file-signature fa-fw text-proprietary dark:text-proprietary-light md:text-inherit group-hover:text-proprietary dark:group-hover:text-proprietary-light"></i>
                                <span class="ml-2 sm:ml-1">Bearbeiten</span>
                            </a>
                        </li>
                        {% if post.filename_protocol %}
                            <li class="block sm:inline-block group hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200">
                                <a href="{% url 'posts:show_pdf_protocol' post.slug %}" class="inline-flex items-center px-2 py-1">
                                    <i class="fa-solid fa-file-pdf fa-fw text-red-800 dark:text-red-500 md:text-inherit group-hover:text-red-800 dark:group-hover:text-red-500"></i>
                                    <span class="ml-2 sm:ml-1">Download</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        {% endif %}

        {% get_flatpages '/bs/' for user as pages %}
        {% if pages %}
            <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="optionsToggle">
                <span class="flex-1">{{ pages.first.title }}</span>
                <div class="relative">
                    <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions">
                        <i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
                    </button>
                    <ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
                        @click.outside="hideOptions"
                        x-show="optionsVisible"
                        x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="transform origin-right opacity-0 scale-95"
                        x-transition:enter-end="transform origin-right opacity-100 scale-100"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="transform origin-right opacity-100 scale-100"
                        x-transition:leave-end="transform origin-right opacity-0 scale-95"
                    >
                        <li class="block sm:inline-block group hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200">
                            <a href="{{ pages.first.url }}" class="inline-flex items-center px-2 py-1"><i class="fa-solid fa-file-lines fa-fw text-proprietary dark:text-proprietary-light md:text-inherit group-hover:text-proprietary dark:group-hover:text-proprietary-light"></i>
                                <span class="ml-2 sm:ml-1">Übersicht</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        {% endif %}
    {% endif %}
{% endblock %}

{% block update_button_mobile %}
    {% if request.user.is_authenticated %}
        <a href="{% url 'posts:post_update' post.slug %}" class="sm:hidden block w-full btn btn-primary mt-4">
            <i class="fa-solid fa-pen-to-square mr-1"></i>FET Sitzung bearbeiten
        </a>
    {% endif %}
{% endblock %}