{% extends "base.html" %} 
{% block title %}Login - QR Code Management{% endblock %}

{% block extra_styles %}
<!-- Include the new authentication styles -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
{% endblock %}

{% block content %}
<div class="auth-container">
  <div class="auth-card">
    <div class="auth-header">
      <div class="auth-logo">
        <i class="fas fa-qrcode"></i>
      </div>
      <h1>QR Manager</h1>
      <p>Sign in to your account</p>
    </div>

    <form method="POST" class="auth-form">
      <div class="form-group">
        <label for="username">
          <i class="fas fa-user"></i>
          Username
        </label>
        <input type="text" id="username" name="username" required />
      </div>

      <div class="form-group">
        <label for="password">
          <i class="fas fa-lock"></i>
          Password
        </label>
        <input type="password" id="password" name="password" required />
      </div>

      <button type="submit" class="btn btn-primary btn-full">
        <i class="fas fa-sign-in-alt"></i>
        Sign In
      </button>
    </form>

    <!-- Register link removed as requested -->
  </div>
</div>
{% endblock %} 

{% block extra_scripts %}
<script>
  // Enhanced form validation and user experience improvements
  document.addEventListener("DOMContentLoaded", function () {
    const form = document.querySelector(".auth-form");
    const inputs = form.querySelectorAll("input");

    // Add focus effects with improved visual feedback
    inputs.forEach((input) => {
      input.addEventListener("focus", function () {
        this.parentElement.classList.add("focused");
      });

      input.addEventListener("blur", function () {
        if (!this.value) {
          this.parentElement.classList.remove("focused");
        }
      });

      // Keep focus state if input has value
      if (input.value) {
        input.parentElement.classList.add("focused");
      }
    });

    // Enhanced form submission with loading state
    form.addEventListener("submit", function () {
      const submitBtn = form.querySelector('button[type="submit"]');
      const originalContent = submitBtn.innerHTML;
      
      submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing In...';
      submitBtn.disabled = true;
      
      // Re-enable button after 10 seconds as fallback
      setTimeout(() => {
        if (submitBtn.disabled) {
          submitBtn.innerHTML = originalContent;
          submitBtn.disabled = false;
        }
      }, 10000);
    });

    // Add keyboard navigation enhancement
    inputs.forEach((input, index) => {
      input.addEventListener("keydown", function (e) {
        if (e.key === "Enter" && index < inputs.length - 1) {
          e.preventDefault();
          inputs[index + 1].focus();
        }
      });
    });

    // Auto-focus first input
    if (inputs.length > 0) {
      inputs[0].focus();
    }
  });
</script>
{% endblock %}