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

{% block form %}
<div class="row widget-wrapper">
    <div class="form-group">
        <label class="control-label widget-input-label" for="" data-bind="text:label"></label>
        <!-- ko if: node -->
        <i data-bind="
            css: {'ion-asterisk widget-label-required': node.isrequired},
            attr: {'aria-label': $root.translations.required}        
        "></i>
        <!-- /ko -->
        <div class="col-xs-12">
            <input type="text" data-bind="textInput: value, attr: {placeholder: placeholder, maxlength: maxLength, disabled: disable}" class="form-control input-lg widget-input">
        </div>
    </div>
</div>
{% endblock form %}

{% block config_form %}
<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, 'aria-label': $root.translations.placeholder}, textInput: placeholder"
    >
</div>
<div class="control-label">
    <span data-bind="text: $root.translations.maxLength"></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.maxLength, 'aria-label': $root.translations.maxLength},
            textInput: maxLength
        "
    >
</div>

<div class="control-label">
    <span data-bind="text: $root.translations.defaultValue"></span>
</div>
<div class="col-xs-12 pad-no crud-widget-container">
    <input type="" placeholder="{% trans "Default Value" %}" class="form-control input-md widget-input" 
        data-bind="
            textInput: defaultValue, 
            attr:{'placeholder': $root.translations.defaultValue, 'aria-label': $root.translations.placeholder}
        "
    >
</div>
<div class="node-config-item">
    <div class="control-label">
        <span data-bind="text: $root.translations.disabled"></span>
    </div>
    <div class="pad-no">
        <div data-bind="
            component: { 
                name: 'views/components/simple-switch', 
                params: {
                    value: uneditable, 
                    config:{
                        label: $root.translations.disableEditing,
                        subtitle: $root.translations.preventUsersFromEditingValue
                    }
                }
            }">
        </div>
    </div>
</div>
{% endblock config_form %}
