{% extends "base.html" %}

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

{% block content %}
<main>
  <div class="header">
    <h1>Login to <span>Guardian</span></h1>
  </div>

  <div class="login-form-container">
    <form method="post" action="{% url 'login' %}" class="incident-card">
      {% csrf_token %}
      
      {% if form.errors %}
        <div class="alert alert-danger">
          Your username and password didn't match. Please try again.
        </div>
      {% endif %}

      <div class="form-group">
        <label for="id_username">Username</label>
        <input type="text" name="username" id="id_username" class="form-control" required>
      </div>
      
      <div class="form-group">
        <label for="id_password">Password</label>
        <input type="password" name="password" id="id_password" class="form-control" required>
      </div>
      
      <div class="card-footer">
        <button type="submit" class="btn btn-review">Login</button>
      </div>
    </form>
  </div>
</main>
{% endblock %}