{% 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">
        <div class="widget-inline-tools-collapser" data-bind=" click: function() {
            showi18nOptions(!showi18nOptions());
        }">
            <span style="flex: 1">
                <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 -->
            </span>
            <span>
                <i class="fa" data-bind="{
                    css: {
                        'fa-caret-down' : !showi18nOptions(),
                        'fa-caret-up' : showi18nOptions(),
                    }
                }"></i>
                <span data-bind="text: $root.translations.languages"></span>
            </span>
        </div>
        <div class="form-horizontal" data-bind="if: showi18nOptions">
            <div class="i18n-style-tools-panel">
                <div style="display: flex; flex-direction: column; max-width:600px">
                    <label class="widget-input-label i18n-style-tools-label" for="lang_dd">
                        <span data-bind="text: $root.translations.language"></span>
                    </label>
                    <select id="lang_dd" style="flex:1" name="language" data-bind="options: languages, optionsText: function(item){return item.name + ' (' + item.code + ')'}, value: currentLanguage, chosen: {width:'100%'}">
                    </select>
                    <label class="widget-input-label i18n-style-tools-label" for="lang_dir">
                        <span data-bind="text: $root.translations.direction"></span>
                    </label>
                    <select
                        id="lang_dir"
                        style="flex:1"
                        name="language"
                        data-bind="
                            value: currentDirection,
                            chosen: {'width':'100%'},
                            optionsText: 'text',
                            optionsValue: 'value',
                            options: [
                                { text: $root.translations.leftToRight, value: 'ltr' },
                                { text: $root.translations.rightToLeft, value: 'rtl' },
                            ],
                        "
                    ></select>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <textarea
                rows="10"
                cols="80"
                data-bind="
                    ckeditor: currentText,
                    language: currentLanguage.code,
                    direction: currentDirection,
                    placeholder: currentPlaceholder,
                    ckeditorOptions: {
                        entities_latin: false,
                        entities_greek: false
                    },
                    valueUpdate: 'afterkeydown',
                    attr: {disabled: disabled}
                "></textarea>
        </div>
    </div>
</div>
{% endblock form %}

{% block config_form %}
<div class="control-label">
    <span data-bind="text: $root.translations.placeholder"></span>
</div>

<textarea
    rows="10"
    cols="80"
    class="form-control input-md widget-input"
    data-bind="
        ckeditor: defaultText,
        isConfigForm: true,
        language: currentLanguage.code,
        direction: currentDirection,
        placeholder: currentPlaceholder,
        ckeditorOptions: {},
        valueUpdate: 'afterkeydown',
        attr: {disabled: disabled}
    "
></textarea>
{% endblock config_form %}

{% block report %}
<!-- ko if: !ko.unwrap(hideEmptyNodes) || (ko.unwrap(hideEmptyNodes) === true && !!ko.unwrap(currentText) ) -->
<dt data-bind="text: label, class: nodeCssClasses"></dt>
<dd data-bind="html: currentText || $root.translations.none, class: nodeCssClasses"></dd>
<!-- /ko -->
{% endblock report %}

{% block display_value %}
<!-- ko if: displayValue() && currentLanguage() && displayValue()[currentLanguage().code] &&  displayValue()[currentLanguage().code]['value'] && !ko.unwrap(displayfullvalue) -->
<em>
    <span data-bind="text: '[' + $root.translations.richText + ']', class: nodeCssClasses"></span>
</em>
<!-- /ko -->
<!-- ko if: displayValue() && displayValue()[currentLanguage().code] &&  displayValue()[currentLanguage().code]['value'] && ko.unwrap(displayfullvalue) === true -->
<div data-bind="html: displayValue() && displayValue()[currentLanguage().code] &&  displayValue()[currentLanguage().code]['value'] ? currentText : $root.translations.none, class: nodeCssClasses"></div>
<!-- /ko -->
<!-- ko if: !displayValue() || !displayValue()[currentLanguage().code] || !displayValue()[currentLanguage().code]['value'] -->
<span data-bind="text: $root.translations.none, class: nodeCssClasses"></span>
<!-- /ko -->
{% endblock display_value %}
