{% extends "base/layout.html" %}

{% block title %}Login{% endblock %}

{% block content %}
<div class="container">
  {% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
  <div class="row justify-content-md-center">
    {% for category, message in messages %}
    <div class="col-12 col-lg-6 p-2">
      <div class="alert alert-{{ category }}" role="alert">
        {{ message }}
      </div>
    </div>
    {% endfor %}
  </div>
  {% endif %}
  {% endwith %}

  <div class="row justify-content-md-center">
    <div class="col-sm-4">

      <div class="card">
        <div class="card-header">Login</div>
        <div class="card-body text-success">
          <form method="POST" action="/login/">
            <div class="input-group mb-3">
              <input type="text" name="username" class="form-control" placeholder="Username" autofocus>
            </div>
            <div class="input-group mb-3">
              <input type="password" name="password" class="form-control" placeholder="Password">
            </div>
            <div class="d-grid gap-2 mb-2">
              <button class="btn btn-dark" type="submit">Sign in</button>
            </div>
            <div class="d-grid gap-2 mb-2">
              <a href="/register/" class="btn btn-secondary" role="button">Register</a>
            </div>
          </form>
        </div>
      </div>

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