{% extends 'base.html' %}

{% load static %}

{% block content %}
	<!--Hero section-->
	<section class="xl:h-[30rem] relative z-0 w-full h-56 sm:h-80 lg:h-96 bg-cover bg-center bg-no-repeat flex-none" style="background-image: url('{% static 'img/cover-image.jpeg' %}');">
        <div class="absolute z-10 w-full h-full bg-blue-50 dark:bg-black opacity-60"></div>
		<div class="relative container px-4 mx-auto z-20 w-full h-full flex flex-wrap items-center gap-x-2">
			<h1 class="w-3/5 flex-1 uppercase font-semibold text-xl sm:text-2xl lg:text-3xl text-center text-gray-900 dark:text-gray-100">
				<span class="hidden">Willkommen bei der </span><span>Fachschaft</span><br>
				<span class="text-proprietary-darker dark:text-proprietary-lightest">Elektrotechnik</span>
			</h1>

			<div class="hidden sm:block flex-none w-2/5 lg:w-1/3 bg-white dark:bg-gray-800 p-2 lg:p-4 rounded shadow-xl dark:border-2 dark:border-gray-700">
				<h2 class="section-title sm:text-left"><i class="fa-solid fa-comments text-gray-300 dark:text-gray-400 mr-2"></i>Events</h2>
				<div class="-mb-2 text-gray-700 dark:text-gray-200 text-sm md:text-base">
                    {% if featured_event %}
                        {% with post=featured_event %}
                        {% include 'posts/partials/_meeting_row.html' %}
                        {% endwith %}
                    {% endif %}
                    {% for post in featured_meeting %}
                        {% if post %}
                            {% include 'posts/partials/_meeting_row.html' %}
                        {% endif %}
                    {% endfor %}
				</div>
			</div>
		</div>
	</section>

	<!-- Main Content -->
	<main class="container mx-auto w-full px-4 my-8 flex-1">
        {% if request.user.is_authenticated %}
            <div data-dial-init class="fixed bottom-6 right-6 group">
                <div id="speed-dial-menu-dropdown" class="flex hidden flex-col justify-end py-1 mb-4 space-y-2 bg-white rounded-lg border border-gray-100 shadow-sm dark:border-gray-600 dark:bg-gray-700">
                    <ul class="text-sm text-gray-500 dark:text-gray-300">
                        <li>
                            <a href="{% url 'posts:fetmeeting_create' %}" class="flex items-center py-2 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white">
                                <i class="fa-solid fa-plus mr-2"></i>
                                <span class="text-sm font-medium">Neue Fachschaftssitzung</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <button type="button" data-dial-toggle="speed-dial-menu-dropdown" aria-controls="speed-dial-menu-dropdown" aria-expanded="false" class="flex justify-center items-center ml-auto w-14 h-14 text-white bg-blue-700 rounded-full hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
                    <i class="fa-solid fa-pen-to-square"></i>
                </button>
            </div>
        {% endif %}

        <section class="sm:hidden">
			<h2 class="section-title section-title-margins">Events</h2>

			<div class="flex flex-col gap-4">
                {% if featured_event %}
                    {% with post=featured_event %}
                    {% include 'posts/partials/_article_row.html' %}
                    {% endwith %}
                {% endif %}
                {% for post in featured_meeting %}
                    {% if post %}
                        {% include 'posts/partials/_article_row.html' %}
                    {% endif %}
                {% endfor %}
			</div>
		</section>

		<div class="sm:flex sm:flex-row-reverse justify-center">
			<aside class="calendar-preview sm:w-2/5 xl:w-1/4 sm:pl-4 my-8 sm:my-0">
				<div>
					<h2 class="section-title section-title-margins">Kalender</h2>
					<div class="calendar-entries">
                        {% for post in events %}
                            {% include 'posts/partials/_date_box.html' %}
                        {% endfor %}
                        
						<a href="{% url 'posts:calendar' %}" class="btn btn-secondary block w-full"><i class="fa-solid fa-calendar-days mr-2"></i>Kalender abonnieren</a>
					</div>
				</div>
            </aside>

			<section class="my-8 sm:my-0 sm:w-3/5 xl:w-2/5 flex flex-col gap-4">
				<h2 class="section-title section-title-margins">Zuletzt veröffentlicht</h2>
                
                {% if featured_post %}
                    {% with post=featured_post %}
                        {% include 'posts/partials/_posts_pinned.html' %}
                    {% endwith %}
                {% endif %}
                {% for post in posts %}
                    {% include 'posts/partials/_posts_hero.html' %}
                {% endfor %}

				<a href="{% url 'posts:index' %}" class="btn btn-primary block w-full"><i class="fa-solid fa-plus-square mr-2"></i>Mehr anzeigen</a>
			</section>
		</div>

        <!--
		<div id="infoBox" class="sticky bottom-4 mt-8 p-4 rounded-lg shadow-lg bg-gray-600 dark:bg-gray-800 text-gray-200 dark:text-gray-300 flex gap-x-4 items-center leading-none dark:border-2 dark:border-gray-700"
			x-data="infoBox"
			x-show="consent"
			x-transition:leave="transition ease-in-out duration-500"
			x-transition:leave-start="transform origin-bottom opacity-100 scale-100 translate-y-0"
			x-transition:leave-end="transform origin-bottom opacity-0 scale-100 translate-y-14"
		>
            <div class="flex-none relative">
				<span class="absolute flex h-3 w-3 right-0 top-0">
					<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-600 dark:bg-proprietary opacity-80"></span>
					<span class="relative inline-flex rounded-full h-3 w-3 bg-sky-600 dark:bg-proprietary"></span>
				</span>
				<i class="fa-brands fa-discord text-4xl"></i> 
			</div>
			<a href="{% url 'discord' %}" class="flex-1">
				FET Discord-Server<br>
				<span class="hidden lg:inline text-sm text-gray-300 dark:text-gray-400">Du hast Fragen zum Studium oder möchtest dich einfach mich anderen Studierenden austauschen? </span><span class="text-sm text-gray-300 dark:text-gray-400">Klicke hier zum Beitreten <span class="hidden sm:inline"><i class="fa-solid fa-angle-right"></i></span></span>
			</a>
			<button id="infoBox-closeButton" class="flex-none self-stretch px-2 -mr-2" onclick="hideInfoBox('m', 1)"
				@click="closeBox"
			><i class="fa-solid fa-xmark text-gray-300 dark:text-gray-500"></i></button>
        </div>
        -->
	</main>      
{% endblock %}