{% extends "base.html" %}
{% block title %}Log In — Menu Planner{% endblock %}

{% block content %}
<div class="row justify-content-center mt-5">
  <div class="col-sm-8 col-md-5 col-lg-4">
    <div class="card shadow-sm">
      <div class="card-body p-4">
        <div class="text-center mb-4">
          <i class="bi bi-journal-richtext fs-1" style="color:var(--primary)"></i>
          <h2 class="h4 fw-bold mt-2">Menu Planner</h2>
          <p class="text-muted small">Log in to plan meals and manage recipes</p>
        </div>

        <form method="POST" action="/login{% if request.args.get('next') %}?next={{ request.args.get('next') }}{% endif %}">
          <div class="mb-3">
            <label class="form-label fw-semibold" for="username">Username</label>
            <input type="text" class="form-control" id="username" name="username"
                   autocomplete="username" autofocus required>
          </div>
          <div class="mb-4">
            <label class="form-label fw-semibold" for="password">Password</label>
            <input type="password" class="form-control" id="password" name="password"
                   autocomplete="current-password" required>
          </div>
          <button type="submit" class="btn btn-primary w-100">
            <i class="bi bi-box-arrow-in-right me-2"></i>Log in
          </button>
        </form>

        <hr class="my-3">
        <p class="text-center text-muted small mb-0">
          <i class="bi bi-eye me-1"></i>Browsing and viewing is open to everyone.
        </p>
      </div>
    </div>
  </div>
</div>
{% endblock %}