{% extends "forms/field.html.twig" %}

{% set pattern = '^#([a-fA-F0-9]{6})|(rgba\\(\\s*(0|[1-9]\\d?|1\\d\\d?|2[0-4]\\d|25[0-5])\\s*,\\s*(0|[1-9]\\d?|1\\d\\d?|2[0-4]\\d|25[0-5])\\s*,\\s*(0|[1-9]\\d?|1\\d\\d?|2[0-4]\\d|25[0-5])\\s*,\\s*((0.[0-9]+)|(1.00)|1.0|1)\\s*\\))$' %}

{% block input %}
<div class="form-list-wrapper {{ field.size }}" data-type="collection">
    <div class="g-colorpicker">
        {% set input_value = value is iterable ? value|join(',') : value|string %}
        <input
                data-grav-colorpicker="{{ {update: '.g-colorpicker-preview-wrap .g-colorpicker-preview'}|json_encode|e('html_attr') }}"
                {# required attribute structures #}
                name="{{ (scope ~ field.name)|fieldName }}"
                value="{{ input_value }}"
                type="text"
                {# input attribute structures #}
                {% block input_attributes %}
                    {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
                    {% if field.id is defined %}id="{{ field.id }}" {% endif %}
                    {% if field.style is defined %}style="{{ field.style }}" {% endif %}
                    {% if field.disabled %}disabled="disabled"{% endif %}
                    {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
                    {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                    {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
                    {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
                    {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
                    {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                    pattern="{{ field.validate.pattern|default(pattern)|raw }}"
                    {% if field.validate.message %}title="{{ field.validate.message|t }}"
                    {% elseif field.title is defined %}title="{{ field.title|t }}" {% endif %}
                {% endblock %}
        />
        <div class="g-colorpicker-preview-wrap">
            <div class="g-colorpicker-preview" style="background-color: {{ value }}"></div>
        </div>
    </div>
</div>
{% endblock %}

