{%- set options = (options is defined ? options : []) %}
{%- set value = (value is defined ? value : null) %}
{%- set hasOptgroups = false -%}

<div id="{{ name }}" class="buttonbox-colours">
    <select{%- if name is defined %} name="{{ name }}"{% endif %}>
        {% for key, option in options %}
            {% set optionLabel = (option.label is defined ? option.label : option) %}
            {% set optionValue = (option.value is defined ? option.value : key) %}
            {% set optionDisabled = (option.disabled is defined ? option.disabled : false) %}

            <option {{ attr({
                value: optionValue,
                selected: optionValue == value ? true : false,
                disabled: optionDisabled ? true : false,
                'data-buttonbox-csscolour': option.cssColour ? option.cssColour : false,
            }) }}>{{ optionLabel }}</option>
        {% endfor %}
    </select>

    {% apply spaceless %}
        {% for key, option in options %}
            {% set optionLabel = (option.label is defined ? option.label : option) %}
            {% set optionValue = (option.value is defined ? option.value : key) %}
            {% set optionCssColour = (option.cssColour is defined ? option.cssColour : key) %}
            
            {% if optionValue == value %}
                <a class="buttonbox__btn" role="button">
                    <div class="buttonbox-colours__block" style="background: {{ optionCssColour }};"></div>
                    <div class="buttonbox-colours__label">{{ optionLabel }}</div>
                </a>
            {% endif %}
        {% endfor %}
    {% endapply %}

    <div class="menu buttonbox-fancyoptions-menu" data-align="right">
        <ul class="padded">
            {% for key, option in options %}
                {% set optionLabel = (option.label is defined ? option.label : option) %}
                {% set optionValue = (option.value is defined ? option.value : key) %}
                {% set optionCssColour = (option.cssColour is defined ? option.cssColour : key) %}
                
                <li>
                    <a{% if optionValue == value %} class="sel"{% endif %} role="button" data-buttonbox-value="{{ optionValue }}">
                        <div class="buttonbox-colours__block" style="background: {{ optionCssColour }};"></div>
                        <div class="buttonbox-colours__label">{{ optionLabel }}</div>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>