{# templates/security/login.html.twig #}
{% extends '@PhpListFrontend/base.html.twig' %}

{% block title %}phpList - Login{% endblock %}

{% block body %}
    <div class="bg-gray-200 dark:bg-slate-900">
        <div class="min-h-screen flex flex-col items-center justify-center relative">
            <div class="flex items-center mb-6">
                <img src="{{ asset('favicon-48.png', 'phplist_web_frontend') }}" alt="phpList icon" width="40" height="40" class="mr-2"/>
                <h1 class="text-xl font-bold mb-0 text-gray-900 dark:text-slate-100">
                    phpList <span class="text-ext-wf1">4</span>
                </h1>
            </div>
            <div class="w-full max-w-md px-4">
                <div class="bg-white dark:bg-slate-800 shadow-xl rounded-2xl overflow-hidden">
                    <div class="p-8 md:p-10">

                        <!-- Heading -->
                        <h4 class="text-lg font-bold mb-1 text-gray-900 dark:text-slate-100">Sign in to your account</h4>
                        <p class="text-gray-500 dark:text-slate-400 text-sm mb-6">
                            Enter your credentials to access your dashboard.
                        </p>

                        {% if error %}
                            <div class="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 px-4 py-3 rounded mb-4 text-sm">{{ error }}</div>
                        {% endif %}

                        <form method="post">
                            {% if redirect %}
                                <input type="hidden" name="redirect" value="{{ redirect }}">
                            {% endif %}
                            <div class="mb-4">
                                <label for="username" class="block text-sm font-semibold text-gray-700 dark:text-slate-200 mb-1">Login</label>
                                <input type="text" class="block w-full border border-gray-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm" name="username" id="username" required autofocus/>
                            </div>

                            <div class="mb-6">
                                <div class="flex justify-between items-center mb-1">
                                    <label for="password" class="block text-sm font-semibold text-gray-700 dark:text-slate-200">Password</label>
                                    <a href="#" class="text-xs text-ext-wf1 hover:text-ext-wf3 no-underline">Forgot password?</a>
                                </div>
                                <input type="password" class="block w-full border border-gray-300 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm" id="password" name="password" required/>
                            </div>

                            <div class="mb-6">
                                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-semibold text-white bg-ext-wf1 hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                                    Sign In
                                </button>
                            </div>

                            <p class="text-center text-gray-500 dark:text-slate-400 text-xs mb-0">
                                Access is restricted to authorised administrators only.
                            </p>
                        </form>
                    </div>

                    <div class="bg-gray-50 dark:bg-slate-900 border-t border-gray-100 dark:border-slate-700 text-center py-4 px-8">
                        <div class="text-xs text-gray-500 dark:text-slate-400">
                            <a href="#" class="text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-200 no-underline mr-2">Documentation</a>
                            <span class="text-gray-300 dark:text-slate-600">·</span>
                            <a href="#" class="text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-200 no-underline mx-2">Support Forum</a>
                            <span class="text-gray-300 dark:text-slate-600">·</span>
                            <span class="ml-2 text-gray-400 dark:text-slate-500">phpList v4.0.0-rc1</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}