{#
    Color Picker Component

    Usage:
    {% include '_components/forms/color_picker.html.twig' with {
        value: '#2563EB',
        label: 'Principale',
        hint: 'Fond des titres',
        name: 'primaryColor',
        variant: 'default',
        stimulus: {
            controller: 'slidia--generator',
            action: 'saveSettings',
            target: 'primaryColor'
        }
    } %}

    Or with Symfony Form:
    {% include '_components/forms/color_picker.html.twig' with {
        form_field: slidiaForm.primaryColor,
        label: 'Principale',
        hint: 'Fond des slides titre',
        variant: 'card'
    } %}

    Parameters:
    - value: (string) Hex color value (required if not using form_field)
    - label: (string) Label text
    - hint: (string) Description text
    - name: (string) Input name attribute
    - variant: (string) 'default' or 'card' (for settings page style)
    - size: (string) 'default' or 'lg' (larger picker)
    - stimulus: (object) { controller, action, target } for Stimulus integration
    - form_field: (FormView) Symfony form field (alternative to value/name)
    - input_class: (string) Additional classes for input
#}

{% set item_class = 'color-picker-item' %}
{% if variant|default('default') == 'card' %}
    {% set item_class = item_class ~ ' color-picker-item--card' %}
{% endif %}

{% set input_class_base = 'color-picker-input' %}
{% if size|default('default') == 'lg' %}
    {% set input_class_base = input_class_base ~ ' color-picker-input--lg' %}
{% endif %}
{% if input_class is defined %}
    {% set input_class_base = input_class_base ~ ' ' ~ input_class %}
{% endif %}

<div class="{{ item_class }}">
    {% if form_field is defined %}
        {# Mode Symfony Form #}
        {{ form_widget(form_field, {'attr': {'class': input_class_base}}) }}
    {% else %}
        {# Mode manuel avec Stimulus #}
        <input
            type="color"
            class="{{ input_class_base }}"
            value="{{ value|default('#000000') }}"
            {% if name is defined %}name="{{ name }}"{% endif %}
            {% if stimulus is defined %}
                {% if stimulus.action is defined %}
                    data-action="change->{{ stimulus.controller }}#{{ stimulus.action }}"
                {% endif %}
                {% if stimulus.target is defined %}
                    data-{{ stimulus.controller }}-target="{{ stimulus.target }}"
                {% endif %}
            {% endif %}
        >
    {% endif %}

    {% if label is defined or hint is defined %}
        <div class="color-picker-info">
            {% if label is defined %}
                <span class="color-picker-label">{{ label }}</span>
            {% endif %}
            {% if hint is defined %}
                <span class="color-picker-hint">{{ hint }}</span>
            {% endif %}
        </div>
    {% endif %}
</div>