{% extends 'base.html' %}

{% load post_helpers %}
{% load admin_urls %}

{% block title %}News{% endblock %}

{% block extraheader %}
    <meta content="{{ post.imageurl }}" property="og:image">
    <meta content="{{ post.title }}" property="og:title">
    <meta content="article" property="og:type">
    <meta content="" property="og:url">
{% endblock %}

{% block content %}
	<!-- Main Content -->
	<main class="container mx-auto w-full flex-1 my-8 sm:flex flex-col sm:px-4">
		<a href="{% url 'posts:posts.show' previous %}" class="hidden z-20 fixed left-0 top-1/2 -mt-8 p-2 xl:flex items-center text-gray-400 dark:text-gray-300 rounded-md"
			x-data="{ showPrevArticleButton : false }"
			@mouseleave="showPrevArticleButton = false"
			@mouseover="showPrevArticleButton = true"
		>
			<i class="fa-light fa-chevron-left text-5xl -m-2 p-2 bg-gray-100 dark:bg-gray-700 rounded-md"></i>
			<span class="text-gray-600 dark:text-gray-300 font-medium bg-gray-100 dark:bg-gray-700 -m-2 p-2 rounded-r-md origin-left"
				x-show="showPrevArticleButton"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90"
        x-transition:enter-end="opacity-100 transform scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 transform scale-100"
        x-transition:leave-end="opacity-0 bg-opacity-0 transform scale-100"
			>Vorheriger<br>Artikel</span>
		</a>
		<a href="{% url 'posts:posts.show' next %}" class="hidden z-20 fixed right-0 top-1/2 -mt-8 p-2 xl:flex items-center text-gray-400 dark:text-gray-300 rounded-md"
			x-data="{ showNextArticleButton : false }"
			@mouseleave="showNextArticleButton = false"
			@mouseover="showNextArticleButton = true"
		>
			<span class="z-30 text-gray-600 dark:text-gray-300 font-medium bg-gray-100 dark:bg-gray-700 -m-2 p-2 rounded-l-md text-right origin-right"
				x-show="showNextArticleButton"
				x-transition:enter="transition ease-out duration-300"
				x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90"
				x-transition:enter-end="opacity-100 transform scale-100"
				x-transition:leave="transition ease-in duration-150"
				x-transition:leave-start="opacity-100 transform scale-100"
				x-transition:leave-end="opacity-0 bg-opacity-0 transform scale-100"
			>Nächster<br>Artikel</span>
			<i class="fa-light fa-chevron-right text-5xl -m-2 p-2 bg-gray-100 dark:bg-gray-700 rounded-md"></i>
		</a>
		<section>
			<div class="mb-4 flex flex-col sm:flex-col gap-2 mx-auto">
				<ul class="px-4 sm:px-0 mb-2 flex flex-row justify-center gap-2 sm:gap-4 flex-wrap text-sky-700 dark:text-blue-200 text-sm uppercase tracking-wide sm:font-medium">
					{% for t in post.tag_names %}
                        <li class="inline-block py-1 px-2 bg-sky-100 dark:bg-sky-900 rounded-full"><a href="{% url 'posts:posts.tags' t %}">#{{ t }}</a></li>
                    {% endfor %}
				</ul>
				<h1 class="px-4 sm:px-0 text-lg sm:text-xl lg:text-3xl text-center sm:text-left font-medium text-gray-900 dark:text-gray-100 font-serif tracking-wider leading-normal" style="line-height: 1.5;">{{ post.title|tags_to_url }}</h1>
				<div class="mx-auto max-w-max sm:mx-0 sm:max-w-none sm:flex justify-between items-center">

                    <div class="max-w-max flex flex-row justify-center sm:justify-start gap-2 self-center md:self-start">

                        {% if author_image and author %}

                            <img class="hidden sm:block w-12 rounded-full" src="{{ author_image }}" alt="Portraitfoto von {{ author.firstname }}">
                            <div class="sm:flex flex-col justify-evenly text-gray-600 dark:text-gray-300 text-sm sm:text-base">
                                <a href="{% url 'member' author.id %}" class="underline">{{ author.firstname }}</a>
                                <span class="sm:hidden"> am </span>
                                <span>{{ post.date|date:"d. F Y" }}</span>
                            </div>

                        {% elif post.author %}

                            <div class="sm:flex flex-col justify-evenly text-gray-600 dark:text-gray-300 text-sm sm:text-base">
                                <a class="underline">{{ post.author|capfirst }}</a>
                                <span class="sm:hidden"> am </span>
                                <span>{{ post.date|date:"d. F Y" }}</span>
                            </div>

                        {% else %}

                            <div class="sm:flex flex-col justify-evenly text-gray-600 dark:text-gray-300 text-sm sm:text-base">
                                <a class="underline">fet.at Redaktion</a>
                                <span class="sm:hidden"> am </span>
                                <span>{{ post.date|date:"d. F Y" }}</span>
                            </div>
                            
                        {% endif %}
                            
                    </div>

                    {% if request.user.is_authenticated %}
                        {% if post.post_type == 'N' %}
                            <a href="{% url 'admin:posts_news_change' post.id %}" class="hidden sm:block btn-small btn-primary">
                                <i class="fa-regular fa-pen-to-square mr-1"></i>Artikel bearbeiten
                            </a>
                        {% elif post.post_type == 'E' %}
                            <a href="{% url 'admin:posts_event_change' post.id %}" class="hidden sm:block btn-small btn-primary">
                                <i class="fa-regular fa-pen-to-square mr-1"></i>Event bearbeiten
                            </a>
                        {% elif post.post_type == 'F' %}
                            <a href="{% url 'admin:posts_fetmeeting_change' post.id %}" class="hidden sm:block btn-small btn-primary">
                                <i class="fa-regular fa-pen-to-square mr-1"></i>FET Sitzung bearbeiten
                            </a>
                        {% endif %}
                    {% endif %}
				</div>
			</div>
			<!-- <img src="img/article-cover-3.jpg" alt="" class="h-44 sm:h-56 lg:h-64 xl:h-80 w-full object-cover sm:rounded-md max-w-5xl mx-auto"> -->
			<div class="relative w-full h-44 sm:h-56 md:h-60 lg:h-64 xl:h-96 bg-center bg-no-repeat bg-cover sm:rounded-md mx-auto" style="background-image: url('{{ post.imageurl }}');">
                {% if post.post_type != 'N' %}
                    <div class="hidden lg:block absolute top-0 right-0 bg-white dark:bg-gray-900 rounded-bl p-2 bg-opacity-80 dark:bg-opacity-70 gap-2">
                        <div class="items-center lg:flex gap-2">
                            <i class="flex-none fa-solid fa-calendar-clock fa-fw 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
                            </span>
                        </div>
                        <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>
                    </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-clock 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>
                            Event-Ort: {{ post.event_place }}
                        </span>
                    </div>
                {% endif %}
			</div>
		</section>
		<section class="mx-4 z-10">
			<article class="p-4 mt-4 sm:-mt-16 xl:-mt-24 w-full max-w-prose mx-auto bg-white dark:bg-gray-900 rounded dark:border-2 dark:border-gray-800">
				<!-- <div class="w-full flex justify-end">
					<div class="hidden lg:block max-w-max text-sm text-gray-600">
						Event-Start: 23. August 2021 um 18:00 Uhr<br>
						Event-Ende: 23. August 2021 um 20:00 Uhr
					</div>
				</div> -->
				<div class="db-page-content-left big-first-letter">
					<!-- Content from DB here: -->
                    {% if post.has_agenda %}
                        <h2>Agenda</h2>
                        {{ post.agenda_html|safe }}
                        <hr>
                    {% elif post.body %}
                        {{ post.body|safe|add_internal_links|tags_to_url }}
                    {% endif %}

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

                {% if post.post_type != 'N' %}
                    <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>
                            <li>Ort: {{ post.event_place }}</li>
                        </ul>
                    </div>
                {% endif %}
                
                {% if post.has_agenda or post.has_protocol %}
                    {% if request.user.is_authenticated %}
                        <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 %}
                {% elif 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>
                {% endif %}

                {% if request.user.is_authenticated %}
                    {% if post.has_agenda %}
                        <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
                            <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 = true">
                                    <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="showOptions = false"
                                    x-show="showOptions || $screen('sm')"
                                    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="{{ ep_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 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="{ showOptions: false }">
                            <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 = true">
                                    <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="showOptions = false"
                                    x-show="showOptions || $screen('sm')"
                                    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="{{ ep_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 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 %}
                {% endif %}

                {% for file in files %}
                    <div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
                        <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="showOptions = true">
                                <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="showOptions = false"
                                x-show="showOptions || $screen('sm')"
                                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 %}

				<hr class="-mx-4 border-gray-200 dark:border-gray-800 dark:border my-4">
				<div class="-m-4 flex divide-x divide-gray-200 dark:divide-gray-800 dark:divide-x-2 text-sm sm:text-base">
					<a href="{% url 'posts:posts.show' previous %}" class="w-1/2 p-4 flex items-center gap-2">
                        <i class="fa-solid fa-chevron-left text-gray-600 dark:text-gray-400"></i>
						<span class="text-gray-700 dark:text-gray-300 font-medium">Vorheriger Artikel</span>
					</a>
					<a href="{% url 'posts:posts.show' next %}" class="w-1/2 p-4 flex flex-row-reverse items-center gap-2">
						<i class="fa-solid fa-chevron-right text-gray-600 dark:text-gray-400"></i>
						<span class="text-gray-700 dark:text-gray-300 font-medium">Nächster Artikel</span>
					</a>
				</div>
			</article>

            {% if request.user.is_authenticated %}
                {% if post.post_type == 'N' %}
                    <a href="{% url 'admin:posts_news_change' post.id %}" class="sm:hidden block w-full btn btn-primary mt-4">
                        <i class="fa-regular fa-pen-to-square mr-1"></i>Artikel bearbeiten
                    </a>
                {% elif post.post_type == 'E' %}
                    <a href="{% url 'admin:posts_event_change' post.id %}" class="sm:hidden block w-full btn btn-primary mt-4">
                        <i class="fa-regular fa-pen-to-square mr-1"></i>Event bearbeiten
                    </a>
                {% elif post.post_type == 'F' %}
                    <a href="{% url 'admin:posts_fetmeeting_change' post.id %}" class="sm:hidden block w-full btn btn-primary mt-4">
                        <i class="fa-regular fa-pen-to-square mr-1"></i>FET Sitzung bearbeiten
                    </a>
                {% endif %}
            {% endif %}
		</section>

        {% if related_posts %}
            <section class="mx-auto w-full px-4">
            	<h2 class="my-4 sm:my-8 text-proprietary dark:text-proprietary-lighter text-xl text-center uppercase tracking-wider">Weiterlesen</h2>
                <div class="flex justify-evenly flex-wrap gap-4">
                {% for post in related_posts %}
                    <a href="{{ post.url }}" class="sm:flex-1 block rounded-md bg-white dark:bg-gray-500 shadow-md bg-no-repeat bg-center aspect-video transition-all ease-in-out duration-500 bg-scale-100 hover:bg-scale-120" style="background-image: url('{{ post.imageurl }}');">
                        <div class="w-full h-full bg-gradient-to-t from-black rounded-md flex flex-col justify-end p-2">
                            <h2 class="text-gray-50 line-clamp-2"><span aria-label="Link zum Artikel: "></span>{{ post.title | safe }}</h2>
                            <span class="text-gray-300 text-sm">
                                <i class="fas fa-clock mr-1"></i>
                                <span aria-label=" vom "></span>
                                {{ post.date|date:"d. F Y" }}
                            </span>
                        </div>
                    </a>
                {% endfor %}
                </div>
            </section>
        {% endif %}
	</main>
{% endblock %}
