{% 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">
        <button class="button is-primary level-left">
          <span class="icon">
            <svg class="feather">
              <use href="/static/feather-sprite.svg#log-in" />
            </svg>
          </span>
          <span>Anmelden</span>
        </button>
        <a class="button is-info is-light level-right" hx-boost="true" href="/reset-password">Passwort vergessen</a>
      </div>
    </form>
  </div>
</section>
{% endblock %}