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

{% load post_helpers %}

{% block title %}{{ post.title }}{% 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>Artikel bearbeiten
        </a>
    {% endif %}
{% endblock %}

{% block post_body %}
    {% if post.body %}
        {{ post.body|safe|tags_to_url }}
    {% endif %}
{% endblock %}

{% block files_buttons %}
    {% if files %}
        <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>

        {% for file in files %}
            <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="options">
                <span class="flex-1">{{ file.title }}</span>
                <div class="relative">
                    <button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="openShowOptions">
                        <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="closeShowOptions"
                        x-show="getShowOptions"
                        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-200 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200">
                            <a href="{{ file.file_field.url }}" class="inline-flex items-center px-2 py-1" target="_blank">
                                <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>
                    </ul>
                </div>
            </div>
        {% endfor %}
    {% 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>Artikel bearbeiten
        </a>
    {% endif %}
{% endblock %}