{# @tailwind-safelist
   bg-primary/10 bg-cohorts/10 bg-warning/10 bg-error/10 bg-success/10 bg-info/10 bg-pink/10
#}
{# ============================================================================
   Champs de formulaire réutilisables pour les contrats
   Utilise Tailwind CSS - Compatible avec les formulaires Symfony
   ============================================================================ #}

<div class="space-y-6">
    {# Nom du contrat #}
    <div class="space-y-1.5">
        {{ form_label(form.name, null, {
            'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
        }) }}
        {{ form_widget(form.name, {
            'attr': {'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-xl bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors'}
        }) }}
        {{ form_errors(form.name) }}
    </div>

    {# Dates de début et fin #}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="space-y-1.5">
            {{ form_label(form.startDate, null, {
                'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
            }) }}
            {{ form_widget(form.startDate, {
                'attr': {'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-xl bg-white text-gray-900 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors'}
            }) }}
            {{ form_errors(form.startDate) }}
        </div>

        <div class="space-y-1.5">
            {{ form_label(form.endDate, null, {
                'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
            }) }}
            {{ form_widget(form.endDate, {
                'attr': {'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-xl bg-white text-gray-900 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors'}
            }) }}
            {{ form_errors(form.endDate) }}
        </div>
    </div>

    {# Utilisateurs max et prix par licence #}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="space-y-1.5">
            {{ form_label(form.maxUsers, null, {
                'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
            }) }}
            {{ form_widget(form.maxUsers, {
                'attr': {'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-xl bg-white text-gray-900 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors'}
            }) }}
            {% if form.maxUsers.vars.help is defined and form.maxUsers.vars.help %}
                <p class="text-xs text-gray-500">{{ form.maxUsers.vars.help }}</p>
            {% endif %}
            {{ form_errors(form.maxUsers) }}
        </div>

        <div class="space-y-1.5">
            {{ form_label(form.pricePerLicense, null, {
                'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
            }) }}
            <div class="relative">
                {{ form_widget(form.pricePerLicense, {
                    'attr': {'class': 'w-full px-4 py-2.5 pr-12 border border-gray-200 rounded-xl bg-white text-gray-900 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors'}
                }) }}
                <span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm">€ TTC</span>
            </div>
            {% if form.pricePerLicense.vars.help is defined and form.pricePerLicense.vars.help %}
                <p class="text-xs text-gray-500">{{ form.pricePerLicense.vars.help }}</p>
            {% endif %}
            {{ form_errors(form.pricePerLicense) }}
        </div>
    </div>

    {# Tokens mensuels #}
    <div class="space-y-1.5">
        {{ form_label(form.monthlyTokens, null, {
            'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
        }) }}
        {{ form_widget(form.monthlyTokens, {
            'attr': {'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-xl bg-white text-gray-900 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors'}
        }) }}
        {% if form.monthlyTokens.vars.help is defined and form.monthlyTokens.vars.help %}
            <p class="text-xs text-gray-500">{{ form.monthlyTokens.vars.help }}</p>
        {% endif %}
        {{ form_errors(form.monthlyTokens) }}
    </div>

    {# Accès SAM #}
    <div class="space-y-1.5">
        <label class="flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white cursor-pointer transition-all
                       hover:border-violet-400/50 hover:bg-violet-50/30
                       has-[:checked]:border-violet-400 has-[:checked]:bg-violet-50/40 has-[:checked]:ring-2 has-[:checked]:ring-violet-200">
            {{ form_widget(form.hasSamAccess, {'attr': {'class': 'w-4 h-4 rounded text-violet-600 border-gray-300 focus:ring-violet-300 shrink-0'}}) }}
            {% include '_atoms/logo/logo-with-text.html.twig' with {
                variant: 'sam',
                subtitle: 'Suivi Apprenants Moodle',
                showBadge: false,
                size: 'md'
            } %}
            {% if form.hasSamAccess.vars.help is defined and form.hasSamAccess.vars.help %}
                <span class="text-xs text-gray-500 ml-auto">{{ form.hasSamAccess.vars.help }}</span>
            {% endif %}
        </label>
        {{ form_errors(form.hasSamAccess) }}
    </div>

    {# Notes internes #}
    <div class="space-y-1.5">
        {{ form_label(form.notes, null, {
            'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
        }) }}
        {{ form_widget(form.notes, {
            'attr': {
                'class': 'w-full px-4 py-3 border border-gray-200 rounded-xl bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors resize-none',
                'rows': '4'
            }
        }) }}
        <p class="text-xs text-gray-500">Notes visibles uniquement par les administrateurs.</p>
        {{ form_errors(form.notes) }}
    </div>
</div>