{% extends "business/auth/auth_base.html" %}

{% block title %}Login - Inventory Management System{% endblock %}

{% block auth_title %}Welcome Back!{% endblock %}

{% block auth_subtitle %}Sign in to your account to continue{% endblock %}

{% block auth_content %}
<form method="POST" action="{% url 'login' %}" novalidate>
    {% csrf_token %}
    
    <!-- Hidden redirect field -->
    {% if request.GET.next %}
        <input type="hidden" name="next" value="{{ request.GET.next }}">
    {% endif %}
    
    <!-- Username/Email Field -->
    <div class="mb-3">
        <label for="username" class="form-label">Username or Email</label>
        <div class="input-group">
            <span class="input-group-text">
                <i class="fas fa-user"></i>
            </span>
            <input type="text" 
                   class="form-control" 
                   id="username" 
                   name="username" 
                   placeholder="Enter your username or email"
                   required
                   autocomplete="username"
                   autocorrect="off"
                   autocapitalize="none"
                   spellcheck="false">
        </div>
        <div class="invalid-feedback">
            Please enter your username or email.
        </div>
    </div>
    
    <!-- Password Field -->
    <div class="mb-3">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <label for="password" class="form-label">Password</label>
            <a href="{% url 'password_reset' %}" class="small text-decoration-none">Forgot password?</a>
        </div>
        <div class="input-group">
            <span class="input-group-text">
                <i class="fas fa-lock"></i>
            </span>
            <input type="password" 
                   class="form-control" 
                   id="password" 
                   name="password" 
                   placeholder="Enter your password"
                   required
                   autocomplete="current-password">
            <button class="btn btn-outline-secondary toggle-password" type="button">
                <i class="fas fa-eye"></i>
            </button>
        </div>
        <div class="invalid-feedback">
            Please enter your password.
        </div>
    </div>
    
    <!-- Remember Me -->
    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="remember" name="remember">
        <label class="form-check-label" for="remember">Remember me</label>
    </div>
    
    <!-- Submit Button -->
    <button type="submit" class="btn btn-primary-auth btn-auth mb-3">
        <i class="fas fa-sign-in-alt me-2"></i>
        Sign In
    </button>
    
    <!-- Divider 
    <div class="divider">
        <span class="divider-text">or continue with</span>
    </div>-->
    
    <!-- Social Login (Optional) 
    <div class="d-grid gap-2">
        <a href="#" class="btn btn-outline-primary btn-auth">
            <i class="fab fa-google me-2"></i>
            Sign in with Google
        </a>
    </div>-->
</form>
{% endblock %}

{% block auth_footer %}
<p class="mb-0">
    Don't have an account? 
    <a href="{% url 'register' %}" class="fw-semibold">Sign up now</a>
</p>
{% endblock %}

{% block extra_js %}
<script>
    // Focus on username field on page load
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('username').focus();
    });
    
    // Auto-capitalization fix
    document.getElementById('username').addEventListener('input', function(e) {
        this.value = this.value.toLowerCase();
    });
</script>
{% endblock %}