{% extends "base.html" %}
{% block content %}
<div class="max-w-md mx-auto bg-white shadow rounded-lg p-6 mt-8">
    <h1 class="text-2xl font-bold mb-2">Admin Login</h1>
    <p class="text-sm text-gray-600 mb-6">Sign in to manage clients and backups.</p>
    {% if error %}
        <div class="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
            {{ error }}
        </div>
    {% endif %}
    <form action="/login" method="post" class="space-y-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1" for="username">Username</label>
            <input id="username" type="text" name="username" required class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md p-2" />
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1" for="password">Password</label>
            <input id="password" type="password" name="password" required class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md p-2" />
        </div>
        <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Sign In</button>
    </form>
</div>
{% endblock %}