{% extends 'core/base.html' %}
{% load static %}
{% load widget_tweaks %}
{% block title %}
  Medwings | Log In
{% endblock title %}

{% block content %}
<div class="flex flex-col justify-center items-center gap-2 py-4">
  <h1>Log In</h1>
  <form method="post" action="{% url 'login' %}">
    {% csrf_token %}
    <fieldset class="flex flex-col gap-4 items-center max-w-sm">
      <legend>Please enter your login details</legend>

      {% if form.non_field_errors %}
        <div class="flex flex-col gap-2 status-message error">
          {% for error in form.non_field_errors %}
            <p class="error">{{ error }}</p>
          {% endfor %}
        </div>
      {% endif %}

      <div class="flex flex-col gap-8">

        <div class="flex flex-col">
          {% render_field form.username|add_error_class:"error" %}
          <label for="{{ form.username.id_for_label }}">
              {% render_field form.username.label %}
          </label>
          {% if form.username.errors %}
            <div class="flex flex-col gap-2 status-message error">
              {% for error in form.username.errors %}
                <p class="error">{{ error }}</p>
              {% endfor %}
            </div>
          {% endif %}
        </div>

        <div class="flex flex-col">
          {% render_field form.password|add_error_class:"error" %}
          <label for="{{ form.password.id_for_label }}">
              {% render_field form.password.label %}
          </label>
          {% if form.password.errors %}
            <div class="flex flex-col gap-2 status-message error">
              {% for error in form.password.errors %}
                <p class="error">{{ error }}</p>
              {% endfor %}
            </div>
          {% endif %}
        </div>

      </div>

      <input class="max-w-64" type="submit" value="Log In">

    </fieldset>
  </form>

  {# Assumes you set up the password_reset view in your URLconf #}
  {% comment %}<p><a href="{% url 'password_reset' %}">Lost password?</a></p>{% endcomment %}
</div>
{% endblock content %}
