{% extends "layout/auth_layout.twig" %}
{% block page_title_block %}{{ __('page_title.login') }}{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-900 to-indigo-700 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8 bg-white p-10 rounded-xl shadow-2xl">
        <div>
            <div class="text-center">
                {% if config_app.get('site_logo_path') and config_app.get('site_logo_path') != 'assets/img/logo_padrao.png' %}
                    <img src="{{ BASE_URL }}/uploads/{{ config_app.get('site_logo_path') }}" alt="{{ config_app.get('site_name') }} Logo" class="h-14 mx-auto mb-4">
                {% else %}
                    <i class="fas fa-balance-scale text-5xl text-blue-700 mb-3"></i>
                {% endif %}
                <h2 class="text-3xl font-extrabold text-gray-900">
                    {{ config_app.get('site_name') }}
                </h2>
                <p class="mt-2 text-sm text-gray-600">
                    {{ __('auth.login_subtitle') }}
                </p>
            </div>
        </div>

        {# As mensagens flash já são incluídas no topo pelo layout/auth_layout.twig #}

        <form class="mt-8 space-y-6" action="{{ BASE_URL }}{{ routeParser.urlFor('auth.login') }}" method="POST">
            <div class="rounded-md shadow-sm -space-y-px">
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">{{ __('label.email') }}</label>
                    <input id="email" name="email" type="email" autocomplete="email" required
                           class="form-input {% if errors.email %}border-red-500{% endif %}"
                           placeholder="{{ __('placeholder.email_example') }}" value="{{ email | default('') }}">
                    {% if errors.email %}<p class="text-red-500 text-xs mt-1">{{ errors.email }}</p>{% endif %}
                </div>
                <div class="pt-4">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">{{ __('label.password') }}</label>
                    <input id="password" name="password" type="password" autocomplete="current-password" required
                           class="form-input {% if errors.password %}border-red-500{% endif %}"
                           placeholder="{{ __('placeholder.your_password') }}">
                    {% if errors.password %}<p class="text-red-500 text-xs mt-1">{{ errors.password }}</p>{% endif %}
                </div>
            </div>

            <div class="flex items-center justify-between mt-6">
                <div class="text-sm">
                    <a href="{{ BASE_URL }}{{ routeParser.urlFor('auth.forgot.form') }}" class="font-medium text-indigo-600 hover:text-indigo-500">
                        {{ __('auth.forgot_password_link') }}
                    </a>
                </div>
            </div>

            <div>
                <button type="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition ease-in-out duration-150">
                    <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                        <i class="fas fa-lock text-indigo-500 group-hover:text-indigo-400"></i>
                    </span>
                    {{ __('button.login') }}
                </button>
            </div>
        </form>
        <p class="mt-6 text-center text-sm text-gray-600">
            {{ __('auth.no_account_question') }}
            <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">
                {{ __('auth.contact_admin') }}
            </a>
        </p>
    </div>
</div>
<style>.form-input {display: block; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;} .form-input:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: #4F46E5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.5);}</style>
{% endblock %}