{% extends "base.html" %}

{% block content %}
<div class="flex items-center justify-center min-h-[80vh]">
    <div class="login-card p-8 w-full max-w-md">
        <h2 class="text-2xl font-bold text-nyora mb-6 text-center">Nyora Infrastructure</h2>
        <form action="/auth/login" method="POST" class="space-y-6">
            <div>
                <label for="username" class="block text-sm font-medium dark:text-gray-400 text-gray-500">Username</label>
                <input type="text" id="username" name="username" placeholder="Identifiant" required
                    class="mt-1 block w-full px-4 py-3 dark:bg-gray-900 bg-white border border-gray-600 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-nyora focus:border-transparent transition">
            </div>
            <div>
                <label for="password" class="block text-sm font-medium dark:text-gray-400 text-gray-500">Password</label>
                <input type="password" id="password" name="password" placeholder="Mot de passe" required
                    class="mt-1 block w-full px-4 py-3 dark:bg-gray-900 bg-white border border-gray-600 rounded-md text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-nyora focus:border-transparent transition">
            </div>
            <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-gray-900 bg-nyora hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-nyora focus:ring-offset-gray-900 transition">
                Sign In
            </button>
        </form>
    </div>
</div>
{% endblock %}