{% import "_includes/forms" as forms %}

{% set id = id ?? 'color'~random() %}
{% set containerId = containerId ?? id~'container' %}
{% set small = small ?? false %}

<div id="{{ containerId }}" class="flex color-container"
        {%- if block('attr') is defined %} {{ block('attr') }}{% endif %}>
    <div class="color static{% if small %} small{% endif %}">
        <div class="colorpreview"
            {%- if value %} style="background-color: {{ value }};"{% endif -%}
        ></div>
    </div>
    {{ forms.text({
        id: id,
        name: name ?? null,
        value: value ?? null,
        size: 10,
        class: 'code',
        autofocus: autofocus is defined and autofocus and not craft.app.request.isMobileBrowser(true),
        disabled: disabled ?? false
    }) }}
</div>

{%- js %}
    new Craft.ColorInput('#{{ containerId|namespaceInputId }}');
{% endjs %}