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

{% block form %}
<div class="toggle-container">
    <span class="switch switch-small" tabindex="0" role="switch"
        data-bind="
            css: {'on': getvalue}, 
            onEnterkeyClick, onSpaceClick, 
            click: setvalue, attr: {'aria-checked': getvalue, 'aria-label': config().label, 'aria-description': config().subtitle}
        "><small></small></span>
            <div style="display:flex; flex-direction:row;">
            <div class="arches-toggle-sm" data-bind="text:label"></div>
                <div style="margin-top: -17px;">
                <!-- ko if: node -->
                <i data-bind="css: {'ion-asterisk widget-label-required': node && node.isrequired}"></i>
                <!-- /ko -->
                </div>
            </div>
    <span class="arches-toggle-subtitle" data-bind="text: subtitle"></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 type="" id="" class="form-control input-md widget-input" data-bind="value: subtitle, valueUpdate: 'keyup'">
</div>
<div class="control-label">
  <span data-bind="text: $root.translations.defaultValue"></span>
</div>
<div class="toggle-container">
    <span class="switch switch-small" tabindex="0" role="switch"
        data-bind="
            css: {'on': getvalue}, 
            onEnterkeyClick, onSpaceClick,
            click: setvalue, attr: {'aria-checked': getvalue, 'aria-label': config().label, 'aria-description': config().subtitle}
        "><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: subtitle"></span>
</div>
{% endblock config_form %}
