{% 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>
        
        {% if error %}
        <div class="alert alert-danger" style="color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); padding: 0.75rem; border-radius: 8px; margin-bottom: 1.5rem; font-size: 0.875rem;">
            {{ error }}
        </div>
        {% endif %}
        
        <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="e.g. 14045" required autofocus>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="••••••••" required>
            </div>
            <button type="submit" class="btn-primary">Log In</button>
        </form>
    </div>
</div>
{% endblock %}