{% extends "base.html" %}
{% block title %}Login — Smart Billing{% endblock %}
{% block auth_content %}
<div class="login-page">
  <div class="login-card">
    <div class="login-logo">
      <h1><i class="bi bi-shop"></i> Smart Billing</h1>
      <p>Business Billing &amp; Inventory Management</p>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
        <div class="alert alert-{{ category }} py-2">{{ message }}</div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    <form method="POST" action="{{ url_for('login') }}">
      <div class="mb-3">
        <label class="form-label">Email / Username</label>
        <input type="email" name="email" class="form-control" placeholder="admin@shop.com" required autofocus>
      </div>
      <div class="mb-3">
        <label class="form-label">Password</label>
        <input type="password" name="password" class="form-control" placeholder="Enter password" required>
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" name="remember" class="form-check-input" id="remember">
        <label class="form-check-label" for="remember">Remember Me</label>
      </div>
      <button type="submit" class="btn btn-primary w-100 mb-2">Login</button>
      <div class="text-center">
        <a href="{{ url_for('forgot_password') }}" class="text-muted small">Forgot Password?</a>
      </div>
    </form>

    <div class="mt-4 p-3 bg-light rounded small text-muted">
      <strong>Demo credentials:</strong><br>
      Admin: admin@shop.com / admin123<br>
      Staff: staff@shop.com / admin123
    </div>
  </div>
</div>
{% endblock %}