{% extends 'layout.html' %}

{% block content %}
<div class="login-wrapper">
    <div class="glass-panel login-panel">
        <div class="brand-logo">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
        </div>
        <h1 class="title">Tada Migration</h1>
        <p class="subtitle">Enter your catapa ID to securely access the migration portal.</p>
        
        <form action="{{ url_for('login') }}" method="POST" class="login-form">
            <div class="input-group">
                <label for="employee_id">Catapa ID</label>
                <input type="text" id="employee_id" name="employee_id" placeholder="14045" required autofocus>
            </div>
            <button type="submit" class="btn-primary">Login</button>
        </form>
    </div>
</div>
{% endblock %}