{% extends "layout.html" %}

{% block content %}
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6 col-lg-5">
      <div class="card shadow-sm mt-5">
        <div class="card-body p-5">
          <div class="text-center mb-4">
            <h2 class="card-title">Login</h2>
            <p class="text-muted">Sign in to your account</p>
          </div>

          {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
          {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          {% endfor %}
          {% endif %}
          {% endwith %}

          <form method="POST" action="{{ url_for('auth.login') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="mb-3">
              <label for="email" class="form-label">Email address</label>
              <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <div class="mb-4">
              <label for="password" class="form-label">Password</label>
              <input type="password" class="form-control" id="password" name="password" required>
            </div>
            <div class="mb-4 form-check">
              <input type="checkbox" class="form-check-input" id="remember" name="remember">
              <label class="form-check-label" for="remember">Remember me</label>
            </div>
            <button type="submit" class="btn btn-primary w-100">Login</button>
          </form>

          <div class="mt-4 text-center">
            <p>Don't have an account? <a href="{{ url_for('auth.register') }}">Register here</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}