<script type="text/javascript">
    // convert to i18 text
    function c_ui_tab(x) {
        return RED._("node-red-dashboard/ui_tab:ui_tab."+x);
    }

    RED.nodes.registerType('ui_tab',{
        category: 'config',
        defaults: {
            name: {value: c_ui_tab("label.home")},
            icon: {value: 'dashboard'},
            order: {value: 0},
            disabled: {value: false},
            hidden: {value: false}
        },
        paletteLabel: 'dashboard tab',
        label: function() { return this.name || c_ui_tab("label.tab"); },
        sort: function(A,B) {
            return A.order - B.order;
        },
        oneditprepare: function() {
            $("#node-config-input-disabled-btn").on("click", function(e) {
                var i = $(this).find("i");
                var active = i.hasClass("fa-toggle-on");
                var newCls = "fa fa-toggle-" + (active ? "off" : "on");
                i.attr("class", newCls);
                $("#node-config-input-disabled").prop('checked',active);

                var newTxt = c_ui_tab(active ? "label.disabled" : "label.enabled");
                $("#node-config-input-disabled-label").text(newTxt);

                var info = $("#node-config-input-disabled-info");
                var done = active ? info.show() : info.hide();
            });
            if (this.disabled) {
                $("#node-config-input-disabled-btn").click();
            }
            else {
                $("#node-config-input-disabled-label").text(c_ui_tab("label.enabled"));
            }

            $("#node-config-input-hidden-btn").on("click", function(e) {
                var i = $(this).find("i");
                var active = i.hasClass("fa-toggle-on");
                var newCls = "fa fa-toggle-" + (active ? "off" : "on");
                i.attr("class", newCls);
                $("#node-config-input-hidden").prop('checked',active);

                var newTxt = c_ui_tab(active ? "label.hidden" : "label.visible");
                $("#node-config-input-hidden-label").text(newTxt);

                var info = $("#node-config-input-hidden-info");
                var done = active ? info.show() : info.hide();
            });
            if (this.hidden) {
                $("#node-config-input-hidden-btn").click();
            }
            else {
                $("#node-config-input-hidden-label").text(c_ui_tab("label.visible"));
            }
        },
        oneditsave: function() {
            this.disabled = $("#node-config-input-disabled").prop("checked");
            this.hidden = $("#node-config-input-hidden").prop("checked");
        }
    });
</script>

<script type="text/html" data-template-name="ui_tab">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui_tab.label.name"></span></label>
        <input type="text" id="node-config-input-name">
    </div>
    <div class="form-row">
        <label for="node-config-input-icon"><i class="fa fa-file-image-o"></i> <span data-i18n="ui_tab.label.icon"></span></label>
        <input type="text" id="node-config-input-icon">
    </div>
    <div class="form-row">
        <label for="node-config-input-disabled-btn"><i class="fa fa-ban"></i> <span data-i18n="ui_tab.label.state"></span></label>
        <button id="node-config-input-disabled-btn" class="editor-button" style="width:100px; margin-right:6px;"><i class="fa fa-toggle-on"></i> <span id="node-config-input-disabled-label"></span></button>
        <input type="checkbox" id="node-config-input-disabled" style="display:none;"/>
        <span id="node-config-input-disabled-info" data-i18n="[html]ui_tab.info.disabled" style="display:none;"></span>
    </div>
    <div class="form-row">
        <label for="node-config-input-hidden-btn"><i class="fa fa-eye-slash"></i> <span data-i18n="ui_tab.label.navmenu"></span></label>
        <button id="node-config-input-hidden-btn" class="editor-button" style="width:100px; margin-right:6px;"><i class="fa fa-toggle-on"></i> <span id="node-config-input-hidden-label"></span></button>
        <input type="checkbox" id="node-config-input-hidden" style="display:none;"/>
        <span id="node-config-input-hidden-info" data-i18n="[html]ui_tab.info.hidden" style="display:none;"></span>
    </div>
    <div class="form-tips" data-i18n="[html]ui_tab.tip"></div>
</script>