{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}Nouvelle Configuration SMTP{% endblock %}

{% block content %}
<div class="mb-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Nouvelle Configuration SMTP</h1>
            <p class="mt-2 text-sm text-gray-700">Ajouter un nouveau serveur SMTP pour l'envoi d'emails</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <a href="{{ path('admin_smtp_index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour
            </a>
        </div>
    </div>
</div>

<div class="bg-white shadow rounded-lg">
    <div class="px-4 py-5 sm:p-6">
        {{ form_start(form, {'attr': {'class': 'space-y-6', 'data-controller': 'form-submit'}}) }}

        <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
            <div class="sm:col-span-2">
                {{ form_label(form.name, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.name, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.name) }}
            </div>

            <div class="sm:col-span-2">
                {{ form_label(form.description, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.description, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm', 'rows': '2'}}) }}
                {{ form_errors(form.description) }}
            </div>

            <div>
                {{ form_label(form.host, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.host, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm font-mono'}}) }}
                {{ form_errors(form.host) }}
            </div>

            <div>
                {{ form_label(form.port, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.port, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.port) }}
            </div>

            <div class="sm:col-span-2">
                {{ form_label(form.encryption, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                <div class="mt-2 space-y-2">
                    {{ form_widget(form.encryption) }}
                </div>
                {{ form_errors(form.encryption) }}
            </div>

            <div class="sm:col-span-2">
                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        {{ form_widget(form.authRequired, {'attr': {'class': 'focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded'}}) }}
                    </div>
                    <div class="ml-3 text-sm">
                        {{ form_label(form.authRequired, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                        <p class="text-gray-500">{{ form.authRequired.vars.help|default('') }}</p>
                    </div>
                </div>
                {{ form_errors(form.authRequired) }}
            </div>

            <div>
                {{ form_label(form.username, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.username, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.username) }}
            </div>

            <div>
                {{ form_label(form.password, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.password, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.password) }}
            </div>

            <div>
                {{ form_label(form.fromEmail, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.fromEmail, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.fromEmail) }}
            </div>

            <div>
                {{ form_label(form.fromName, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                {{ form_widget(form.fromName, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm'}}) }}
                {{ form_errors(form.fromName) }}
            </div>

            <div class="sm:col-span-2">
                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        {{ form_widget(form.isActive, {'attr': {'class': 'focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded'}}) }}
                    </div>
                    <div class="ml-3 text-sm">
                        {{ form_label(form.isActive, null, {'label_attr': {'class': 'font-medium text-gray-700'}}) }}
                        <p class="text-yellow-600">{{ form.isActive.vars.help|default('') }}</p>
                    </div>
                </div>
                {{ form_errors(form.isActive) }}
            </div>
        </div>

        <div class="flex justify-end space-x-3 border-t border-gray-200 pt-6">
            <a href="{{ path('admin_smtp_index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Annuler
            </a>
            <button type="submit" data-form-submit-target="submit" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-save mr-2"></i>
                <span data-form-submit-target="buttonText">Créer la configuration</span>
                <span data-form-submit-target="spinner" class="hidden ml-2">
                    <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </span>
            </button>
        </div>

        {{ form_end(form) }}
    </div>
</div>
{% endblock %}