{% extends 'base.html' %}

{% load post_helpers %}

{% 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 sm:shadow-lg"
						@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 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 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">Jahr</span>
								<select class="block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
									x-model="selectedYear"
                                    id="id_year"
                                    name="year"
								>

								</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">Monat</span>
								<select class="block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
									<option value="" selected></option>
									<option value="1">Jänner</option>
									<option value="2">Februar</option>
									<option value="3">März</option>
									<option value="4">April</option>
									<option value="5">Mai</option>
									<option value="6">Juni</option>
									<option value="7">Juli</option>
									<option value="8">August</option>
									<option value="9">September</option>
									<option value="10">Oktober</option>
									<option value="11">November</option>
									<option value="12">Dezember</option>
								</select>
							</label>
							<label class="inline-flex items-center">
								<input type="checkbox" class="rounded border-gray-300 text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50">
								<span class="ml-2 text-gray-700">Kompakte Ansicht</span>
							</label>
							<label class="inline-flex items-center">
								<input type="checkbox" class="rounded border-gray-300 text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50">
								<span class="ml-2 text-gray-700">nur FET-Sitzungen</span>
							</label>
							<input type="submit" class="block btn btn-primary" value="Anzeigen">
						</form>
					</div>
				</div>
				<button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker text-blue-50 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>

<div class="grid-container">
    <div class="grid-x grid-margin-x">
        <div class="cell medium-8">
        {% for message in messages %}
            <p id="messages" style="background-color: red">{{message}}</p>
        {% endfor %}
        </div>
    </div>

    <form action="" method="post">
    {% csrf_token %}
        <div class="grid-x grid-margin-x padding-top-1">

            {{ formset.management_form }}

            {% for form in formset %}
            <div class="cell medium-3 large-2 small-10">
                {{ form.label }}
                {{ form }}
            </div>
            {% endfor %}

            <div class="cell medium-3 large-2 small-10 align-self-middle">          
                <input type="checkbox" id="compact_view" name="checkbox" value="compact_view" {% if compact_view %} checked {% endif %}>
                <label for="compact_view">kompakte Ansicht</label>

                <input type="checkbox" id="fet_meeting_only" name="checkbox" value="fet_meeting_only" {% if fet_meeting_only %} checked {% endif %}>
                <label for="fet_meeting_only">nur FET Sitzung</label>
            </div>

            <div class="cell medium-3 large-2 small-10 align-self-bottom">
                <input type="submit" class="button" name="btn_input" value="Suchen">
            </div>
        </div>
    </form>
</div>
{% endblock %}