{% extends "base.html" %}
{% block title %}Login - OpenVPN Manager{% endblock %}
{% block content %}
<div class="max-w-md mx-auto mt-16 bg-gray-800 p-8 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-6 text-center">Login</h2>
    
    <form action="{{ url_for('login') }}" method="post">
        <div class="mb-4">
            <label for="username" class="block text-sm font-medium mb-2">Username</label>
            <input type="text" id="username" name="username" class="w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        </div>
        <div class="mb-4">
            <label for="password" class="block text-sm font-medium mb-2">Password</label>
            <input type="password" id="password" name="password" class="w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        </div>
        {% if not has_valid_license %}
        <div class="mb-6" id="licenseField">
            <label for="license_key" class="block text-sm font-medium mb-2">License Key</label>
            <input type="text" id="license_key" name="license_key" class="w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        {% endif %}
        <button type="submit" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            Login
        </button>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    {% if has_valid_license %}
        document.getElementById('licenseField')?.classList.add('hidden');
    {% else %}
        if(localStorage.getItem('validLicense')) {
            document.getElementById('license_key').value = localStorage.getItem('validLicense');
        }
    {% endif %}
});
</script>
{% endblock %}