<div class="form-field color-field">
    {% if field.label %}
    <label for="id_{{ field.name }}" class="field-label{% if field.error %} field-error{% endif %}">
        {{ field.label }}
    </label>
    {% endif %}

    <div class="color-picker-container" data-color-picker>
        <input
            type="color"
            name="{{ field.name }}"
            id="id_{{ field.name }}"
            value="{{ field.value | default(value='#000000') }}"
            {% if field.is_required.choice %}required{% endif %}
            {% for key, value in field.html_attributes %}{{ key }}="{{ value }}" {% endfor %}
            class="color-picker"
            data-color-input
        >
        <input
            type="text"
            id="id_{{ field.name }}_text"
            value="{{ field.value | default(value='#000000') }}"
            placeholder="#RRGGBB"
            maxlength="7"
            pattern="^#[0-9A-Fa-f]{6}$"
            class="color-text-input"
            data-color-text
            {% if readonly.choice %}readonly{% endif %}
            {% if disabled.choice %}disabled{% endif %}
        >
    </div>

    {% if field.error %}
    <span class="field-error-message">{{ field.error }}</span>
    {% endif %}

    <script src="{{ "js/color_picker.js" | runique_static }}" defer></script>
</div>