{% extends "layouts/base.html" %}
{% block title %}Staff Login{% endblock %}

{% block content %}
<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
  <div class="card shadow" style="width: 380px;">
    <div class="card-body p-4">
      <div class="text-center mb-4">
        <i class="bi bi-person-badge fs-1 text-primary"></i>
        <h4 class="mt-2 fw-bold">Staff Login</h4>
        <p class="text-muted small">Enter your phone number and PIN</p>
      </div>

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

      <form method="POST" action="{{ url_for('staff_auth.staff_login') }}" novalidate>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <div class="mb-3">
          <label for="phone" class="form-label">Phone number</label>
          <input type="tel" class="form-control form-control-lg" id="phone" name="phone"
                 autocomplete="tel" placeholder="e.g. 555-123-4567" required autofocus>
        </div>

        <div class="mb-3">
          <label for="passcode" class="form-label">PIN</label>
          <input type="password" class="form-control form-control-lg text-center"
                 id="passcode" name="passcode"
                 inputmode="numeric" pattern="[0-9]*"
                 minlength="4" maxlength="6"
                 autocomplete="one-time-code"
                 placeholder="••••" required>
          <div class="form-text text-center">4–6 digit PIN</div>
        </div>

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

      <div class="text-center mt-4">
        <a href="{{ url_for('tenant_auth.login') }}" class="text-muted small">
          Manager / Owner login
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}