{% extends 'base.html' %}

{% load post_helpers %}

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

{% block content %}
	<!-- Main Content -->
	<main class="container mx-auto w-full px-4 my-8 flex-1">
		<h1 class="page-title">News</h1>
		<div class="sm:flex sm:flex-row-reverse justify-center">
			<aside class="sm:w-2/5 sm:max-w-xs sm:pl-4 lg:pl-8 my-8 sm:my-0">
				<div class="z-10 fixed sm:sticky top-0 sm:top-4 lg:top-8 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center"
					x-show="showModal || $screen('sm')"
					x-transition:enter="transition duration-300 ease-out"
					x-transition:enter-start="opacity-0"
					x-transition:enter-end="opacity-100"
					x-transition:leave="transition duration-150 ease-in"
					x-transition:leave-start="opacity-100"
					x-transition:leave-end="opacity-0"
				>
					<div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 rounded bg-white dark:bg-gray-800 sm:shadow-lg sm:dark:border-2 sm:dark:border-gray-700"
						@click.outside="showModal = ! showModal"
						x-show="showModal || $screen('sm')"
						x-transition:enter="transition transform ease-out duration-300"
						x-transition:enter-start="scale-110 opacity-0"
						x-transition:enter-end="scale-100 opacity-100"
						x-transition:leave="transition transform ease-in duration-150"
						x-transition:leave-start="scale-100 opacity-100"
						x-transition:leave-end="scale-110 opacity-0"
					>
                        <div class="flex justify-between items-center mb-2">
                            <h2 class="text-gray-800 dark:text-gray-100 sm:section-title sm:section-title-margins sm:w-full">
								<span class="mr-1 text-gray-400 sm:hidden">
                                    <i class="fas fa-filter"></i>
                                </span>
                                Auswahl einschränken
                            </h2>
							<div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="showModal = false">
								<i class="far fa-times"></i>
                            </div>
                        </div>
                        <form action="" method="POST" class="grid grid-cols-1 gap-2 sm:gap-4" x-data="{ selectedYear: '' }">
                            {% csrf_token %}

                            {% for message in messages %}
                                <div class="alert alert-danger">
                                    <i class="alert-icon fas fa-exclamation-circle"></i>
                                    <h2 class="alert-title">Fehler:</h2>
                                    <div class="alert-body">{{message}}</div>
                                </div>
                            {% endfor %}

                            <label class="block">
                                <span class="text-gray-700 dark:text-gray-200">Jahr</span>
                                <select class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50"
									x-model="selectedYear"
                                    id="id_year"
                                    name="year"
                                >
                                    {% for elem in formset.year %}
                                        {% if forloop.first %}
                                            <option value="">Alle</option>
                                        {% else %}
                                            {{ elem }}
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </label>
                            <label
                                x-show="selectedYear != ''"
                                x-transition:enter="transition ease-out duration-300"
                                x-transition:enter-start="opacity-0"
                                x-transition:enter-end="opacity-100"
                                x-transition:leave="transition ease-in duration-150"
                                x-transition:leave-start="opacity-100"
                                x-transition:leave-end="opacity-0"
                            >
                                <span class="text-gray-700 dark:text-gray-200">Monat</span>
								<select class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-sky-700 focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50"
                                    id="id_month"
                                    name="month"
                                >
                                    {% for elem in formset.month %}
                                        {% if forloop.first %}
                                            <option value=""></option>
                                        {% else %}
                                            {{ elem }}
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="checkbox" id="compact_view" name="checkbox" value="compact_view" {% if compact_view %} checked {% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
								<span class="ml-2 text-gray-700 dark:text-gray-200">Kompakte Ansicht</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="checkbox" id="fet_meeting_only" name="checkbox" value="fet_meeting_only" {% if fet_meeting_only %} checked {% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
								<span class="ml-2 text-gray-700 dark:text-gray-200">nur FET-Sitzungen</span>
                            </label>
                            <input type="submit" class="block btn btn-primary" value="Anzeigen" name="btn_input">
                        </form>

					</div>
				</div>
				<button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden" 
					@click="showModal = true"
					x-show="!showModal"
					x-transition:enter="transition duration-100 ease-in"
					x-transition:enter-start="opacity-0"
					x-transition:enter-end="opacity-100"
					x-transition:leave="transition duration-100 ease-out"
					x-transition:leave-start="opacity-100"
					x-transition:leave-end="opacity-0"
				>
					<i class="fas fa-filter p-2"></i>
				</button>
			</aside>

			<section class="my-8 sm:my-0 sm:w-3/5 xl:w-2/5 flex flex-col gap-4">
                {% if compact_view %}
                    {% for post in posts %}
                        {% include 'posts/partials/_posts_hero_compact.html' %}
                    {% endfor %}        
                {% else %}
                    {% for post in posts %}
                        {% include 'posts/partials/_posts_hero.html' %}
                    {% endfor %}
                {% endif %}
			</section>
		</div>
	</main>
{% endblock %}
