{% extends 'base_auth.html' %}

{% block title %}Sign In{% endblock %}

{% block content %}
<section class="surface-card p-4 p-lg-5 skeleton-on-load">
  <div class="mb-4 text-center">
    <h1 class="h4 fw-bold mb-1">Sign in</h1>
    <p class="text-muted mb-0">Access your CRM foundation workspace.</p>
  </div>

  <form method="post" novalidate>
    {% csrf_token %}

    {% if form.non_field_errors %}
      <div class="alert alert-danger" role="alert">{{ form.non_field_errors }}</div>
    {% endif %}

    <div class="mb-3">
      <label class="form-label" for="id_identifier">Email</label>
      {{ form.identifier }}
      {% if form.identifier.errors %}<div class="invalid-feedback d-block">{{ form.identifier.errors|join:', ' }}</div>{% endif %}
    </div>

    <div class="mb-3">
      <label class="form-label" for="id_password">Password</label>
      <div class="input-group password-field-group">
        {{ form.password }}
        <button
          class="btn btn-outline-secondary password-toggle-btn"
          type="button"
          data-password-toggle
          data-target="id_password"
          aria-controls="id_password"
          aria-label="Show password"
        >
          <i class="bi bi-eye-fill" aria-hidden="true"></i>
        </button>
      </div>
      <div class="caps-lock-hint" data-caps-lock-for="id_password" role="status" aria-live="polite">Caps Lock is on.</div>
      {% if form.password.errors %}<div class="invalid-feedback d-block">{{ form.password.errors|join:', ' }}</div>{% endif %}
    </div>

    <div class="form-check mb-3">
      {{ form.remember_me }}
      <label class="form-check-label" for="id_remember_me">Remember me</label>
    </div>

    <button type="submit" class="btn btn-brand w-100">Sign In</button>
  </form>

  <hr class="my-4">

  <div class="d-flex justify-content-between flex-wrap gap-2 small">
    <span class="text-muted">Need an account? Contact an administrator.</span>
    <a href="{% url 'accounts:forgot_password' %}">Forgot password?</a>
  </div>
</section>
{% endblock %}