{% extends "tenant/layouts/base.html" %}
{% block title %}Staff Login{% endblock %}
{% block content %}
<div class="row justify-content-center">
  <div class="col-md-4">
    <div class="card shadow-sm mt-5">
      <div class="card-body p-4">
        <h4 class="card-title mb-4 text-center">Staff Login</h4>
        {% if error %}
          <div class="alert alert-danger">{{ error }}</div>
        {% endif %}
        <form method="POST" action="{{ url_for('staff_auth.staff_login') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="mb-3">
            <label class="form-label">Phone Number</label>
            <input type="tel" name="phone" class="form-control form-control-lg"
                   placeholder="e.g. 5551234567" required autofocus inputmode="numeric">
          </div>
          <div class="mb-3">
            <label class="form-label">Passcode</label>
            <input type="password" name="passcode" class="form-control form-control-lg"
                   placeholder="4–6 digit PIN" maxlength="6" inputmode="numeric" required>
          </div>
          <button type="submit" class="btn btn-success w-100 btn-lg">Clock In</button>
        </form>
        <div class="text-center mt-3 small">
          <a href="{{ url_for('tenant_auth.login') }}">Manager / Owner login</a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}