{% extends 'base.html.twig' %}

{% block title %}{{ 'lang.emailTestTitle'|trans }}{% endblock %}

{% block body %}
<div class="container mx-auto px-4 py-8 max-w-2xl">
    <div class="bg-white rounded-lg shadow-lg p-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-6">{{ 'lang.emailTestHeading'|trans }}</h1>

        {% if emailSent %}
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6" role="alert">
                <p class="font-bold">{{ 'lang.emailTestSuccess'|trans }}</p>
                <p>{{ 'lang.emailTestSuccessMessage'|trans }}</p>
            </div>
        {% endif %}

        {% if error %}
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6" role="alert">
                <p class="font-bold">{{ 'lang.emailTestError'|trans }}</p>
                <p>{{ error }}</p>
            </div>
        {% endif %}

        <form method="POST" action="{{ path('app_test_email', {'_locale': app.request.locale}) }}" class="space-y-6">
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                    {{ 'lang.emailTestRecipientLabel'|trans }}
                </label>
                <input 
                    type="email" 
                    id="email" 
                    name="email" 
                    required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="test@example.com"
                >
            </div>

            <div>
                <label for="complete_name" class="block text-sm font-medium text-gray-700 mb-2">
                    {{ 'lang.emailTestNameLabel'|trans }}
                </label>
                <input 
                    type="text" 
                    id="complete_name" 
                    name="complete_name" 
                    value="Test User"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    placeholder="{{ 'lang.emailTestNamePlaceholder'|trans }}"
                >
            </div>

            <div>
                <label for="template" class="block text-sm font-medium text-gray-700 mb-2">
                    {{ 'lang.emailTestTemplateLabel'|trans }}
                </label>
                <select 
                    id="template" 
                    name="template"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                    <option value="confirmation_email" selected>Confirmation Email</option>
                </select>
            </div>

            <button 
                type="submit" 
                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-200"
            >
                {{ 'lang.emailTestSendButton'|trans }}
            </button>
        </form>
    </div>
</div>
{% endblock %}