{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Sign in · Illustrations</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="{% static 'app.css' %}">
</head>
<body class="login-page">

  <div class="login-hero">
    <div class="login-card">
      <h1 class="login-title">Sign in</h1>

      {% if form.non_field_errors %}
        <div class="login-alert">
          {% for e in form.non_field_errors %}{{ e }}{% if not forloop.last %}<br>{% endif %}{% endfor %}
        </div>
      {% endif %}

      <form method="post" action="{% url 'login' %}" novalidate>
        {% csrf_token %}
        {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}

        <label for="id_username" class="login-label">Username</label>
        <input id="id_username" name="username" type="text" autocomplete="username"
               value="{{ form.username.value|default:'' }}" required autofocus class="login-input">

        {% if form.username.errors %}
          <div class="login-field-error">
            {% for e in form.username.errors %}{{ e }}{% if not forloop.last %}<br>{% endif %}{% endfor %}
          </div>
        {% endif %}

        <label for="id_password" class="login-label">Password</label>
        <input id="id_password" name="password" type="password" autocomplete="current-password"
               required class="login-input">

        {% if form.password.errors %}
          <div class="login-field-error">
            {% for e in form.password.errors %}{{ e }}{% if not forloop.last %}<br>{% endif %}{% endfor %}
          </div>
        {% endif %}

        <button class="btn btn-primary btn-lg login-submit" type="submit">Sign in</button>
      </form>
    </div>
  </div>

</body>
</html>