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

    RED.nodes.registerType('ui_ui_control', {
        category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
        color: 'rgb( 63, 173, 181)',
        defaults: {
            name: {value:""},
            events: {value:"all"}
        },
        inputs:1,
        outputs:1,
        align: "right",
        icon: "ui_link.png",
        paletteLabel: 'ui control',
        label: function() { return this.name || "ui control"; },
        labelStyle: function() { return this.name?"node_label_italic":""; },
        outputLabels: function() { return this.events; },
    });
</script>

<script type="text/html" data-template-name="ui_ui_control">
    <div class="form-row">
        <label for="node-input-events"><i class="fa fa-sign-out"></i> Output</label>
        <select id="node-input-events" style="width:70%;">
            <option value="all">Connect, lost, change tab or group events</option>
            <option value="change">Change tab or group events only</option>
            <option value="connect">Connect event only</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui_ui_control.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]ui_ui_control.placeholder.name">
    </div>
</script>