{% extends "common/base.html" %}

{% block title %}Set Up Password{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="max-w-md mx-auto">
        <div class="bg-white rounded-lg shadow p-6">
            <h2 class="text-2xl font-bold mb-6 text-center" style="color: var(--primary-color);">Set Up Your Password</h2>
            
            <form method="POST" class="space-y-4">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fas fa-lock me-2" style="color: var(--primary-color);"></i>New Password
                    </label>
                    <input type="password" name="password" id="password" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2"
                           style="--tw-ring-color: var(--primary-color);">
                </div>
                
                <div>
                    <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fas fa-lock me-2" style="color: var(--primary-color);"></i>Confirm Password
                    </label>
                    <input type="password" name="confirm_password" id="confirm_password" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2"
                           style="--tw-ring-color: var(--primary-color);">
                </div>

                <div class="mt-4 space-y-2">
                    <h3 class="text-sm font-medium text-gray-700">Password Requirements:</h3>
                    <ul class="space-y-2 pl-0" id="password-requirements">
                        <li id="length-req" class="text-sm text-gray-500 flex items-center">
                            <i class="fas fa-times-circle mr-2"></i>At least 8 characters long
                        </li>
                        <li id="uppercase-req" class="text-sm text-gray-500 flex items-center">
                            <i class="fas fa-times-circle mr-2"></i>At least one uppercase letter
                        </li>
                        <li id="lowercase-req" class="text-sm text-gray-500 flex items-center">
                            <i class="fas fa-times-circle mr-2"></i>At least one lowercase letter
                        </li>
                        <li id="number-req" class="text-sm text-gray-500 flex items-center">
                            <i class="fas fa-times-circle mr-2"></i>At least one number
                        </li>
                        <li id="special-req" class="text-sm text-gray-500 flex items-center">
                            <i class="fas fa-times-circle mr-2"></i>At least one special character
                        </li>
                    </ul>
                </div>
                
                <button type="submit" class="w-full text-white px-6 py-2 rounded-lg transition duration-200 mt-6"
                        style="background-color: var(--primary-color); border: 1px solid var(--primary-color);"
                        onmouseover="this.style.backgroundColor='var(--primary-light)'"
                        onmouseout="this.style.backgroundColor='var(--primary-color)'">
                    <i class="fas fa-save me-2"></i>Set Password
                </button>
            </form>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const passwordInput = document.getElementById('password');
    const confirmInput = document.getElementById('confirm_password');
    
    function checkPasswordRequirements(password) {
        // Length check
        const lengthReq = document.getElementById('length-req');
        if (password.length >= 8) {
            lengthReq.classList.remove('text-gray-500');
            lengthReq.classList.add('text-green-600');
            lengthReq.querySelector('i').className = 'fas fa-check-circle mr-2';
        } else {
            lengthReq.classList.remove('text-green-600');
            lengthReq.classList.add('text-gray-500');
            lengthReq.querySelector('i').className = 'fas fa-times-circle mr-2';
        }
        
        // Uppercase check
        const uppercaseReq = document.getElementById('uppercase-req');
        if (/[A-Z]/.test(password)) {
            uppercaseReq.classList.remove('text-gray-500');
            uppercaseReq.classList.add('text-green-600');
            uppercaseReq.querySelector('i').className = 'fas fa-check-circle mr-2';
        } else {
            uppercaseReq.classList.remove('text-green-600');
            uppercaseReq.classList.add('text-gray-500');
            uppercaseReq.querySelector('i').className = 'fas fa-times-circle mr-2';
        }
        
        // Lowercase check
        const lowercaseReq = document.getElementById('lowercase-req');
        if (/[a-z]/.test(password)) {
            lowercaseReq.classList.remove('text-gray-500');
            lowercaseReq.classList.add('text-green-600');
            lowercaseReq.querySelector('i').className = 'fas fa-check-circle mr-2';
        } else {
            lowercaseReq.classList.remove('text-green-600');
            lowercaseReq.classList.add('text-gray-500');
            lowercaseReq.querySelector('i').className = 'fas fa-times-circle mr-2';
        }
        
        // Number check
        const numberReq = document.getElementById('number-req');
        if (/[0-9]/.test(password)) {
            numberReq.classList.remove('text-gray-500');
            numberReq.classList.add('text-green-600');
            numberReq.querySelector('i').className = 'fas fa-check-circle mr-2';
        } else {
            numberReq.classList.remove('text-green-600');
            numberReq.classList.add('text-gray-500');
            numberReq.querySelector('i').className = 'fas fa-times-circle mr-2';
        }
        
        // Special character check
        const specialReq = document.getElementById('special-req');
        if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
            specialReq.classList.remove('text-gray-500');
            specialReq.classList.add('text-green-600');
            specialReq.querySelector('i').className = 'fas fa-check-circle mr-2';
        } else {
            specialReq.classList.remove('text-green-600');
            specialReq.classList.add('text-gray-500');
            specialReq.querySelector('i').className = 'fas fa-times-circle mr-2';
        }
    }
    
    passwordInput.addEventListener('input', function() {
        checkPasswordRequirements(this.value);
    });
    
    confirmInput.addEventListener('input', function() {
        if (this.value === passwordInput.value) {
            this.style.borderColor = 'var(--primary-color)';
        } else {
            this.style.borderColor = '#dc2626';
        }
    });
});
</script>
{% endblock %}
{% endblock %}