{% extends "base.html" %}

{% block body %}
<section class="section">
	<div class="container">
		<h1 class="title">Brass - Anmeldung</h1>
		<form class="box" action="/login" method="post" hx-boost="true" hx-target-400="#error-message" hx-on:change="document.getElementById('error-message').innerHTML = ''">
			<div class="field">
				<label class="label" for="email">E-Mail:</label>
				<div class="control">
					<input class="input" placeholder="max.mustermann@example.com" name="email" type="text" required>
				</div>
			</div>

			<div class="field">
				<label class="label" for="password">Passwort:</label>
				<div class="control">
					<input class="input" placeholder="**********" name="password" type="password" required>
				</div>
			</div>

			<div id="error-message" class="mb-3 help is-danger"></div>

			<div class="level">
				<input class="button is-primary level-left" type="submit" value="Anmelden" />
				<a class="button is-info is-light level-right" hx-boost="true" href="/reset-password" >Passwort vergessen</a>
			</div>
		</form>
	</div>
</section>
{% endblock %}