{% 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 = ''">

      {% if let Some(next) = next %}
      <input type="hidden" name="next" value="{{ next }}" />
      {% endif %}

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