{% extends "base.html" %}

{% block content %}
<div class="card" style="max-width: 400px; margin: 100px auto;">
    <h2 style="text-align: center; margin-bottom: 30px;">🏥 Medical Center Login</h2>
    
    <form method="POST">
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Username:</label>
            <input type="text" name="username" required style="width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 5px;">
        </div>
        
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Password:</label>
            <input type="password" name="password" required style="width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 5px;">
        </div>
        
        <button type="submit" class="btn btn-primary" style="width: 100%;">🔐 Login</button>
    </form>
</div>

<script>
    // Allow Enter key to submit
    document.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            document.querySelector('form').submit();
        }
    });
</script>
{% endblock %}