{% set selcted_bg = (colors[selected].bg is empty) ? 'bg-' ~ selected : colors[selected].bg %}
{% set selected_color = colors[selected] %}
{% set selected = (data_type is not empty) ? selected_color[data_type] : selected %}
<colorPicker
    id="{{ component_id }}"
    selected="{{ selected }}"
    background="{{ selcted_bg }}"
    dateType="{{ data_type }}"
    hideOnBlur="{{ hide_on_blur|default('true') }}"
    class="color-picker relative inline-flex flex-col items-start {{ class }}">
    <selected 
        class="inline-block color-pick-button cursor-pointer transition-colors duration-700             
        {{ selcted_bg }} 
        {{ selected_class|default('h-8 w-8') }}
        {{ selected_hover|default('hover:border-green-500 hover:shadow-2xl') }}
        {{ selected_border|default('rounded-xl border-2 border-gray-300 border-solid') }}">
        <input 
            {{ field_id|attr('id') }} 
            {{ field_rule|attr('rule') }} 
            name="{{ field_name|default('color') }}" 
            type="hidden" 
            value="{{ selected }}">                            
    </selected>    
    <menu 
        class="z-50 mt-12 absolute hidden 
        {{ position|default('top-0 left-0') }} 
        {{ menu_color|default('bg-white') }}
        {{ menu_border|default('rounded-xl border border-gray-200 border-solid shadow-md') }}
        {{ menu_class }}">     
        <div class="flex flex-row w-full p-1 px-3">
            <div class="flex-grow">
                {% if use_gradient == true %}   
                <div class="btn-group m-1 btn-group-horizontal color-type-buttons">
                    <input value="color" 
                        class="btn btn-xs btn-outline btn-primary gradient-button" 
                        type="radio" 
                        name="gradient" 
                        data-title="{{ labels.color }}" checked />
                    <input value="gradient" 
                        class="btn btn-xs btn-outline btn-primary gradient-button" 
                        type="radio" 
                        name="gradient" 
                        data-title="{{ labels.gradient }}" />                
                </div>   
                {% endif %}
            </div>
            <div class="justify-end">
                {{  component('icons~close',{ 
                        class: 'color-picker-close',
                        color: 'cursor-pointer transition-colors duration-700 hover:text-red-500',
                        size: 'w-7 h-7' 
                    },'svg') 
                }} 
            </div>           
        </div>   
        <div class="px-4 py-1 color-content">
            {{  component('tailwind~color.menu',{ 
                    data_type: data_type,
                    item_color_hover: item_color_hover,
                    item_color_class: item_color_class
                }) 
            }}
        </div>       
        {% if use_gradient == true %}    
        <div class="px-4 py-1 gradient-content hidden">
            {{  component('tailwind~color.gradient',{ 
                    id: 'gradient_' ~ component_id, 
                    selected: selected,
                    hide_sample: hide_sample,
                    parent_id: component_id 
                }) 
            }}
        </div>
        {% endif %}
    </menu>
</colorPicker>