{% extends "layout.html" %}
{% block content %}
<div class="min-h-[70vh] flex items-center justify-center">
    <div class="bg-[#12161f] border border-gray-800 w-full max-w-md rounded-3xl p-10 shadow-2xl">
        <div class="text-center mb-10">
            <h2 class="text-4xl font-black text-white italic tracking-tighter">BIND<span class="text-blue-500">PRO</span></h2>
            <p class="text-gray-500 font-bold uppercase text-[10px] tracking-widest mt-2">Authentication Required</p>
        </div>
        
        <form method="POST" action="/login" class="space-y-6">
            <div>
                <label class="block text-[10px] font-black text-gray-500 uppercase mb-2 ml-1 tracking-widest">Username</label>
                <input type="text" name="username" required class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-4 text-white font-mono outline-none focus:border-blue-500 transition shadow-inner">
            </div>
            <div>
                <label class="block text-[10px] font-black text-gray-500 uppercase mb-2 ml-1 tracking-widest">Password</label>
                <input type="password" name="password" required class="w-full bg-[#0b0e14] border border-gray-800 rounded-xl p-4 text-white font-mono outline-none focus:border-blue-500 transition shadow-inner">
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-black py-4 rounded-xl shadow-xl transition transform hover:-translate-y-1 uppercase text-xs tracking-widest mt-4">Secure Sign In</button>
        </form>
    </div>
</div>
{% endblock %}