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

{% block form %}
<div class="toggle-container" data-bind="let: {uid: Math.random().toString()}, class: nodeCssClasses">
    <span class="switch switch-small switch-widget" data-bind="css: {'on': getvalue() === true, 'null': getvalue() === null, 'disabled': disabled },
          onEnterkeyClick, onSpaceClick, click: setvalue, attr: {'aria-checked': getariavalue(), 'aria-label': label() + ', ' + localizedSubtitle()}" tabindex="0" role="checkbox"
    ><small></small></span>
            <div style="display:flex; flex-direction:row;">
            <div class="arches-toggle-sm" data-bind="text:label, css: {'disabled': disabled}"></div>
                <div style="margin-top: -17px;">
                <!-- ko if: node -->
                <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
                <!-- /ko -->
                </div>
            </div>
    <span class="arches-toggle-subtitle" data-bind="text: localizedSubtitle, attr: {id: uid}"></span>
</div>
{% endblock form %}

{% block config_form %}
<div class="control-label">
  <span data-bind="text: $root.translations.subtitle"></span>
</div>
<div class="col-xs-12 pad-no crud-widget-container">
  <input class="form-control input-md widget-input" data-bind="textInput: localizedSubtitle, attr:{'aria-label': $root.translations.subtitle}">
</div>
<div class="control-label">
  <span data-bind="text: $root.translations.defaultValue"></span>
</div>
<div class="toggle-container" data-bind="let: {uid: Math.random().toString()}">
    <span class="switch switch-small switch-widget" data-bind="css: {'on': getdefault() === true, 'null': getdefault() === null},
          onEnterkeyClick, onSpaceClick, click: setdefault, attr: {'aria-checked': getariadefault, 'aria-label': label() + ', ' + localizedSubtitle()}"
          tabindex="0" tabindex="0" role="checkbox"
    ><small></small></span>
            <div style="display:flex; flex-direction:row;">
            <div class="arches-toggle-sm" data-bind="text:label"></div>
            </div>
    <span class="arches-toggle-subtitle" data-bind="text: localizedSubtitle, attr: {id: uid}"></span>
</div>
{% endblock config_form %}
