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


{% block form %}
<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
    <div class="form-group">
        <label class="control-label widget-input-label" data-bind="text:label">
        </label>
        <!-- ko if: node -->
        <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
        <!-- /ko -->
        <div class="col-xs-12 resource-instance-wrapper">
            <select style="width:30%; display:inline-block;"
                data-bind=" select2Query: {
                    select2Config: select2Config
                }
            "></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">
        <div class='node-config-item'>
        <input
            class="form-control input-md widget-input"
            data-bind="
                attr: {placeholder: $root.translations.placeholder},
                value: placeholder,
                valueUpdate: 'keyup'
            "
        >
        </div>
        <div class='node-config-item'>
        <div class='control-label'>
            <span data-bind="text: $root.translations.dropdownFormat"></span>
        </div>
        <div class="toggle-container">
            <span class="switch switch-small" data-bind="css: {'on': displayOnlySelectedNode()}, click: toggleDisplayOnlySelected"><small></small></span>
                    <div style="display:flex; flex-direction:row;">
                    <div class="arches-toggle-sm" data-bind="text:$root.translations.showOnlySelectedNodeInDropdown"></div>
                    </div>
            <span class="arches-toggle-subtitle" data-bind="text:$root.translations.limitDropdownToWidgetNodes"></span>
        </div>
        </div>
    </div>
</div>
{% endblock config_form %}

{% block report %}
<dt data-bind="text: label, class: nodeCssClasses"></dt>
<dd data-bind="class: nodeCssClasses">
    <!-- ko if: displayValue -->
    <a data-bind="attr: { href: '#' + value() }, text: displayValue"></a>
    <!-- /ko -->
    <!-- ko ifnot: displayValue -->
    <span data-bind="text: $root.translations.none"></span>
    <!-- /ko -->
</dd>
{% endblock report %}
