{% extends "base.html" %}
{% block title %}Sign In — Aura Inspector{% endblock %}
{% block content %}
<div class="content-wrapper d-flex align-items-center" style="min-height:90vh;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-sm-10 col-md-6 col-lg-4">

        <div class="text-center mb-4">
          <i class="bi bi-shield-lock-fill fs-1" style="color:#58a6ff;"></i>
          <h3 class="fw-bold mt-2 mb-1">Welcome back</h3>
          <p class="text-muted small">Sign in to your Aura Inspector account</p>
        </div>

        {% if error %}
        <div class="alert-danger-custom mb-3"><i class="bi bi-exclamation-triangle me-2"></i>{{ error }}</div>
        {% endif %}
        {% if success %}
        <div class="alert-success-custom mb-3"><i class="bi bi-check-circle me-2"></i>{{ success }}</div>
        {% endif %}

        <div class="card p-4">
          <form method="post" action="/login">
            <div class="mb-3">
              <label class="form-label small fw-semibold">Email address</label>
              <input type="email" name="email" class="form-control" placeholder="you@example.com" required autofocus/>
            </div>
            <div class="mb-3">
              <label class="form-label small fw-semibold">Password</label>
              <input type="password" name="password" class="form-control" placeholder="••••••••" required/>
            </div>
            <button type="submit" class="btn btn-primary w-100 fw-semibold">
              <i class="bi bi-box-arrow-in-right me-1"></i>Sign In
            </button>
          </form>
        </div>

        <p class="text-center mt-3 text-muted small">
          Don't have an account? <a href="/register" style="color:#58a6ff;">Create one free</a>
        </p>

      </div>
    </div>
  </div>
</div>
{% endblock %}