{% set originalValue = originalValue is defined ? originalValue : value %}
{% set value = (value is null ? field.default : value) %}
{% set classes = field.classes %}

{% block field %}
    {% block contents %}
        {% block group %}
            {% block input %}
                <div class="colorbar-element-container g-colorpicker">
                    <div class="colorbar-element light-border" style="background-color: {{value}}">
                        <div class="colorbar-title">{{ field.help|t }}</div>

                        <input
                            data-grav-colorpicker="{{ {update: '.colorbar-element', offset: {x: -2, y: 20}} |json_encode|e('html_attr') }}"
                            {# required attribute structures #}
                            name="{{ (scope ~ field.name)|fieldName }}"
                            value="{{ value }}"
                            autocomplete="off"
                            {# input attribute structures #}
                            {% block input_attributes %}
                                {% if classes %}class="{{ 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.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                                {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
                                {% if field.validate.message %}title="{{ field.validate.message|t }}"
                                {% elseif field.title is defined %}title="{{ field.title|t }}" {% endif %}
                            {% endblock %}
                            />
                    </div>
                </div>
            {% endblock %}
        {% endblock %}
    {% endblock %}
{% endblock %}
