{% extends "views/components/widgets/base.htm" %}
{% load i18n %}

{% block form %}
<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
    <div class="form-group">
        <span class="control-label widget-input-label" data-bind="text:label"></span>
        <!-- ko if: node -->
        <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
        <!-- /ko -->
        <div class="col-xs-12">
            <div class="pad-hor columns option-input" data-bind="foreach: flatOptions, attr:{'aria-label': label}" role="radiogroup">
                <label class="form-radio form-normal form-text" role="radio"
                    data-bind="css: {
                        'active': $parent.isOptionSelected($data),
                        'disabled': $parent.disabled
                    },
                    onEnterkeyClick,
                    onSpaceClick,
                    click: function () {
                        $parent.setOptionSelection($data, true);
                    },
                    attr: {
                        'aria-checked': $parent.isOptionSelected($data)
                    }"
                    tabindex="0">
                    <input type="radio" data-bind="checked: $parent.value,
                        attr: {
                            value: id,
                            name: $parent.node.nodeid
                        }">
                    <span data-bind="text: $data.text"></span>
                </label>
            </div>
        </div>
    </div>
</div>
{% endblock form %}

{% block config_form %}
<div>
    <div class="control-label">
        <span data-bind="text: $root.translations.defaultValue"></span>
    </div>
    <div class="col-xs-12">
        <div class="pad-hor columns radio-panel option-input-config" data-bind="foreach: flatOptions, attr:{'aria-label': $root.translations.defaultValue}" role="radiogroup">
            <label class="form-radio form-normal form-text" role="radio"
                data-bind="css: {
                    'active': $parent.isOptionSelected($data)
                },
                onEnterkeyClick,
                onSpaceClick,
                click: function () {
                    $parent.setOptionSelection($data, true);
                },
                attr: {
                    'aria-checked': $parent.isOptionSelected($data)
                }"
                tabindex="0">
                <input type="radio" data-bind="checked: $parent.defaultValue,
                    attr: {
                        value: id,
                        name: $parent.node.nodeid
                    }">
                <span data-bind="text: $data.text"></span>
            </label>
        </div>
    </div>
</div>

{% endblock config_form %}
