{% extends 'base.html' %}

{% load post_helpers %}
{% 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="fas 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 class="w-full self-end flex justify-center mb-4">
				<i class="fas fa-chevron-down animate-bounce text-proprietary text-2xl"></i>
			</div>-->
		</div>
	</section>

	<!-- Main Content -->
	<main class="container mx-auto w-full px-4 my-8 flex-1">
		<section class="sm:hidden my-8">
			<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 my-8">
			<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:posts.calendar' %}" class="btn btn-secondary block w-full"><i class="fas fa-calendar-alt 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:posts.index' %}" class="btn btn-primary block w-full"><i class="fas fa-plus-square mr-2"></i>Mehr anzeigen</a>
			</section>
		</div>

		<div id="infoBox" class="sticky bottom-4 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="{ consent: true }"
			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="fab 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="far 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="consent = false"
			><i class="fas fa-times text-gray-300 dark:text-gray-500"></i></button>
        </div>
	</main>
{% endblock %}
