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

<div {{ attr({
    id: name,
    class: [
        'buttonbox-buttons',
        'btngroup',
        displayAsGraphic ? 'buttonbox-buttons--graphical' : false,
        displayFullwidth ? 'fullwidth',
    ] | filter,
}) }}>
    {% 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) %}
        
        <label {{ attr({
            class: [
                'btn',
                'big',
                optionValue == value ? 'active' : false,
            ] | filter,
        }) }}>
            <input {{ attr({
                type: 'radio',
                name: name,
                value: optionValue,
                checked: optionValue == value ? true : false,
                disabled: optionDisabled ? true : false,
            }) }}>

            {% if option.imageUrl %}
                <img {{ attr({
                    src: option.imageUrl,
                    title: not option.showLabel ? optionLabel : false,
                    alt: not option.showLabel ? optionLabel : false,
                    class: [
                        option.showLabel ? 'buttonbox-buttons__with-label' : false,
                    ] | filter,
                }) }} />
            {% endif %}

            {% if option.imageUrl and option.showLabel %}&nbsp;{% endif %}
            {% if option.showLabel %}<span class="buttonbox-buttons__label">{{ optionLabel }}</span>{% endif %}
        </label>
    {% endfor %}
</div>