{% extends "views/components/widgets/base.htm" %}
{% load template_tags %}
{% 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">
            <select style="display:inline-block;"
                data-bind="select2Query: {
                    select2Config: {
                        clickBubble: true,
                        disabled: disabled,
                        data: options,
                        value: value,
                        multiple: multiple,
                        placeholder: placeholder,
                        allowClear: true
                    }
                }, attr: {'data-label': label} ">
            </select>
        </div>
    </div>
</div>
{% endblock form %}

{% block config_form %}
<div>
    <div class="control-label">
        <span data-bind="text: $root.translations.placeholder"></span>
    </div>
    <div class="col-xs-12 pad-no crud-widget-container">
        <input
            class="form-control input-md widget-input"
            data-bind="
                attr: {placeholder: $root.translations.placeholder},
                textInput: placeholder
            ">
    </div>
    <div class="node-widget-label">
        <div class="form-group">
            <div class="control-label">
                <span data-bind="text: $root.translations.defaultValue"></span>
            </div>

            <div class="col-xs-12">
                <select style="display:inline-block;"
                    data-bind="select2Query: {
                        select2Config: {
                            clickBubble: true,
                            data: options,
                            value: defaultValue,
                            multiple: multiple,
                            placeholder: $root.translations.selectDefaultValue,
                            allowClear: true
                        }
                    }, attr: {'aria-label': $root.translations.selectDefaultValue}">
                </select>
            </div>
        </div>
    </div>
</div>
{% endblock config_form %}
