{% extends "base.html" %}

{% block content %}
<div class="uk-flex uk-flex-center uk-margin-large-top">
  <form method="post" class="uk-form-stacked uk-card uk-card-default uk-card-body uk-width-1-3@m">
    {% csrf_token %}
    <fieldset class="uk-fieldset">

      <legend class="uk-legend uk-text-center">Log In</legend>

      {% if form.errors %}
        <div class="uk-alert-danger" uk-alert>
          <p>Invalid username or password.</p>
        </div>
      {% endif %}

      <div class="uk-margin">
        <label class="uk-form-label" for="id_username">Username</label>
        <div class="uk-form-controls">
          <input class="uk-input" type="text" name="username" autofocus required id="id_username" value="{{ form.username.value|default_if_none:'' }}">
        </div>
      </div>

      <div class="uk-margin">
        <label class="uk-form-label" for="id_password">Password</label>
        <div class="uk-form-controls">
          <input class="uk-input" type="password" name="password" required id="id_password">
        </div>
      </div>

      <div class="uk-margin uk-text-center">
        <button type="submit" class="uk-button uk-button-primary uk-width-1-1">Log In</button>
      </div>

    </fieldset>
  </form>
</div>
{% endblock %}