{% extends 'base.html' %}
{% block content %}

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

    <div class="card shadow-sm border-0 rounded-3">
      <div class="card-body p-4">

        <h3 class="text-center mb-4">Login</h3>

        <form method="post" novalidate>
          {% csrf_token %}
          {{ form.non_field_errors }}

          <!-- Username field -->
          <div class="mb-3">
            <label class="form-label">{{ form.username.label }}</label>
            <input
              type="text"
              name="{{ form.username.name }}"
              value="{{ form.username.value|default:'' }}"
              class="form-control"
              placeholder="Enter username"
              required
            >
            {{ form.username.errors }}
          </div>

          <!-- Password field -->
          <div class="mb-3">
            <label class="form-label">{{ form.password.label }}</label>
            <input
              type="password"
              name="{{ form.password.name }}"
              class="form-control"
              placeholder="Enter password"
              required
            >
            {{ form.password.errors }}
          </div>

          <button type="submit" class="btn btn-primary w-100">
            Login
          </button>
        </form>

      </div>
    </div>

  </div>
</div>

{% endblock %}