{#
    Reusable Form Components for Admin
    Provides consistent Tailwind CSS styling across all admin forms
#}

{# Text Input Field #}
{% macro input(name, label, value = '', type = 'text', placeholder = '', required = false, disabled = false, attributes = {}) %}
    <div>
        {% if label %}
            <label for="{{ name }}" class="block text-sm font-medium text-gray-700 mb-1">
                {{ label }}
                {% if required %}
                    <span class="text-red-500 ml-1">*</span>
                {% endif %}
            </label>
        {% endif %}
        <input type="{{ type }}"
               name="{{ name }}"
               id="{{ name }}"
               value="{{ value }}"
               {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
               {% if required %}required{% endif %}
               {% if disabled %}disabled{% endif %}
               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed {{ attributes.class|default('') }}">
    </div>
{% endmacro %}

{# Select Dropdown #}
{% macro select(name, label, value = '', options = [], required = false, disabled = false, attributes = {}) %}
    <div>
        {% if label %}
            <label for="{{ name }}" class="block text-sm font-medium text-gray-700 mb-1">
                {{ label }}
                {% if required %}
                    <span class="text-red-500 ml-1">*</span>
                {% endif %}
            </label>
        {% endif %}
        <select name="{{ name }}"
                id="{{ name }}"
                {% if required %}required{% endif %}
                {% if disabled %}disabled{% endif %}
                class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed {{ attributes.class|default('') }}">
            {% for option in options %}
                <option value="{{ option.value }}" {% if option.value == value %}selected{% endif %}>
                    {{ option.label }}
                </option>
            {% endfor %}
        </select>
    </div>
{% endmacro %}

{# Textarea Field #}
{% macro textarea(name, label, value = '', rows = 3, placeholder = '', required = false, disabled = false, attributes = {}) %}
    <div>
        {% if label %}
            <label for="{{ name }}" class="block text-sm font-medium text-gray-700 mb-1">
                {{ label }}
                {% if required %}
                    <span class="text-red-500 ml-1">*</span>
                {% endif %}
            </label>
        {% endif %}
        <textarea name="{{ name }}"
                  id="{{ name }}"
                  rows="{{ rows }}"
                  {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
                  {% if required %}required{% endif %}
                  {% if disabled %}disabled{% endif %}
                  class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm resize-y disabled:bg-gray-100 disabled:cursor-not-allowed {{ attributes.class|default('') }}">{{ value }}</textarea>
    </div>
{% endmacro %}

{# Date Input Field #}
{% macro date(name, label, value = '', required = false, disabled = false, attributes = {}) %}
    <div>
        {% if label %}
            <label for="{{ name }}" class="block text-sm font-medium text-gray-700 mb-1">
                {{ label }}
                {% if required %}
                    <span class="text-red-500 ml-1">*</span>
                {% endif %}
            </label>
        {% endif %}
        <input type="date"
               name="{{ name }}"
               id="{{ name }}"
               value="{{ value }}"
               {% if required %}required{% endif %}
               {% if disabled %}disabled{% endif %}
               class="mt-1 block w-full px-3 py-2 pr-10 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed {{ attributes.class|default('') }}">
    </div>
{% endmacro %}

{# Number Input Field #}
{% macro number(name, label, value = '', min = null, max = null, step = 1, placeholder = '', required = false, disabled = false, attributes = {}) %}
    <div>
        {% if label %}
            <label for="{{ name }}" class="block text-sm font-medium text-gray-700 mb-1">
                {{ label }}
                {% if required %}
                    <span class="text-red-500 ml-1">*</span>
                {% endif %}
            </label>
        {% endif %}
        <input type="number"
               name="{{ name }}"
               id="{{ name }}"
               value="{{ value }}"
               {% if min is not null %}min="{{ min }}"{% endif %}
               {% if max is not null %}max="{{ max }}"{% endif %}
               step="{{ step }}"
               {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
               {% if required %}required{% endif %}
               {% if disabled %}disabled{% endif %}
               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed {{ attributes.class|default('') }}">
    </div>
{% endmacro %}

{# Checkbox Field #}
{% macro checkbox(name, label, checked = false, disabled = false, attributes = {}) %}
    <div class="flex items-start">
        <div class="flex items-center h-5">
            <input type="checkbox"
                   name="{{ name }}"
                   id="{{ name }}"
                   {% if checked %}checked{% endif %}
                   {% if disabled %}disabled{% endif %}
                   class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0 transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50 {{ attributes.class|default('') }}">
        </div>
        {% if label %}
            <div class="ml-3 text-sm leading-6">
                <label for="{{ name }}" class="font-medium text-gray-700">{{ label }}</label>
            </div>
        {% endif %}
    </div>
{% endmacro %}

{# Radio Button Field #}
{% macro radio(name, label, value, checked = false, disabled = false, attributes = {}) %}
    <div class="flex items-start">
        <div class="flex items-center h-5">
            <input type="radio"
                   name="{{ name }}"
                   id="{{ name }}_{{ value }}"
                   value="{{ value }}"
                   {% if checked %}checked{% endif %}
                   {% if disabled %}disabled{% endif %}
                   class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0 transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50 {{ attributes.class|default('') }}">
        </div>
        {% if label %}
            <div class="ml-3 text-sm leading-6">
                <label for="{{ name }}_{{ value }}" class="font-medium text-gray-700">{{ label }}</label>
            </div>
        {% endif %}
    </div>
{% endmacro %}

{# Submit Button with Loading State #}
{% macro submitButton(text = 'Enregistrer', loadingText = 'Chargement...', icon = 'fa-save', variant = 'primary') %}
    {% set buttonClass = variant == 'primary'
        ? 'bg-indigo-600 hover:bg-indigo-700 text-white'
        : 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-300' %}

    <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 {{ buttonClass }} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
        {% if icon %}
            <i class="fas {{ icon }} mr-2"></i>
        {% endif %}
        <span data-form-submit-target="buttonText">{{ text }}</span>
        <span data-form-submit-target="spinner" class="hidden ml-2">
            <svg class="animate-spin h-5 w-5" 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>
{% endmacro %}

{# Cancel/Back Button #}
{% macro cancelButton(url, text = 'Annuler', icon = 'fa-times') %}
    <a href="{{ url }}"
       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-indigo-500 transition-colors duration-200">
        {% if icon %}
            <i class="fas {{ icon }} mr-2"></i>
        {% endif %}
        {{ text }}
    </a>
{% endmacro %}

{# Filter Button #}
{% macro filterButton(text = 'Filtrer', icon = 'fa-filter') %}
    <button type="submit"
            class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm 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-colors duration-200">
        {% if icon %}
            <i class="fas {{ icon }} mr-2"></i>
        {% endif %}
        {{ text }}
    </button>
{% endmacro %}

{# Reset/Clear Button #}
{% macro resetButton(url, text = 'Réinitialiser', icon = 'fa-times') %}
    <a href="{{ url }}"
       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-indigo-500 transition-colors duration-200">
        {% if icon %}
            <i class="fas {{ icon }} mr-2"></i>
        {% endif %}
        {{ text }}
    </a>
{% endmacro %}