{% extends "layouts/base.html" %}
{% block title %}Sign In{% endblock %}

{% block content %}
<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
  <div class="card shadow" style="width: 420px;">
    <div class="card-body p-4">
      <div class="text-center mb-4">
        <i class="bi bi-scissors fs-1 text-primary"></i>
        <h4 class="mt-2 fw-bold">Salon POS</h4>
        <p class="text-muted small">Sign in to your account</p>
      </div>

      {% if error %}
        <div class="alert alert-danger py-2">{{ error }}</div>
      {% endif %}

      <form method="POST" action="{{ url_for('tenant_auth.login') }}" novalidate>
        <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"
                 autocomplete="username" required autofocus>
        </div>

        <div class="mb-3">
          <label for="password" class="form-label">Password</label>
          <input type="password" class="form-control" id="password" name="password"
                 autocomplete="current-password" required>
        </div>

        <div class="d-grid mt-4">
          <button type="submit" class="btn btn-primary">Sign In</button>
        </div>
      </form>

      <hr class="my-3">

      <div class="text-center">
        <a href="{{ url_for('staff_auth.staff_login') }}" class="btn btn-outline-secondary btn-sm w-100 mb-2">
          <i class="bi bi-person-badge me-1"></i>Staff Login (PIN)
        </a>
        <a href="{{ url_for('tenant_auth.password_reset_request') }}" class="text-muted small d-block mt-2">
          Forgot password?
        </a>
        <a href="{{ url_for('tenant_auth.demo_login') }}" class="text-muted small d-block mt-1">
          View demo account
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}