{% extends 'base.html' %}

{% block title %}Login{% endblock %}

{% block content %}
	<!-- Main Content -->
	<main class="container mx-auto w-full px-4 my-8 flex-grow flex flex-col">
		<h1 class="page-title">Login für FET-Mitarbeiter</h1>
		<div class="w-full h-full flex-1 flex justify-center items-center">
			<form action="" method="POST" class="sm:p-4 sm:w-3/5 md:w-1/2 lg:w-2/5 xl:w-1/3 2xl:w-1/4 grid grid-cols-1 gap-3 sm:gap-6">
                {% csrf_token %}

                {% for message in messages %}
                    <div class="alert alert-danger">
                        <i class="alert-icon fas fa-check-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">Username</span>
					<input type="text" name="username" class="mt-1 block w-full 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" required="required">
				</label>
				<label class="block">
					<span class="text-gray-700 dark:text-gray-200">Passwort</span>
					<input type="password" name="password" class="mt-1 block w-full 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" required="required">
				</label>
				<input type="submit" class="block btn btn-primary" value="Anmelden">
			</form>
		</div>
	</main>
{% endblock %}
