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

{% block content %}
<div class="row justify-content-center align-items-center" style="min-height: calc(100vh - 160px);">
  <div class="col-12 col-sm-10 col-md-7 col-lg-5 col-xl-4">
    <div class="card shadow-lg border-0 rounded-3">
      <div class="card-body p-4 p-md-5">

        <div class="text-center mb-4">
          <i class="bi bi-shield-fill-check text-warning" style="font-size:3rem;"></i>
          <h2 class="fw-bold mt-2 mb-0">SpamGate</h2>
          <p class="text-muted small">Mail Security Gateway</p>
        </div>

        <h5 class="fw-semibold mb-3 text-center">Sign In</h5>

        <form method="POST" action="{{ url_for('auth.login') }}" novalidate>
          {{ form.hidden_tag() if form.hidden_tag is defined }}

          <div class="mb-3">
            <label for="email" class="form-label fw-semibold">Email</label>
            <div class="input-group">
              <span class="input-group-text bg-light">
                <i class="bi bi-envelope-fill text-secondary"></i>
              </span>
              <input
                type="email"
                class="form-control form-control-lg {% if form and form.email and form.email.errors %}is-invalid{% endif %}"
                id="email"
                name="email"
                value="{{ form.email.data if form and form.email else '' }}"
                placeholder="you@example.com"
                autocomplete="username"
                autofocus
                required
              >
              {% if form and form.email and form.email.errors %}
                <div class="invalid-feedback">
                  {% for error in form.email.errors %}{{ error }}{% endfor %}
                </div>
              {% endif %}
            </div>
          </div>

          <div class="mb-3">
            <label for="password" class="form-label fw-semibold">Password</label>
            <div class="input-group">
              <span class="input-group-text bg-light">
                <i class="bi bi-lock-fill text-secondary"></i>
              </span>
              <input
                type="password"
                class="form-control form-control-lg {% if form and form.password and form.password.errors %}is-invalid{% endif %}"
                id="password"
                name="password"
                placeholder="Enter password"
                autocomplete="current-password"
                required
              >
              <button class="btn btn-outline-secondary" type="button" id="togglePassword"
                      title="Show/hide password" tabindex="-1">
                <i class="bi bi-eye" id="toggleIcon"></i>
              </button>
              {% if form and form.password and form.password.errors %}
                <div class="invalid-feedback">
                  {% for error in form.password.errors %}{{ error }}{% endfor %}
                </div>
              {% endif %}
            </div>
          </div>

          <div class="mb-4 d-flex align-items-center justify-content-between">
            <div class="form-check mb-0">
              <input
                type="checkbox"
                class="form-check-input"
                id="remember"
                name="remember"
                {% if form and form.remember and form.remember.data %}checked{% endif %}
              >
              <label class="form-check-label text-muted" for="remember">Remember me</label>
            </div>
          </div>

          <div class="d-grid">
            <button type="submit" class="btn btn-primary btn-lg fw-semibold">
              <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
            </button>
          </div>
        </form>

      </div>
    </div>
    <p class="text-center text-muted small mt-3">
      <i class="bi bi-shield-lock me-1"></i>Authorised access only
    </p>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
  const toggleBtn  = document.getElementById('togglePassword');
  const pwdInput   = document.getElementById('password');
  const toggleIcon = document.getElementById('toggleIcon');
  if (toggleBtn) {
    toggleBtn.addEventListener('click', () => {
      const isText = pwdInput.type === 'text';
      pwdInput.type = isText ? 'password' : 'text';
      toggleIcon.className = isText ? 'bi bi-eye' : 'bi bi-eye-slash';
    });
  }
</script>
{% endblock %}