{% extends "layouts/base.html" %}

{% block auth_content %}
<div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <div class="text-center">
            <i class="fas fa-robot text-6xl text-primary-500 mb-4"></i>
            <h2 class="text-3xl font-bold tracking-tight text-gray-900">{{ t('app.title') }}</h2>
            <p class="mt-2 text-sm text-gray-600">{{ t('auth.signin') }}</p>
        </div>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            {% if error %}
                <div class="mb-4 rounded-md bg-red-50 p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-circle text-red-400"></i>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800">
                                {{ t('auth.error') }}
                            </h3>
                            <div class="mt-2 text-sm text-red-700">
                                <p>{{ error }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            <form class="space-y-6" action="/login" method="POST">
                <div>
                    <label for="subdomain" class="block text-sm font-medium text-gray-700">
                        {{ t('auth.organization') }}
                    </label>
                    <div class="mt-1">
                        <input id="subdomain" name="subdomain" type="text" 
                               value="{{ subdomain or 'localhost' }}"
                               class="form-input" placeholder="{{ t('auth.organization_placeholder') }}">
                    </div>
                    <p class="mt-1 text-xs text-gray-500">
                        {{ t('auth.organization_help') }}
                    </p>
                </div>

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">
                        {{ t('auth.email') }}
                    </label>
                    <div class="mt-1">
                        <input id="email" name="email" type="email" autocomplete="email" required
                               value="{{ email or '' }}"
                               class="form-input" placeholder="{{ t('auth.email_placeholder') }}">
                    </div>
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700">
                        {{ t('auth.password') }}
                    </label>
                    <div class="mt-1">
                        <input id="password" name="password" type="password" autocomplete="current-password" required
                               class="form-input" placeholder="{{ t('auth.password_placeholder') }}">
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember-me" name="remember-me" type="checkbox" 
                               class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
                        <label for="remember-me" class="ml-2 block text-sm text-gray-900">
                            {{ t('auth.remember') }}
                        </label>
                    </div>

                    <div class="text-sm">
                        <a href="/forgot-password" class="font-medium text-primary-600 hover:text-primary-500">
                            {{ t('auth.forgot_password') }}
                        </a>
                    </div>
                </div>

                <div>
                    <button type="submit" class="btn-primary w-full justify-center">
                        <i class="fas fa-sign-in-alt mr-2"></i>
                        {{ t('auth.login') }}
                    </button>
                </div>
            </form>

            <div class="mt-6">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-300"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-gray-500">{{ t('auth.need_account') }}</span>
                    </div>
                </div>

                <div class="mt-6">
                    <a href="/register" class="btn-secondary w-full justify-center">
                        <i class="fas fa-user-plus mr-2"></i>
                        {{ t('auth.create_account') }}
                    </a>
                </div>
            </div>

            <!-- Demo credentials info -->
            <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-md">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-400"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-blue-800">
                            Demo Credentials
                        </h3>
                        <div class="mt-2 text-sm text-blue-700">
                            <p><strong>Email:</strong> admin@localhost</p>
                            <p><strong>Password:</strong> admin123</p>
                            <p><strong>Organization:</strong> localhost</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Auto-fill demo credentials for development -->
<script>
    // Auto-fill demo credentials in development
    if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
        document.addEventListener('DOMContentLoaded', function() {
            const emailInput = document.getElementById('email');
            const passwordInput = document.getElementById('password');
            const subdomainInput = document.getElementById('subdomain');
            
            if (!emailInput.value) {
                emailInput.value = 'admin@localhost';
            }
            if (!passwordInput.value) {
                passwordInput.value = 'admin123';
            }
            if (!subdomainInput.value || subdomainInput.value === 'localhost') {
                subdomainInput.value = 'localhost';
            }
        });
    }
</script>
{% endblock %}