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

{# Tailwind CSS Form Theme with Dark Mode & Animations Support #}

{# ========================================
   FORM ROW - Container for each field
   ======================================== #}
{% block form_row -%}
    <div class="mb-6">
        {{- form_label(form) -}}
        {{- form_widget(form) -}}
        {{- form_errors(form) -}}
        {{- form_help(form) -}}
    </div>
{%- endblock form_row %}

{# ========================================
   BUTTON ROW - Special layout for buttons
   ======================================== #}
{% block button_row -%}
    <div class="mb-6">
        {{- form_widget(form) -}}
    </div>
{%- endblock button_row %}

{# ========================================
   FORM LABELS
   ======================================== #}
{% block form_label -%}
    {% if label is not same as(false) -%}
        {% if not compound -%}
            {% set label_attr = label_attr|merge({'for': id}) %}
        {%- endif %}
        {% if required -%}
            {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
        {%- endif %}
        {% if label is empty -%}
            {%- if label_format is not empty -%}
                {% set label = label_format|replace({
                    '%name%': name,
                    '%id%': id,
                }) %}
            {%- else -%}
                {% set label = name|humanize %}
            {%- endif -%}
        {%- endif -%}
        <label{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %} class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            {{- label|trans({}, translation_domain) -}}
            {%- if required -%}
                <span class="text-red-500 ml-1">*</span>
            {%- endif -%}
        </label>
    {%- endif %}
{%- endblock form_label %}

{# ========================================
   TEXT INPUTS (text, email, password, url, tel, number, etc.)
   ======================================== #}
{% block form_widget_simple -%}
    {%- set type = type|default('text') -%}
    {%- set attr = attr|merge({
        class: (attr.class|default('') ~ ' w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-200 ' ~ (errors|length > 0 ? 'border-red-500 dark:border-red-400 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 dark:border-gray-600') ~ ' bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-900 disabled:cursor-not-allowed')|trim
    }) -%}
    <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{%- endblock form_widget_simple %}

{# ========================================
   TEXTAREA
   ======================================== #}
{% block textarea_widget -%}
    {%- set attr = attr|merge({
        class: (attr.class|default('') ~ ' w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-200 resize-y ' ~ (errors|length > 0 ? 'border-red-500 dark:border-red-400 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 dark:border-gray-600') ~ ' bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 disabled:bg-gray-100 dark:disabled:bg-gray-900 disabled:cursor-not-allowed')|trim
    }) -%}
    <textarea {{ block('widget_attributes') }}>{{ value }}</textarea>
{%- endblock textarea_widget %}

{# ========================================
   CHECKBOX - Single checkbox
   ======================================== #}
{% block checkbox_widget -%}
    {%- set attr = attr|merge({
        class: (attr.class|default('') ~ ' h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0 transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50')|trim
    }) -%}
    <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{%- endblock checkbox_widget %}

{# ========================================
   CHECKBOX ROW - Special layout for checkbox with label on right
   ======================================== #}
{% block checkbox_row -%}
    <div class="mb-6">
        <div class="flex items-start">
            <div class="flex items-center h-5">
                {{- form_widget(form) -}}
            </div>
            <div class="ml-3 text-sm leading-6">
                {{- form_label(form, null, {label_attr: {class: 'font-medium text-gray-700 dark:text-gray-300'}}) -}}
                {{- form_help(form) -}}
            </div>
        </div>
        {{- form_errors(form) -}}
    </div>
{%- endblock checkbox_row %}

{# ========================================
   RADIO BUTTON
   ======================================== #}
{% block radio_widget -%}
    {%- set attr = attr|merge({
        class: (attr.class|default('') ~ ' h-4 w-4 border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0 transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50')|trim
    }) -%}
    <input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{%- endblock radio_widget %}

{# ========================================
   SELECT / DROPDOWN (collapsed choice)
   ======================================== #}
{% block choice_widget_collapsed -%}
    {%- set attr = attr|merge({
        class: (attr.class|default('') ~ ' w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-200 ' ~ (errors|length > 0 ? 'border-red-500 dark:border-red-400 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 dark:border-gray-600') ~ ' bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 disabled:bg-gray-100 dark:disabled:bg-gray-900 disabled:cursor-not-allowed')|trim
    }) -%}
    {%- if required and placeholder is none and not placeholder_in_choices and not multiple and (attr.size is not defined or attr.size <= 1) -%}
        {% set required = false %}
    {%- endif -%}
    <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
        {%- if placeholder is not none -%}
            <option value=""{% if required and value is empty %} selected="selected"{% endif %}>{{ placeholder != '' ? (translation_domain is same as(false) ? placeholder : placeholder|trans({}, translation_domain)) }}</option>
        {%- endif -%}
        {%- if preferred_choices|length > 0 -%}
            {% set options = preferred_choices %}
            {{- block('choice_widget_options') -}}
            {%- if choices|length > 0 and separator is not none -%}
                <option disabled="disabled">{{ separator }}</option>
            {%- endif -%}
        {%- endif -%}
        {%- set options = choices -%}
        {{- block('choice_widget_options') -}}
    </select>
{%- endblock choice_widget_collapsed %}

{# ========================================
   EXPANDED CHOICE (checkboxes or radios)
   ======================================== #}
{% block choice_widget_expanded -%}
    <div {{ block('widget_container_attributes') }} class="space-y-3">
        {%- for child in form %}
            <div class="flex items-start">
                <div class="flex items-center h-5">
                    {{- form_widget(child) -}}
                </div>
                <div class="ml-3 text-sm leading-6">
                    {{- form_label(child, null, {label_attr: {class: 'font-medium text-gray-700 dark:text-gray-300'}, translation_domain: choice_translation_domain}) -}}
                </div>
            </div>
        {% endfor -%}
    </div>
{%- endblock choice_widget_expanded %}

{# ========================================
   FILE INPUT
   ======================================== #}
{% block file_widget -%}
    {%- set attr = attr|merge({
        class: (attr.class|default('') ~ ' block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 dark:file:bg-indigo-900 file:text-indigo-700 dark:file:text-indigo-100 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800 file:transition-colors file:duration-200 border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500')|trim
    }) -%}
    <input type="file" {{ block('widget_attributes') }} />
{%- endblock file_widget %}

{# ========================================
   BUTTON
   ======================================== #}
{% block button_widget -%}
    {%- set attr = attr|merge({
        class: (attr.class|default('') ~ ' inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-800 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed')|trim
    }) -%}
    {%- if label is empty -%}
        {%- if label_format is not empty -%}
            {% set label = label_format|replace({
                '%name%': name,
                '%id%': id,
            }) %}
        {%- else -%}
            {% set label = name|humanize %}
        {%- endif -%}
    {%- endif -%}
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}</button>
{%- endblock button_widget %}

{# ========================================
   SUBMIT BUTTON
   ======================================== #}
{% block submit_widget -%}
    {%- set type = type|default('submit') -%}
    {%- set attr = attr|merge({
        class: (attr.class|default('') ~ ' w-full inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-800 transition-colors duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed')|trim
    }) -%}
    {{ block('button_widget') }}
{%- endblock submit_widget %}

{# ========================================
   RESET BUTTON
   ======================================== #}
{% block reset_widget -%}
    {%- set type = type|default('reset') -%}
    {%- set attr = attr|merge({
        class: (attr.class|default('') ~ ' w-full inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-lg text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed')|trim
    }) -%}
    {{ block('button_widget') }}
{%- endblock reset_widget %}

{# ========================================
   FORM ERRORS
   ======================================== #}
{% block form_errors -%}
    {%- if errors|length > 0 -%}
    <div class="mt-2 space-y-1">
        {%- for error in errors -%}
            <p class="text-sm text-red-600 dark:text-red-400 flex items-start">
                <svg class="w-4 h-4 mr-1.5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                </svg>
                <span>{{ error.message }}</span>
            </p>
        {%- endfor -%}
    </div>
    {%- endif -%}
{%- endblock form_errors %}

{# ========================================
   FORM HELP TEXT
   ======================================== #}
{% block form_help -%}
    {%- if help is not empty -%}
        {%- set help_attr = help_attr|merge({class: (help_attr.class|default('') ~ ' mt-2 text-sm text-gray-500 dark:text-gray-400')|trim}) -%}
        <p id="{{ id }}_help"{% with {attr: help_attr} %}{{ block('attributes') }}{% endwith %}>
            {%- if translation_domain is same as(false) -%}
                {%- if help_html is same as(false) -%}
                    {{- help -}}
                {%- else -%}
                    {{- help|raw -}}
                {%- endif -%}
            {%- else -%}
                {%- if help_html is same as(false) -%}
                    {{- help|trans(help_translation_parameters, translation_domain) -}}
                {%- else -%}
                    {{- help|trans(help_translation_parameters, translation_domain)|raw -}}
                {%- endif -%}
            {%- endif -%}
        </p>
    {%- endif -%}
{%- endblock form_help %}

{# ========================================
   HIDDEN INPUT
   ======================================== #}
{% block hidden_widget -%}
    {%- set type = type|default('hidden') -%}
    {{ block('form_widget_simple') }}
{%- endblock hidden_widget %}

{# ========================================
   COLLECTION WIDGET
   ======================================== #}
{% block collection_widget -%}
    <div class="space-y-4">
        {{- block('form_widget') -}}
    </div>
{%- endblock collection_widget %}

{# ========================================
   ATTRIBUTES HELPER
   ======================================== #}
{% block attributes -%}
    {%- for attrname, attrvalue in attr -%}
        {{- " " -}}
        {%- if attrname in ['placeholder', 'title'] -%}
            {{- attrname }}="{{ translation_domain is same as(false) ? attrvalue : attrvalue|trans({}, translation_domain) }}"
        {%- elseif attrvalue is same as(true) -%}
            {{- attrname }}="{{ attrname }}"
        {%- elseif attrvalue is not same as(false) -%}
            {{- attrname }}="{{ attrvalue }}"
        {%- endif -%}
    {%- endfor -%}
{%- endblock attributes %}