<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="../css/modals.scss"/>
        <meta charset="UTF-8">
        <title>TeaSpeak-Web client templates</title>
    </head>
    <body>
        <script class="jsrender-template" id="tmpl_main" type="text/html">
            <div class="app-container">
                <div class="app">
                    <!-- navigation bar -->
                    <div class="container-control-bar">
                        <div id="control_bar" class="control_bar">
                            <div class="button btn_connect container-connect" title="{{tr 'Connect to a server' /}}">
                                <div class="icon_x32 client-connect"></div>
                            </div>

                            <div class="button-dropdown container-disconnect" title="{{tr 'Disconnect from server' /}}" style="display: none">
                                <div class="buttons">
                                    <div class="button icon_x32 client-disconnect btn_disconnect"></div>
                                    <div class="button-dropdown">
                                        <div class="arrow down"></div>
                                    </div>
                                </div>
                                <div class="dropdown" style="width: 350px">
                                    <div class="btn_disconnect"><div class="icon client-disconnect"></div><a>{{tr "Disconnect from current server" /}}</a></div>
                                    <div class="btn_connect"><div class="icon client-connect"></div><a>{{tr "Connect to a server" /}}</a></div>
                                </div>
                            </div>
                            <!--
                            <div class="button btn_disconnect" title="{{tr 'Disconnect from server' /}}" style="display: none">
                                <div class="icon_x32 client-disconnect"></div>
                            </div>
                            -->

                            <div class="button-dropdown btn_bookmark" title="{{tr 'Bookmarks' /}}">
                                <div class="buttons">
                                    <div class="button icon_x32 client-bookmark_manager btn_bookmark_list"></div>
                                    <div class="button-dropdown">
                                        <div class="arrow down"></div>
                                    </div>
                                </div>
                                <div class="dropdown bookmark-dropdown" style="width: 350px">
                                    <div class="btn_bookmark_list"><div class="icon client-bookmark_manager"></div><a>{{tr "Manage bookmarks" /}}</a></div>
                                    <div class="btn_bookmark_add"><div class="icon client-bookmark_add"></div><a>{{tr "Add current server to bookmarks" /}}</a></div>
                                    <div class="btn_bookmark_remove"><div class="icon client-bookmark_remove"></div><a>{{tr "Remove current server to bookmarks" /}}</a></div>
                                    <hr>

                                </div>
                            </div>

                            <div class="divider"></div>

                            <div class="hide-small button-dropdown btn_away" title="{{tr 'Toggle away status' /}}">
                                <div class="buttons">
                                    <div class="button icon_x32 client-away btn_away_toggle"></div>
                                    <div class="button-dropdown">
                                        <div class="arrow down"></div>
                                    </div>
                                </div>
                                <div class="dropdown" style="width: 350px">
                                    <div class="btn_away_disable"><div class="icon client-present"></div><a>{{tr "Go online" /}}</a></div>
                                    <div class="btn_away_enable"><div class="icon client-away"></div><a>{{tr "Set away on this server" /}}</a></div>
                                    <div class="btn_away_message"><div class="icon client-away"></div><a>{{tr "Set away message on this server" /}}</a></div>
                                    <hr class="btn_away_message_global"> <!-- applied to this HR this class because it needs to get hidden as well if we dont have global settings -->
                                    <div class="btn_away_enable_global"><div class="icon client-away"></div><a>{{tr "Set away for all servers" /}}</a></div>
                                    <div class="btn_away_message_global"><div class="icon client-away"></div><a>{{tr "Set away message for all servers" /}}</a></div>
                                    <div class="btn_away_disable_global"><div class="icon client-present"></div><a>{{tr "Go online for all servers" /}}</a></div>
                                </div>
                            </div>
                            <div class="hide-small button btn_mute_input">
                                <div class="icon_x32 client-input_muted" title="{{tr 'Mute/unmute microphone' /}}"></div>
                            </div>
                            <div class="hide-small button btn_mute_output">
                                <div class="icon_x32 client-output_muted" title="{{tr 'Mute/unmute headphones' /}}"></div>
                            </div>

                            <div class="show-small button-dropdown dropdown-audio" title="{{tr 'Audio settings' /}}">
                                <div class="buttons">
                                    <div class="button button-display icon_x32 client-music"></div>
                                    <div class="button-dropdown">
                                        <div class="arrow down"></div>
                                    </div>
                                </div>
                                <div class="dropdown">
                                    <div class="btn_mute_input" title="{{tr 'Mute/unmute microphone' /}}">
                                        <div class="icon client-input_muted"></div>
                                        <a>{{tr "Mute/unmute microphone" /}}</a>
                                    </div>
                                    <div class="btn_mute_output" title="{{tr 'Mute/unmute headphones' /}}">
                                        <div class="icon client-output_muted"></div>
                                        <a>{{tr "Mute/unmute headphones" /}}</a>
                                    </div>
                                </div>
                            </div>
                            <div class="divider"></div>
                            <div class="button button-subscribe-mode">
                                <div class="icon_x32" title="{{tr 'Toggle channel subscribe mode' /}}"></div>
                            </div>
                            <div class="hide-small button-dropdown btn_token" title="{{tr 'Use token' /}}">
                                <div class="buttons">
                                    <div class="button icon_x32 client-token btn_token_use"></div>
                                    <div class="button-dropdown">
                                        <div class="arrow down"></div>
                                    </div>
                                </div>
                                <div class="dropdown">
                                    <div class="btn_token_list"><div class="icon client-token"></div><a>{{tr "List tokens" /}}</a></div>
                                    <div class="btn_token_use"><div class="icon client-token_use"></div><a>{{tr "Use token" /}}</a></div>
                                </div>
                            </div>

                            <div style="width: 100%"></div>

                            <div class="show-small button-dropdown dropdown-servertools" title="{{tr 'Server tools' /}}">
                                <div class="buttons">
                                    <div class="button button-display icon_x32 client-virtualserver_edit"></div>
                                    <div class="button-dropdown">
                                        <div class="arrow down"></div>
                                    </div>
                                </div>
                                <div class="dropdown right">
                                    <div class="button-playlist-manage" title="{{tr 'Playlists' /}}">
                                        <div class="icon icon-playlist-manage"></div>
                                        <a>{{tr "Playlists" /}}</a>
                                    </div>
                                    <div class="btn_banlist" title="{{tr 'Banlist' /}}">
                                        <div class="icon client-ban_list"></div>
                                        <a>{{tr "Banlist" /}}</a>
                                    </div>
                                    <div class="btn_permissions" title="{{tr 'View/edit permissions' /}}">
                                        <div class="icon client-permission_overview"></div>
                                        <a>{{tr "View/edit permissions" /}}</a>
                                    </div>
                                    <div class="btn_query_toggle" title="{{tr 'Show/hide server queries' /}}">
                                        <div class="icon client-toggle_server_query_clients"></div>
                                        <a class="query-text"></a>
                                    </div>
                                    <div class="btn_query_manage" title="{{tr 'Manage server queries' /}}">
                                        <div class="icon client-server_query"></div>
                                        <a>{{tr "Manage server queries" /}}</a>
                                    </div>
                                </div>
                            </div>

                            <div class="hide-small button button-playlist-manage" title="{{tr 'Playlists' /}}">
                                <div class="icon_x32 icon-playlist-manage"></div>
                            </div>
                            <div class="hide-small button btn_banlist" title="{{tr 'Banlist' /}}">
                                <div class="icon_x32 client-ban_list"></div>
                            </div>
                            <div class="hide-small button btn_permissions" title="{{tr 'View/edit permissions' /}}">
                                <div class="icon_x32 client-permission_overview"></div>
                            </div>

                            <!-- the query button -->
                            <div class="hide-small button-dropdown btn_query" title="{{tr 'Show/hide server queries' /}}">
                                <div class="buttons">
                                    <div class="button icon_x32 client-server_query btn_query_toggle"></div>
                                    <div class="button-dropdown">
                                        <div class="arrow down"></div>
                                    </div>
                                </div>
                                <div class="dropdown display_left">
                                    <div class="btn_query_toggle"><div class="icon client-toggle_server_query_clients"></div><a class="query-text"></a></div>
                                    <div class="btn_query_manage"><div class="icon client-server_query"></div><a>{{tr "Manage server queries" /}}</a></div>
                                    <!-- <div class="btn_query_create"><div class="icon client-away"></div><a>{{tr "Create server query login" /}}</a></div> -->
                                </div>
                            </div>
                            <div class="divider"></div>
                            <div class="button btn_open_settings" title="{{tr 'Edit global client settings' /}}">
                                <div class="icon_x32 client-settings"></div>
                            </div>
                        </div>
                    </div>
                    <div class="container-connection-handlers scrollbar" id="connection-handlers">
                        <div class="connection-handlers"> </div>
                        <div class="container-scroll">
                            <div class="button-scroll button-scroll-left">
                                <div class="icon client-arrow_left"></div>
                            </div>
                            <div class="button-scroll button-scroll-right disabled">
                                <div class="icon client-arrow_right"></div>
                            </div>
                        </div>
                    </div>

                    <div class="container-app-main">
                        <div class="container-channel-chat">
                            <!-- Channel tree -->
                            <div class="container-channel-tree main_container">
                                <div class="channel-tree" id="channelTree"></div>
                            </div>

                            <div class="container-seperator horizontal" seperator-id="seperator-channel-chat"></div>
                            <!-- Chat window -->
                            <div class="main_container container-chat" id="chat"> </div>
                        </div>
                        <div class="container-seperator vertical" seperator-id="seperator-main-info"></div>
                        <div id="select_info" class="main_container container-info"> </div> <!-- Selection info -->
                    </div>
                </div>
            </div>
            <div id="contextMenu" class="context-menu"></div>
        </script>

        <script class="jsrender-template" id="tmpl_select_info" type="text/html">
            <div class="select_info" style="width: 100%; max-width: 100%">
                <button type="button" class="close" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <div class="container-banner"></div>
                <!-- <div class="container-seperator horizontal" seperator-id="seperator-hostbanner-info"></div> -->
                <div class="container-select-info"></div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat" type="text/html">
            <div class="container-frame-chat">
                <div class="messages">
                    <div class="message_box"></div>
                </div>
                <div class="chats"></div>
                <div class="input">
                    <!--<div contentEditable="true" class="input_box"></div>-->
                    <div class="form-group">
                                            <textarea id="input-chat-input"
                                                      type="text"
                                                      class="form-control input-message client-chat-box-field"
                                                      placeholder="{{tr 'enter a chat message...' /}}"
                                                      autocomplete="off"></textarea>
                    </div>
                    <button class="btn btn-primary button-send">{{tr "Send" /}}</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_modal" type="text/html">
            <div class="modal fade" tabindex="-1" role="dialog" style="padding-right: 8%; padding-left: 8%;" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: unset;">
                    <div class="modal-content" style="{{if full_size}}flex-grow: 1{{/if}}">
                        <div class="modal-header {{if header_class}}{{:header_class}}{{/if}}">
                            <node key="modal_header"></node>
                            {{if closeable}}
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            {{/if}}
                        </div>
                        <div class="modal-body">
                            <node key="modal_body"></node>
                        </div>
                        {{if modal_footer}}
                        <div class="modal-footer">
                            <node key="modal_footer"></node>
                        </div>
                        {{/if}}
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_modal_input" type="text/html">
            <div class="modal fade" tabindex="-1" role="dialog" style="padding-right: 8%; padding-left: 8%;" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: unset;">
                    <div class="modal-content">
                        <div class="modal-header modal-header-input">
                            <node key="modal_header"></node>
                            {{if closeable}}
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            {{/if}}
                        </div>
                        <div class="modal-body modal-body-input">
                            <node key="question"></node>
                            <div class="form-group container-value {{if field_title}}with-title{{/if}}">
                                {{if field_title}}
                                    <label for="input-modal-input" class="bmd-label-floating">{{>field_title}}</label>
                                {{/if}}
                                <!-- placeholder="ts.teaspeak.de" -->
                                <!-- aria-describedby="input-connect-address-help" -->
                                <input id="input-modal-input"
                                       type="text"
                                       class="form-control"
                                       {{if field_placeholder}} placeholder="{{>field_placeholder}}"{{/if}}
                                       autocomplete="off"
                                >
                                {{if error_message || field_label}}
                                <div class="container-help-feedback">
                                    {{if error_message}}
                                        <div class="invalid-feedback">{{>error_message}}</div>
                                    {{/if}}
                                    {{if field_label}}
                                        <span class="bmd-help">{{>field_label}}</span>
                                    {{/if}}
                                </div>
                                {{/if}}
                            </div>
                        </div>
                        <div class="modal-footer modal-footer-button-group">
                            <button type="button" class="btn btn-warning button-cancel">{{tr "Cancel" /}}</button>
                            <button type="button" class="btn btn-raised btn-success button-submit">{{tr "Ok" /}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_modal_yesno" type="text/html">
            <div class="modal fade" tabindex="-1" role="dialog" style="padding-right: 8%; padding-left: 8%;" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: unset;">
                    <div class="modal-content">
                        <div class="modal-header modal-header-warning bg-warning">
                            <node key="modal_header"></node>
                        </div>
                        <div class="modal-body modal-body-input">
                            <node key="question"></node>
                        </div>
                        <div class="modal-footer modal-footer-button-group">
                            <button type="button" class="btn btn-danger button-no">{{>text_no}}</button>
                            <button type="button" class="btn btn-raised btn-success button-yes">{{>text_yes}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </script>

        <!-- Template for the connect modal -->
        <script class="jsrender-template" id="tmpl_connect" type="text/html">
            <modal>
                <modal-header>
                    <h5 class="modal-title">{{tr "Connect to a server" /}}</h5>
                </modal-header>
                <modal-body class="modal-connect">
                    <div class="container-address-password">
                        <div class="form-group container-address">
                            <label for="input-connect-address">{{tr "Server Address" /}}</label>
                            <input id="input-connect-address" type="text" class="form-control" aria-describedby="input-connect-address-help" placeholder="ts.teaspeak.de" autocomplete="off">
                            <div class="invalid-feedback">{{tr "Please enter a valid server address" /}}</div>
                        </div>
                        <div class="form-group container-password">
                            <label for="input-connect-password-{{>password_id}}" class="bmd-label-floating">{{tr "Server password" /}}</label>
                            <form autocomplete="off" onsubmit="return false;">
                                <input id="input-connect-password-{{>password_id}}" type="password" class="form-control" autocomplete="off">
                            </form>
                        </div>
                    </div>
                    <div class="form-group container-nickname">
                        <label for="input-connect-nickname">{{tr "Nickname" /}}</label>
                        <input id="input-connect-nickname" type="text" class="form-control" aria-describedby="input-connect-nickname-help" placeholder="Another TeaSpeak user">
                        <div class="invalid-feedback">{{tr "Please enter a valid server nickname" /}}</div>
                        <!-- <small id="input-connect-nickname-help" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
                    </div>
                    <div class="container-profile-manage">
                        <div class="form-group container-select-profile">
                            <label for="select-connect-profile" class="bmd-label-floating">{{tr "Connect Profile" /}}</label>
                            <select class="form-control" id="select-connect-profile"> </select>
                            <div class="invalid-feedback">{{tr "Selected profile is invalid. Select another one or fix the profile." /}}</div>
                        </div>
                        <span class="form-group bmd-form-group container-manage"> <!-- needed to match padding for floating labels -->
                            <button type="button" class="btn btn-raised button-manage-profiles">{{tr "Profiles" /}}</button>
                        </span>
                    </div>
                </modal-body>
                <modal-footer>
                    <button type="button" class="btn btn-raised btn-success button-connect">{{tr "Connect" /}}</button>
                    {{if multi_tab}}
                    <button type="button" class="btn btn-raised btn-success button-connect-new-tab">{{tr "Connect in a new tab" /}}</button>
                    {{/if}}
                </modal-footer>
            </modal>
        </script>


        <!-- Template for channel create & edit-->
        <script class="jsrender-template" id="tmpl_channel_edit" type="text/html">
            <div class="align_column general_properties container-channel-edit-general">
                <div class="container-name-icon form-row">
                    <div class="container-name form-group">
                        <label>{{tr "Name:" /}}</label>
                        <input class="form-control channel_name" value="{{>channel_name}}"/>
                    </div>
                    <div class="container-icon form-group">
                        <label>{{tr "Icon:" /}}</label>
                        <input class="form-control">
                        <span class="bmd-form-group button-select-icon">
                            <div class="icon-node">
                                <node key="channel_icon"/>
                            </div>
                        </span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="bmd-label-floating">{{tr "Channel password" /}}</label>

                    <!-- Use a random id to trick the default browser password manager. (I think something like a default password is really useless and -->
                    <!-- Just display a random value here-->
                    <input class="form-control channel_password" type="password" id="field_channel_password_{{rnd '0~13377331'/}}" {{if channel_flag_password}} value="WolverinDEV"{{/if}}/>
                </div>
                <div class="form-group">
                    <label class="bmd-label-static">{{tr "Topic:" /}}</label>
                    <input class="form-control channel_topic" value="{{>channel_topic}}"/>
                </div>
                <div class="form-group">
                    <label class="bmd-label-static">{{tr "Description:" /}}</label>
                    <textarea class="form-control channel_description" style="min-height: 30px; max-height: 500px; resize: vertical;">{{>channel_description}}</textarea>
                </div>
                <!--
                <div class="properties">
                    <a class="key">{{tr "Name:"/}}</a>
                    <input class="value channel_name" value="{{>channel_name}}"/>

                    <a class="key">{{tr "Password:"/}}</a>

                    <input class="value channel_password" type="password" id="field_channel_password_{{rnd '0~13377331'/}}" {{if channel_flag_password}} value="WolverinDEV"{{/if}}/>

                    <a class="key">{{tr "Topic:"/}}</a>
                    <input class="value channel_topic" value="{{>channel_topic}}"/>

                    <a class="key">{{tr "Description:"/}}</a>
                    <textarea class="value channel_description" style="height: 150px; resize: none">{{>channel_description}}</textarea>
                </div>
                -->
            </div>
            <div style="margin-bottom: 5px"></div>
            <x-tab>
                <x-entry>
                    <x-tag>{{tr "Standard" /}}</x-tag>
                    <x-content>
                        <div class="container-channel-settings-standard settings_standard">
                            <div class="container-left">
                                <div>
                                    <a>{{tr "Channel Type" /}}</a><br>

                                    <fieldset class="container-channel-type">
                                        <div class="radio"> <!-- May add class disabled-->
                                            <label>
                                                <input type="radio" name="channel_type" value="temp" {{if !channel_flag_semi_permanent && !channel_flag_permanent}}checked{{/if}}/>
                                                {{tr "Temporary" /}}
                                            </label>
                                        </div>

                                        <div class="radio"> <!-- May add class disabled-->
                                            <label>
                                                <input type="radio" name="channel_type" value="semi" {{if channel_flag_semi_permanent}}checked{{/if}}/>
                                                {{tr "Semi-Permanent" /}}
                                            </label>
                                        </div>

                                        <div class="radio"> <!-- May add class disabled-->
                                            <label>
                                                <input type="radio" name="channel_type" value="perm" {{if channel_flag_semi_permanent}}checked{{/if}}/>
                                                {{tr "Permanent" /}}
                                            </label>
                                        </div>

                                        <hr style="width: 100%;">
                                        <div class="switch">
                                            <label>
                                                <input type="checkbox" name="channel_default" id="default" value="def">
                                                {{tr "Default Channel" /}}
                                            </label>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                            <div class="container-divider"></div>
                            <div class="container-right">
                                <div class="form-group">
                                    <label class="bmd-label-static">{{tr "Sort this channel after:"/}}</label>
                                    <select class="form-control order_id">
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="bmd-label-static">{{tr "Needed Talk Power:"/}}</label>
                                    <input class="form-control" type="number" min="0" value="0" name="talk_power">
                                </div>
                            </div>
                        </div>
                    </x-content>
                </x-entry>
                <x-entry>
                    <x-tag>{{tr "Audio" /}}</x-tag>
                    <x-content>
                        <div class="container-channel-settings-audio">
                            <div class="container-presets">
                                <div class="group_box">
                                    <div class="header">{{tr "Presets" /}}</div>
                                    <div class="content">
                                        <fieldset style="">
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="voice_template" value="voice_mobile"/>
                                                    {{tr "Voice Mobile" /}}
                                                </label>
                                            </div>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="voice_template" value="voice_desktop"/>
                                                    {{tr "Voice Desktop" /}}
                                                </label>
                                            </div>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="voice_template" value="music"/>
                                                    {{tr "Music" /}}
                                                </label>
                                            </div>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="voice_template" value="custom"/>
                                                    {{tr "Custom" /}}
                                                </label>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                            </div>
                            <div class="container-divider"></div>
                            <div class="container-custom">
                                <div class="group_box">
                                    <div class="header">{{tr "Custom Settings" /}}</div>
                                    <div class="content">
                                        <div class="custom">
                                            <div class="form-group">
                                                <label class="bmd-label-static">Codec:</label>
                                                <select class="form-control voice_codec">
                                                    <option value="speex_narrow">
                                                        {{tr "Speex Narrowband" /}}
                                                    </option>
                                                    <option value="speex_wide">
                                                        {{tr "Speex Wideband" /}}
                                                    </option>
                                                    <option value="speex_ultra_wide">
                                                        {{tr "Speex Ultra-Wideband" /}}
                                                    </option>
                                                    <option value="celt">
                                                        {{tr "CELT Mono" /}}
                                                    </option>
                                                    <option value="opus_voice">
                                                        {{tr "Opus Voice" /}}
                                                    </option>
                                                    <option value="opus_music">
                                                        {{tr "Opus Music" /}}
                                                    </option>
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label class="bmd-label-static">
                                                    {{tr "Quality:" /}}
                                                </label>
                                                <input class="form-control voice_quality_slider" type="range" min="1" max="10" value="6">
                                                <small class="text-muted voice_quality_number"></small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </x-content>
                </x-entry>
                <x-entry>
                    <x-tag>{{tr "Permissions" /}}</x-tag>
                    <x-content>
                        <div class="container-channel-settings-permission settings_permissions">
                            <div class="container-left">
                                <div class="group_box">
                                    <div class="header">{{tr "Regular needed powers:" /}}</div>
                                    <div class="content">
                                        <div class="form-group">
                                            <label>{{tr "Join:" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value" permission="i_channel_needed_join_power">
                                            <span class="bmd-help">{{tr "Required power to join this channel" /}}</span>
                                        </div>
                                        <div class="form-group">
                                            <label>{{tr "View:" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value" permission="i_channel_needed_view_power">
                                            <span class="bmd-help">{{tr "Required power to see this channel" /}}</span>
                                        </div>
                                        <div class="form-group">
                                            <label>{{tr "Subscribe:" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value" permission="i_channel_needed_description_view_power">
                                            <span class="bmd-help">{{tr "Required power to subscribe to this channel" /}}</span>
                                        </div>
                                        <div class="form-group">
                                            <label>{{tr "Modify:" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value" permission="i_channel_needed_modify_power">
                                            <span class="bmd-help">{{tr "Required power to modify this channel permissions" /}}</span>
                                        </div>
                                        <div class="form-group">
                                            <label>{{tr "Delete:" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value" permission="i_channel_needed_delete_power">
                                            <span class="bmd-help">{{tr "Required power to delete this channel" /}}</span>
                                        </div>
                                        <div class="form-group form-placeholder">
                                            <input class="form-control">
                                        </div> <!-- placeholder -->
                                    </div>
                                </div>
                            </div>
                            <div class="container-right">
                                <div class="group_box">
                                    <div class="header">{{tr "File transfer needed powers:" /}}</div>
                                    <div class="content">
                                        <div class="form-group">
                                            <label>{{tr "Browse:" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_file_browse_power">
                                            <span class="bmd-help">{{tr "Required power to browse all files and directories" /}}</span>
                                        </div>
                                        <div class="form-group">
                                            <label>{{tr "Upload:" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_file_upload_power">
                                            <span class="bmd-help">{{tr "Required power to upload files" /}}</span>
                                        </div>
                                        <div class="form-group">
                                            <label>{{tr "Download:" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_file_download_power">
                                            <span class="bmd-help">{{tr "Required power to download files" /}}</span>
                                        </div>
                                        <div class="form-group">
                                            <label>{{tr "Rename:" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_file_rename_power">
                                            <span class="bmd-help">{{tr "Required power to rename files within this channel" /}}</span>
                                        </div>
                                        <div class="form-group">
                                            <label>{{tr "Directory create:" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_directory_create_power">
                                            <span class="bmd-help">{{tr "Required power to create a directory" /}}</span>
                                        </div>
                                        <div class="form-group">
                                            <label>{{tr "Delete:" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_file_delete_power">
                                            <span class="bmd-help">{{tr "Required power to delete a directory or file" /}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </x-content>
                </x-entry>
                <x-entry>
                    <x-tag>{{tr "Advanced" /}}</x-tag>
                    <x-content>
                        <div class="container container-channel-settings-advanced settings_advanced">
                            <div class="container-other">
                                <div class="group_box">
                                    <div class="header">{{tr "Other Settings" /}}</div>
                                    <div class="content">
                                        <div class="form-group">
                                            <label class="bmd-label-static">
                                                {{tr "Phonetic Name:" /}}
                                            </label>
                                            <input class="form-control channel_name_phonetic" value="{{>channel_name_phonetic}}">
                                        </div>
                                        <div class="form-group">
                                            <label class="bmd-label-static">
                                                {{tr "Delete delay:" /}}
                                            </label>
                                            <!-- TODO Implement max? -->
                                            <input class="form-control channel_delete_delay" type="number" min="0" max="99999999" value="{{if channel_delete_delay}}{{:channel_delete_delay}}{{else}}0{{/if}}">
                                        </div>

                                        <div class="form-group">
                                            <div class="switch">
                                                <label>
                                                    <input class="channel_codec_is_unencrypted" type="checkbox" name="channel_default" value="def" {{if !channel_codec_is_unencrypted}}checked{{/if}}>
                                                    {{tr "Encrypt voice data" /}}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="container-max-users">
                                <div class="group_box">
                                    <div class="header">{{tr "Max users" /}}</div>
                                    <div class="content max_users">
                                        <fieldset style="">
                                            <div class="form-row">
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="max_users" value="infinity" {{if channel_flag_maxclients_unlimited}}checked{{/if}}/>
                                                        {{tr "Unlimited" /}}
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group">
                                                    <div class="radio">
                                                        <label>
                                                            <input type="radio" name="max_users" value="limited" {{if !channel_flag_maxclients_unlimited}}checked{{/if}}/>
                                                            <a>{{tr "Limited" /}}</a>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div style="margin-left: 5px" class="form-group">
                                                    <input class="form-control channel_maxclients" value="{{if channel_maxclients}}{{:channel_maxclients}}{{else}}0{{/if}}" type="number" min="0" max="99999999">
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>

                                <div class="group_box">
                                    <div class="header">{{tr "Family Max users" /}}</div>
                                    <div class="content max_users">
                                        <fieldset>
                                            <div class="form-row">
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="max_users_family" value="inherited" {{if channel_flag_maxfamilyclients_inherited}}checked{{/if}}/>
                                                        {{tr "Inherited" /}}
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="radio">
                                                    <label>
                                                        <input type="radio" name="max_users_family" value="infinity" {{if channel_flag_maxfamilyclients_unlimited}}checked{{/if}}/>
                                                        {{tr "Unlimited" /}}
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group">
                                                    <div class="radio">
                                                        <label>
                                                            <input type="radio" name="max_users_family" value="limited" {{if !channel_flag_maxfamilyclients_unlimited && !channel_flag_maxfamilyclients_inherited}}{{tr "checked" /}}{{/if}}/>
                                                            <a>{{tr "Limited" /}}</a>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div style="margin-left: 5px" class="form-group">
                                                    <input class="form-control channel_maxfamilyclients" value="{{if channel_maxfamilyclients}}{{:channel_maxfamilyclients}}{{else}}0{{/if}}" type="number" min="0" max="99999999">
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </x-content>
                </x-entry>
            </x-tab>
        </script>
        <script class="jsrender-template" id="tmpl_server_edit" type="text/html">
            <modal>
                <modal-header>
                    <h5 class="modal-title">{{tr "Manager the  Virtual Server" /}}</h5>
                </modal-header>
                <modal-body>
                    <div class="container-server-settings-general">
                        <div class="container-name-icon form-row">
                            <div class="container-name form-group">
                                <label>{{tr "Name:" /}}</label>
                                <input class="form-control virtualserver_name" value="{{>virtualserver_name}}"/>
                            </div>
                            <div class="container-icon form-group">
                                <label>{{tr "Icon:" /}}</label>
                                <input class="form-control">
                                <span class="bmd-form-group button-select-icon">
                                    <div class="icon-node">
                                        <node key="virtualserver_icon"/>
                                    </div>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>{{tr "Phonetic Name:" /}}</label>
                            <input class="form-control virtualserver_name_phonetic" value="{{>virtualserver_name_phonetic}}"/>
                        </div>
                        <div class="form-group">
                            <label>{{tr "Password:" /}}</label>
                            <input class="form-control virtualserver_password" autocomplete="nope" type="password" id="field_server_password_{{rnd '0~13377331'/}}" {{if virtualserver_flag_password}} value="WolverinDEV"{{/if}}/>
                        </div>
                        <hr>
                        <div class="container-server-settings-slots form-row">
                            <div class="form-group">
                                <label>{{tr "Maximum Clients:" /}}</label>
                                <input type="number" min="0" max="1024" value="{{:virtualserver_maxclients}}" class="form-control virtualserver_maxclients">
                            </div>
                            <div class="form-group">
                                <label>{{tr "Reserved slots:" /}}</label>
                                <input type="number" min="0" max="{{*: data.virtualserver_maxclients - 1 }}" value="{{:virtualserver_reserved_slots}}" class="form-control virtualserver_reserved_slots">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>{{tr "Welcome Message:" /}}</label>
                            <textarea class="form-control virtualserver_welcomemessage">{{>virtualserver_welcomemessage}}</textarea>
                        </div>
                        <hr>
                    </div>
                    <div style="margin-bottom: 5px"></div>
                    <x-tab>
                        <x-entry>
                            <x-tag>{{tr "Host" /}}</x-tag>
                            <x-content>
                                <div class="container-server-settings-host properties_host">
                                    <div class="group_box">
                                        <div class="header">{{tr "Binding" /}}</div>
                                        <div class="content">
                                            <div class="form-group">
                                                <label>{{tr "Host:" /}}</label>
                                                <input class="form-control virtualserver_host" value="{{>virtualserver_host}}"/>
                                            </div>
                                            <div class="form-group">
                                                <label>{{tr "Port:" /}}</label>
                                                <input type="number" min="1" max="65536" value="{{>virtualserver_port}}" class="form-control virtualserver_port"/>
                                            </div>
                                            <a>{{tr "Note: These settings require a virtual server restart to take effect!" /}}</a>
                                        </div>
                                    </div>

                                    <div class="group_box">
                                        <div class="header">{{tr "Host message" /}}</div>
                                        <div class="content">
                                            <div class="form-group">
                                                <label class="bmd-label-static">{{tr "Message:" /}}</label>
                                                <textarea class="form-control virtualserver_hostmessage" value="{{>virtualserver_hostmessage}}"/>
                                            </div>
                                            <div class="form-group">
                                                <label>{{tr "Message Mode:" /}}</label>
                                                <select class="form-control virtualserver_hostmessage_mode">
                                                    <option value="none">{{tr "No message" /}}</option>
                                                    <option value="log">{{tr "Show message in log" /}}</option>
                                                    <option value="modal">{{tr "Show message as modal" /}}</option>
                                                    <option value="modal_exit">{{tr "Show message as modal and disconnect the client" /}}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="group_box">
                                        <div class="header">{{tr "Host banner" /}}</div>
                                        <div class="properties-hostbanner content">
                                            <div class="form-row">
                                                <div class="form-group">
                                                    <label>{{tr "URL:" /}}</label>
                                                    <input type="url" class="form-control virtualserver_hostbanner_url" value="{{>virtualserver_hostbanner_url}}"/>
                                                </div>

                                                <div class="form-group">
                                                    <label>{{tr "Banner Gfx URL:" /}}</label>
                                                    <input type="url" class="form-control virtualserver_hostbanner_gfx_url" value="{{>virtualserver_hostbanner_gfx_url}}"/>
                                                </div>
                                            </div>

                                            <div class="form-row">
                                                <div class="form-group">
                                                    <label>{{tr "Gfx Interval" /}}</label>
                                                    <input type="number" pattern="^(0|[0-9]+0)$" value="{{:virtualserver_hostbanner_gfx_interval}}" class="form-control virtualserver_hostbanner_gfx_interval">
                                                </div>
                                                <div class="form-group">
                                                    <label>{{tr "Resize" /}}</label>
                                                    <select class="form-control virtualserver_hostbanner_mode">
                                                        <option value="none">{{tr "Do not adjust" /}}</option>
                                                        <option value="ignore_ratio">{{tr "Adjust but ignore ratio aspect" /}}</option>
                                                        <option value="keep_ratio">{{tr "Adjust and keep ratio aspect" /}}</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="group_box">
                                        <div class="header">{{tr "Host Button" /}}</div>
                                        <div class="properties-hostbutton content">
                                            <div class="form-group">
                                                <label>{{tr "Tooltip:" /}}</label>
                                                <input class="form-control virtualserver_hostbutton_tooltip" value="{{>virtualserver_hostbutton_tooltip}}"/>
                                            </div>
                                            <div class="form-row">
                                                <div class="form-group">
                                                    <label>{{tr "URL:" /}}</label>
                                                    <input type="url" class="form-control virtualserver_hostbutton_url" value="{{>virtualserver_hostbutton_url}}"/>
                                                </div>
                                                <div class="form-group">
                                                    <label>{{tr "Icon URL:" /}}</label>
                                                    <input type="url" class="form-control virtualserver_hostbutton_gfx_url" value="{{>virtualserver_hostbutton_gfx_url}}"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </x-content>
                        </x-entry>
                        <x-entry>
                            <x-tag>{{tr "Transfers" /}}</x-tag>
                            <x-content>
                                <div class="container-server-settings-file-transfer properties_transfer">
                                    <div class="group_box">
                                        <div class="header">{{tr "Upload" /}}</div>
                                        <div class="content">
                                            <div class="form-group">
                                                <label>{{tr "Bandwidth Limit (Bytes/s):" /}}</label>
                                                <input type="number" class="form-control virtualserver_max_upload_total_bandwidth" value="{{>virtualserver_max_upload_total_bandwidth}}"/>
                                            </div>
                                            <div class="form-group">
                                                <label>{{tr "Upload Quota (MiB):"/}}</label>
                                                <input type="number" class="form-control virtualserver_upload_quota" value="{{>virtualserver_upload_quota}}"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="group_box">
                                        <div class="header">{{tr "Download" /}}</div>
                                        <div class="content">
                                            <div class="form-group">
                                                <label>{{tr "Bandwidth Limit:"/}}</label>
                                                <input type="number" class="form-control virtualserver_max_download_total_bandwidth" value="{{>virtualserver_max_download_total_bandwidth}}"/>
                                            </div>

                                            <div class="form-group">
                                                <label>{{tr "Download Quota:"/}}</label>
                                                <input type="number" class="form-control virtualserver_download_quota" value="{{>virtualserver_download_quota}}"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </x-content>
                        </x-entry>
                        <x-entry>
                            <x-tag>{{tr "Anti-Flood" /}}</x-tag>
                            <x-content>
                                <div class="container-server-settings-anti-flood properties_flood">
                                    <div class="form-group">
                                        <label>{{tr "Reduced points per tick:" /}}</label>
                                        <input type="number" min="1" max="65536" class="form-control virtualserver_antiflood_points_tick_reduce" value="{{>virtualserver_antiflood_points_tick_reduce}}"/>
                                    </div>
                                    <div class="form-group">
                                        <label>{{tr "Points needed to block commands:" /}}</label>
                                        <input type="number" min="1" max="65536" class="form-control virtualserver_antiflood_points_needed_command_block" value="{{>virtualserver_antiflood_points_needed_command_block}}"/>
                                    </div>
                                    <div class="form-group">
                                        <label>{{tr "Points needed to block IP:" /}}</label>
                                        <input type="number" min="1" max="65536" class="form-control virtualserver_antiflood_points_needed_ip_block" value="{{>virtualserver_antiflood_points_needed_ip_block}}"/>
                                    </div>
                                </div>
                            </x-content>
                        </x-entry>
                        <x-entry>
                            <x-tag>{{tr "Security" /}}</x-tag>
                            <x-content>
                                <div class="container-server-settings-security properties_security">
                                    <div class="form-group">
                                        <label>{{tr "Needed Security Level:" /}}</label>
                                        <input type="number" min="1" max="64" value="{{:virtualserver_needed_identity_security_level}}" class="form-control virtualserver_needed_identity_security_level">
                                    </div>
                                    <div class="form-group">
                                        <label>{{tr "Channel voice data encryption:" /}}</label>
                                        <select class="form-control virtualserver_codec_encryption_mode">
                                            <option value="unset">{{tr "Edit per channel individually" /}}</option>
                                            <option value="off">{{tr "Globally disabled" /}}</option>
                                            <option value="on">{{tr "Globally enabled (recommended)" /}}</option>
                                        </select>
                                    </div>
                                </div>
                            </x-content>
                        </x-entry>
                        <x-entry>
                            <x-tag>{{tr "Misc" /}}</x-tag>
                            <x-content>
                                <div class="container-server-settings-misc properties_misc">
                                    <div class="group_box">
                                        <div class="header">{{tr "Default groups" /}}</div>
                                        <div class="content">
                                            <div class="form-group">
                                                <label>{{tr "Server group" /}}</label>
                                                <select class="form-control default_server_group"></select>
                                            </div>

                                            <div class="form-group">
                                                <label>{{tr "Music bot group" /}}</label>
                                                <select class="form-control default_music_group"></select>
                                            </div>

                                            <div class="form-group">
                                                <label>{{tr "Channel group" /}}</label>
                                                <select class="form-control default_channel_group"></select>
                                            </div>

                                            <div class="form-group">
                                                <label>{{tr "Channel Admin group" /}}</label>
                                                <select class="form-control default_channel_admin_group"></select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="group_box">
                                        <div class="header">{{tr "Complain" /}}</div>
                                        <div class="content container-complains">
                                            <div class="form-group">
                                                <label>{{tr "Autoban Count" /}}</label>
                                                <input type="number" min="1" max="65536" value="{{:virtualserver_complain_autoban_count}}" class="form-control virtualserver_complain_autoban_count">
                                            </div>
                                            <div class="form-group">
                                                <label>{{tr "Autoban Time" /}}</label>
                                                <input type="number" min="1" max="65536" value="{{:virtualserver_complain_autoban_time}}" class="form-control virtualserver_complain_autoban_time">
                                            </div>
                                            <div class="form-group">
                                                <label>{{tr "Remove Time" /}}</label>
                                                <input type="number" min="1" max="65536" value="{{:virtualserver_complain_remove_time}}" class="form-control virtualserver_complain_remove_time">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="container-general">
                                        <div class="form-group">
                                            <label>{{tr "Minimum clients is channel before silence:" /}}</label>
                                            <input type="number" min="1" max="65536" value="{{:virtualserver_min_clients_in_channel_before_forced_silence}}" class="form-control virtualserver_min_clients_in_channel_before_forced_silence">
                                        </div>

                                        <div class="form-group">
                                            <label>{{tr "Priority speaker dim modificator:" /}}</label>
                                            <input type="number" min="-100" max="0" value="{{:virtualserver_priority_speaker_dimm_modificator}}" class="form-control virtualserver_priority_speaker_dimm_modificator">
                                        </div>

                                        <div class="form-group">
                                            <label>{{tr "Delete delay for temporary channels" /}}</label>
                                            <input type="number" min="1" max="65536" value="{{:virtualserver_channel_temp_delete_delay_default}}" class="form-control virtualserver_channel_temp_delete_delay_default">
                                        </div>
                                    </div>

                                    <div class="group_box">
                                        <div class="header">{{tr "Server list" /}}</div>
                                        <div class="content">
                                            <div class="switch">
                                                <label>
                                                    <input type="checkbox" class="virtualserver_weblist_enabled" checked="{{:virtualserver_weblist_enabled}}">
                                                    {{tr "Enable reporting to the TeamSpeak server list" /}}
                                                </label>
                                            </div>
                                            <div class="switch">
                                                <label>
                                                    <input type="checkbox" disabled>
                                                    {{tr "<del>Enable reporting to the TeaSpeak server list</del> (TeaSpeak does not support this setting)" /}}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </x-content>
                        </x-entry>
                        <!-- TeaSpeak don't have any configurable log section
                        <x-entry>
                            <x-tag>Log</x-tag>
                            <x-content>TODO!</x-content>
                        </x-entry>
                        -->
                        <x-entry>
                            <x-tag>{{tr "Messages" /}}</x-tag>
                            <x-content>
                                <div class="container-server-settings-messages properties_messages">
                                    <div class="group_box">
                                        <div class="header">{{tr "Channel" /}}</div>
                                        <div class="content">
                                            <div class="form-group">
                                                <label>{{tr "Default Topic:" /}}</label>
                                                <textarea class="form-control virtualserver_default_channel_topic">{{>virtualserver_default_channel_topic}}</textarea>
                                            </div>
                                            <div class="form-group">
                                                <label>{{tr "Default Description" /}}</label>
                                                <textarea class="form-control virtualserver_default_channel_description">{{>virtualserver_default_channel_description}}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="group_box">
                                        <div class="header">{{tr "Client" /}}</div>
                                        <div class="content">
                                            <div class="form-group">
                                                <label>{{tr "Default Description" /}}</label>
                                                <textarea class="form-control virtualserver_default_client_description">{{>virtualserver_default_client_description}}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    {{tr "Note: These settings require a virtual server restart to take effect!" /}}
                                </div>
                            </x-content>
                        </x-entry>
                    </x-tab>
                </modal-body>
                <modal-footer>
                    <button class="btn btn-danger button_cancel">{{tr "Cancel" /}}</button>
                    <button class="btn btn-raised btn-success button_ok">{{tr "Save" /}}</button>
                </modal-footer>
            </modal>
        </script>

        <!-- Template for the settings -->
        <script class="jsrender-template" id="tmpl_settings" type="text/html">
            <x-tab>
                <x-entry>
                    <x-tag>{{tr "General"/}}</x-tag>
                    <x-content>
                        <div class="settings-general">
                            <div class="group_box">
                                <div class="header">{{tr "TeaSpeak Forum Connection" /}}</div>
                                <div class="content settings-teaspeak-forum">
                                    <div class="not-connected">
                                        <div>{{tr "You're currently not connected with your TeaSpeak Forum account" /}}</div>
                                        <button class="btn btn-primary btn-raised button-login">{{tr "login" /}}</button>
                                    </div>
                                    <!-- TODO new style! -->
                                    <div class="connected">
                                        <div class="connected-info">{{tr "You're connected via TeaSpeak forum" /}}</div>
                                        <div class="container-info-action">
                                            <div class="container-info">
                                                <div class="property username">
                                                    <div class="key">{{tr "Username:" /}}</div>
                                                    <div class="value">WolverinDEV</div>
                                                </div>
                                                <div class="property premium">
                                                    <div class="key">{{tr "Premium:" /}}</div>
                                                    <div class="value">YES</div>
                                                </div>
                                            </div>
                                            <div class="divider"></div>
                                            <div class="container-actions">
                                                <button class="button-logout">logout</button>
                                            </div>
                                        </div>
                                        <!--
                                        <div class="property synchronized">
                                            <div class="key">{{tr "Synchronized:" /}}</div>
                                            <div class="value">NO <button class="button-enable-disable-sync">{{tr "enable synchronization" /}}</button></div>
                                        </div>
                                        -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </x-content>
                </x-entry>
                <x-entry>
                    <x-tag>{{tr "Audio" /}}</x-tag>
                    <x-content>
                        <div class="settings_audio">
                            <div class="settings-device-error alert alert-warning alert-dismissible fade show" role="alert">
                                <div class="message"></div>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>

                            <div class="group_box">
                                <div class="header">{{tr "Microphone" /}}</div>
                                <div class="content settings-microphone {{if !voice_available}}disabled{{/if}}">
                                    {{if voice_available}}
                                    <div class="form-row settings-device settings-device-microphone">
                                        <div class="form-group settings-device-select">
                                            <label for="select-settings-microphone-device" class="bmd-label-static">{{tr "Device:" /}}</label>
                                            <select id="select-settings-microphone-device" class="form-control audio-select-microphone"></select>
                                        </div>
                                        <div class="form-group bmd-form-group">
                                            <button class="btn btn-secondary button-device-update">update</button>
                                        </div>
                                    </div>
                                    <div class="settings-vad-container">
                                        <div class="group_box">
                                            <div class="header">{{tr "Voice Activity Detection"/}}</div>
                                            <div class="content">
                                                <fieldset>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" id="select-settings-vad-type-1" value="pt" name="vad_type" class="custom-control-input">
                                                        <label class="custom-control-label" for="select-settings-vad-type-1">{{tr "Always active" /}}</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" id="select-settings-vad-type-2" value="vad" name="vad_type" class="custom-control-input">
                                                        <label class="custom-control-label" for="select-settings-vad-type-2">{{tr "Voice activity detection"/}}</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" id="select-settings-vad-type-3" value="ppt" name="vad_type" class="custom-control-input">
                                                        <label class="custom-control-label" for="select-settings-vad-type-3">{{tr "Push to talk"/}}</label>
                                                    </div>
                                                </fieldset>
                                            </div>
                                        </div>
                                        <div class="settings-vad-impl">
                                            <div class="settings-vad-impl-entry setting-vad-pt">
                                                 {{tr "There are no setting entries for an <b>always</b> online voice detection."/}}
                                            </div>
                                            <div class="settings-vad-impl-entry setting-vad-ppt">
                                                <div class="property ppt-key">
                                                    <div class="key">{{tr "Push to talk key:"/}}</div>
                                                    <div class="value">
                                                        <button type="button" class="btn btn-raised btn-primary vat_ppt_key">{{tr "Uninitialised"/}}</button>
                                                    </div>
                                                </div>
                                                <div class="form-group ppt-delay">
                                                    <label for="input-settings-ppt-delay" class="bmd-label-static">{{tr "Key release delay:" /}}</label>
                                                    <input id="input-settings-ppt-delay" class="form-control value" type="number" min="0" max="5000"/>
                                                </div>
                                            </div>
                                            <div class="settings-vad-impl-entry setting-vad-vad">
                                                <div>{{tr "Voice activity threshold (<a class='vad_vad_slider_value'>20</a>%)"/}}</div>
                                                <div class="vad_vad_threshold_selector">
                                                    <div class="vad_vad_bar">
                                                        <div class="container-hider">
                                                            <div class="hider vad_vad_bar_filler"></div>
                                                        </div>
                                                        <input type="range" min="0" max="100" value="50" class="vad_vad_slider">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {{else}}
                                    <div>{{tr "Voice had been disabled" /}}</div>
                                    {{/if}}
                                </div>
                            </div>
                            <div class="group_box">
                                <div class="header">{{tr "Speaker" /}}</div>
                                <div class="content settings-speaker">
                                    <div class="settings-device settings-device-speaker">
                                        <div class="form-group settings-device-select">
                                            <label for="select-settings-speaker-device" class="bmd-label-static">{{tr "Device:" /}}</label>
                                            <select id="select-settings-speaker-device" class="form-control audio-select-speaker"></select>
                                        </div>
                                        <div class="form-group bmd-form-group">
                                            <button class="btn btn-secondary button-device-update">update</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="group_box sound">
                                <div class="header">{{tr "Sound Settings" /}}</div>
                                <div class="content">
                                    <div class="sound-settings">
                                        <div class="property">
                                            <div class="key">Master volume:</div>
                                            <div class="value master-volume">
                                                <input type="range" min="0" max="100" value="100">
                                                <a>(66%)</a>
                                            </div>
                                        </div>
                                        <div class="property">
                                            <div class="key">
                                                {{tr "Overlap same sounds:" /}}
                                            </div>
                                            <div class="value overlap-sounds">
                                                <div class="switch">
                                                    <label>
                                                        <input type="checkbox" checked>
                                                        <div class="help-tip-container"> <!-- lets be absolute -->
                                                            <div class="help-tip tip-right tip-small">
                                                                <p>
                                                                    {{tr "This options deferments if a sound overlaps itself when played twice.<br>" +
                                                                    "An example would be when you move multiple clients, you hear that sound n-times.<br>" +
                                                                    "If this option is disabled, you hear that sound just once."
                                                                    /}}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="property">
                                            <div class="key muted-sounds">
                                                Mute sounds when output is muted:
                                            </div>
                                            <div class="value muted-sounds">
                                                <div class="switch">
                                                    <label>
                                                        <input type="checkbox" checked>
                                                        <div class="help-tip-container"> <!-- lets be absolute -->
                                                            <div class="help-tip tip-right tip-small">
                                                                <p>
                                                                    {{tr "Mute all system sounds, when you've muted your output.<br>If this option isn't disabled you'll still receive system sounds like 'user joined your channel'."/}}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="sound-list">
                                            <div class="sound-list-header">
                                                <div class="column sound-name">{{tr "Name" /}}</div>
                                                <div class="column sound-activated">{{tr "Activated" /}}</div>
                                            </div>
                                            <div class="sound-list-entries-container">
                                                <div class="sound-list-entries">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group sound-list-filter">
                                            <label for="input-settings-sounds-filter" class="bmd-label-floating">{{tr "Filter" /}}</label>
                                            <input id="input-settings-sounds-filter" class="form-control" type="text"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </x-content>
                </x-entry>
                <x-entry>
                    <x-tag>
                        <div class="container-tabname-translations">{{tr "Translations" /}} <div class="country flag-en"></div></div>
                    </x-tag>
                    <x-content>
                        <div class="settings-translations">
                            <div class="group_box">
                                <div class="header">{{tr "Available translations" /}}</div>
                                <div class="content">
                                    <div class="setting-list">
                                        <div class="list">
                                        </div>
                                        <div class="management">
                                            <div class="loading">Loading...</div>
                                            <div class="space"></div>
                                            <button class="btn btn-secondary button-add-repository">{{tr "Add repository" /}}</button>
                                        </div>
                                        <div class="restart-note">
                                            <p>
                                                {{tr "Attention: These settings get only affected after a restart or reload!" /}}
                                            </p>
                                            <button class="button-reload">{{tr "reload now" /}}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </x-content>
                </x-entry>
                <x-entry>
                    <x-tag class="tab-profiles">
                        {{tr "Profiles" /}}
                    </x-tag>
                    <x-content>
                        <div class="settings-profiles">
                            <div class="group_box">
                                <div class="header">{{tr "Available profiles" /}}</div>
                                <div class="content">
                                    <div class="profile-list">
                                        <div class="list">
                                        </div>
                                        <div class="management">
                                            <button class="btn btn-primary button-set-default">{{tr "Set selected as default" /}}</button>
                                            <button class="btn btn-danger button-delete">{{tr "Delete selected" /}}</button>
                                            <div class="space"></div>
                                            <button class="btn btn-success button-add-profile">{{tr "Create profile" /}}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="group_box">
                                <div class="header">{{tr "Profile settings" /}}</div>
                                <div class="content">
                                    <div class="profile-settings">
                                        <div class="general-settings">
                                            <div class="form-group">
                                                <label for="input-settings-profile-name" class="bmd-label-static">{{tr "Profile name:" /}}</label>
                                                <input id="input-settings-profile-name" class="form-control setting-name">
                                            </div>
                                            <div class="form-group">
                                                <label for="input-settings-profile-default-name" class="bmd-label-static">{{tr "Default nickname:" /}}</label>
                                                <input id="input-settings-profile-default-name" class="form-control setting-default-nickname">
                                            </div>
                                            <div class="form-group">
                                                <!-- TODO use random ids -->
                                                <label for="input-settings-profile-default-password" class="bmd-label-floating">{{tr "Default server password" /}}</label>
                                                <input type="password" id="input-settings-profile-default-password" class="form-control setting-default-password">
                                            </div>
                                            <div class="form-group select-container">
                                                <label for="input-settings-profile-identity-type" class="bmd-label-static">{{tr "Identify Type:" /}}</label>
                                                <select id="input-settings-profile-identity-type" class="form-control">
                                                    <option name="identity-type" value="teaforo">{{tr "Forum Account" /}}</option>
                                                    <option name="identity-type" value="teamspeak">{{tr "TeamSpeak" /}}</option>
                                                    <option name="identity-type" value="nickname">{{tr "Nickname (Debug purposes only!)" /}}</option> <!-- Only available on localhost for debug -->
                                                </select>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="identity-settings identity-settings-teamspeak">
                                            <!--
                                            <div class="import">
                                                {{tr "Please enter your exported TS3 Identity string bellow or select your exported Identity"/}}<br>
                                                <div style="width: 100%; display: flex; justify-content: stretch; flex-direction: row">
                                                    <input placeholder="Identity string" style="min-width: 60%; flex-shrink: 1; flex-grow: 2; margin: 5px;" class="identity_string">
                                                    <div style="max-width: 200px; flex-grow: 1; flex-shrink: 4; margin: 5px"><input style="display: flex; width: 100%;" class="identity_file" type="file"></div>
                                                </div>
                                            </div>
                                            -->
                                            <div class="identity-info" style="display: none">
                                                <div class="form-group unique-id">
                                                    <label>{{tr "UniqueID:" /}}</label>
                                                    <input class="form-control" type="text" value="xxjnc14LmvTk+Lyrm8OOeo4tOqw=" readonly/>
                                                </div>
                                                <div class="form-row level">
                                                    <div class="form-group container-input">
                                                        <label>{{tr "Level:" /}}</label>
                                                        <input class="form-control" type="text" value="39" readonly/>
                                                    </div>
                                                    <div class="form-group bmd-form-group">
                                                        <button class="btn btn-raised button-improve">{{tr "Improve" /}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="identity-undefined">
                                                <div>{{tr "You have'nt generated/imported an identity.<br>Generate a new one or import one." /}}</div>
                                            </div>
                                            <div class="manage">
                                                <button class="btn btn-primary button-generate">{{tr "Generate new" /}}</button>
                                                <div class="export-import">
                                                    <button class="btn btn-secondary button-import">{{tr "Import identity" /}}</button>
                                                    <button class="btn btn-primary button-export">{{tr "Export identity" /}}</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="identity-settings identity-settings-teaforo">
                                            <div class="connected">
                                                {{tr "You're using your forum account as verification"/}}
                                            </div>
                                            <div class="disconnected">
                                                <!-- TODO tr -->
                                                <!-- <a href="#" class="native-teaforo-login">here</a> -->
                                                <div class="error-forum-not-connected alert alert-warning fade show" role="alert">
                                                    You cant use your TeaSpeak forum account. You're not connected with your forum Account!<br>
                                                    Setup your connection <a class="forum-setup" href="#">here</a>.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="identity-settings identity-settings-nickname">
                                            <a>
                                                {{tr "This is just for debug and uses the name as unique identifier" /}}
                                            </a>
                                            <div class="form-group">
                                                <label for="input-settings-profile-name-name" class="bmd-label-floating">{{tr "Username" /}}</label>
                                                <input id="input-settings-profile-name-name" class="form-control setting-name">
                                            </div>
                                        </div>
                                        <div class="settings-profile-error alert alert-warning fade show" role="alert">
                                            <div class="message"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </x-content>
                </x-entry>
            </x-tab>
        </script>

        <script class="jsrender-template" id="tmpl_settings-sound_entry" type="text/html">
            <div class="entry">
                <div class="column sound-name"><div class="icon client-play button-playback"></div> {{>name}}</div>
                <div class="column sound-activated">
                    <div class="switch">
                        <label>
                            <input type="checkbox" {{if activated}}checked{{/if}}>
                        </label>
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_settings-teamspeak_import" type="text/html">
            <div class="container-teamspeak-import">
                <div class="error">{{tr "Failed to import identity (my little error)" /}}</div>
                <div class="load-data">
                    <div>{{tr "Import an identity from TeamSpeak or an exported identity" /}}</div>
                    <div class="buttons">
                        <button class="button-load-text">{{tr "Load from text" /}}</button>
                        <button class="button-load-file">{{tr "Load from file" /}}</button>
                        <input class="input-file" type="file">
                    </div>
                </div>
                <div class="success">
                    {{tr "Identity successfully loaded. Ready to import" /}}
                </div>
                <div class="footer">
                    <button class="button-import">{{tr "Import" /}}</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_settings-teamspeak_improve" type="text/html">
            <div class="container-teamspeak-improve">
                <div class="form-group identity-unique-id">
                    <label>{{tr "Identity:" /}}</label>
                    <input class="form-control" value="" readonly>
                </div>
                <div class="form-group identity-level">
                    <label>{{tr "Current level: " /}}</label>
                    <input class="form-control" value="loading" readonly>
                </div>
                <div class="form-group identity-target-level">
                    <div class="bmd-label-static">
                        <div class="help-tagged">{{tr "Target level: " /}}</div>
                        <div class="help-tip-container"> <!-- lets be absolute -->
                            <div class="help-tip tip-right tip-small">
                                <p>
                                    {{tr "A value of zero means unlimited. Improve until you abort"/}}
                                </p>
                            </div>
                        </div>
                    </div>
                    <input class="form-control" value="0" type="number" min="0" max="160">
                </div>
                <div class="form-group threads">
                    <div class="bmd-label-static">
                        <div class="help-tagged">{{tr "Threads: " /}}</div>
                        <div class="help-tip-container"> <!-- lets be absolute -->
                            <div class="help-tip tip-right tip-small">
                                <p>
                                    {{tr "The number of threads used to improve your identity<br>The optimal value is equal to the amount of kernal threads."/}}
                                </p>
                            </div>
                        </div>
                    </div>
                    <input class="form-control" value="2" type="number" min="1" max="32">
                </div>
                <hr>
                <div class="form-row">
                    <div class="form-group hash-rate">
                        <label>{{tr "Hashes/second:" /}}</label>
                        <input class="form-control" value="0" readonly>
                    </div>
                    <div class="form-group time-elapsed">
                        <label>{{tr "Elapsed time:" /}}</label>
                        <input class="form-control" value="00:00" readonly>
                    </div>
                </div>
                <div class="buttons">
                    <button class="btn btn-secondary btn-raised button-close">{{tr "Close" /}}</button>
                    <button class="btn btn-success btn-raised button-start-stop">{{tr "Start" /}}</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="settings-profile-list-entry" type="text/html">
            <div class="entry profile {{if id == 'default'}}default{{/if}}">
                <div class="name">{{>profile_name}}</div>
                <!-- <div class="button button-delete"><div class="icon client-delete"></div></div> -->
                <div title="{{tr 'Profile is valid' /}}" class="icon client-delete status status-invalid"></div>
                <div title="{{tr 'Profile is invalid' /}}" class="icon client-apply status status-valid"></div>
            </div>
        </script>

        <script class="jsrender-template" id="settings-translations-list-entry" type="text/html">
            {{if type == "repository" }}
                <div class="entry repository" repository="{{:id}}">
                    <div class="name">{{> name}}</div>
                    <div class="button button-delete"><div class="icon client-delete"></div></div>
                    <div class="button button-info"><div class="icon client-about"></div></div>
                </div>
            {{else type == "default" }}
                <div class="entry default {{if selected}}selected{{/if}}">
                    <div class="country flag-gb" title="{{*:i18n.country_name('gb')}}"></div>
                    <div class="name">{{tr "English (Default / Fallback)" /}}</div>
                </div>
            {{else}}
                <div class="entry translation {{if selected}}selected{{/if}}" parent-repository="{{:id}}">
                    <div class="country flag-{{:country_code}}" title="{{*:i18n.country_name(data.country_code || 'XX')}}"></div>
                    <div class="name">{{> name}}</div>
                    <div class="button button-info"><div class="icon client-about"></div></div>
                </div>
            {{/if}}
        </script>

        <script class="jsrender-template" id="settings-translations-list-entry-info" type="text/html">
            <div class="entry-info-container">
            {{if type == "repository" }}
                <!--
                        unique_id: string;
                        url: string;
                        name?: string;
                        contact?: string;
                        translations?: RepositoryTranslation[];
                        load_timestamp?: number;
                -->
                <div class="property property-name"><div class="key">Name:</div><div class="value">{{>name}}</div></div>
                <div class="property property-url"><div class="key">URL:</div><div class="value">{{>url}}</div></div>
                <div class="property property-contact"><div class="key">Contact:</div><div class="value">{{>contact}}</div></div>
                <div class="property property-translations"><div class="key">Translations:</div><div class="value">{{:translations.length}}</div></div>
            {{else}}
                <!--
                    name: string;
                    contributors: Contributor[];
                -->
                <div class="property property-name"><div class="key">Name:</div><div class="value">{{>name}}</div></div>
                <div class="property property-url"><div class="key">URL:</div><div class="value">{{>url}}</div></div>
                <div class="property property-repository">
                    <div class="key">Repository:</div>
                    <div class="value">
                        <p>{{>repository_name}}</p>
                        <div class="button button-info"><div class="icon client-about"></div></div>
                    </div>
                </div>
                {{if !contributors }}
                {{else contributors.length == 1}}
                    <div class="property property-contributor">
                        <div class="key">Contributor:</div>
                        <div class="value">
                            {{>contributors[0].name}}
                            {{if contributors[0].email}}
                            &nbsp&lt;{{>contributors[0].email}}&gt;
                            {{/if}}
                        </div>
                    </div>
                {{else}}
                    <div class="property property-contributors">
                        <div class="key">Contributors:</div>
                        <div class="value">
                            {{for contributors}}
                            <div class="contributor">
                                {{>name}}
                                {{if email}}
                                &nbsp&lt;{{>email}}&gt;
                                {{/if}}
                            </div>
                            {{/for}}
                        </div>
                    </div>
                {{/if}}
            {{/if}}
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_change_volume" type="text/html">
            <div style="display: flex; justify-content: center; vertical-align: center">
                <input type="range" min="0" max="{{>max_volume}}" value="100" class="volume_slider" style="width: 100%">
                <div class="display_volume" style="width: 60px; align-self: center; text-align: center">&plusmn;0 %</div>
            </div>
        </script>

        <!-- Permission overview -->
        <script class="jsrender-template" id="tmpl_server_permissions" type="text/html">
            <x-tab>
                <x-entry>
                    <x-tag>{{tr "Server Groups" /}}</x-tag>
                    <x-content class="tab-group-server">
                        <div class="layout-group-server">
                            <div class="list-group-server">
                                <div class="entries"></div>
                            </div>
                            <div class="horizontal-stretch">
                                <permission-editor class="group-server" />
                            </div>
                            <div class="list-group-server-clients"></div>
                        </div>
                    </x-content>
                </x-entry>
                <x-entry>
                    <x-tag>{{tr "Channel Groups" /}}</x-tag>
                    <x-content class="tab-group-channel">
                        <div class="layout-group-channel">
                            <div class="list-group-channel">
                                <div class="entries"></div>
                            </div>
                            <div class="horizontal-stretch">
                                <permission-editor class="group-channel" />
                            </div>
                        </div>
                    </x-content>
                </x-entry>
                <x-entry>
                    <x-tag>{{tr "Channel permissions" /}}</x-tag>
                    <x-content class="tab-channel">
                        <div class="layout-channel">
                            <div class="list-channel">
                                <div class="entries"></div>
                            </div>
                            <div class="horizontal-stretch">
                                <permission-editor class="channel" />
                            </div>
                        </div>
                    </x-content>
                </x-entry>
                <x-entry>
                    <x-tag>{{tr "Client permissions"/}}</x-tag>
                    <x-content class="tab-client">
                        <div class="layout-client">
                            <div class="client-info">
                                <div class="client-select form-group">
                                    <label class="bmd-label-floating">{{tr "Client unique ID"/}}</label>
                                    <input type="text" class="form-control client-select-uid">
                                    <div class="invalid-feedback">{{tr "Invalid unique id" /}}</div>
                                </div>
                                <hr>
                                <div class="client-info">
                                    <div class="form-group">
                                        <label>{{tr "Nickname:" /}}</label>
                                        <input class="form-control client-name">
                                    </div>

                                    <div class="form-group">
                                        <label>{{tr "Unique ID:" /}}</label>
                                        <input class="form-control client-uid">
                                    </div>

                                    <div class="form-group">
                                        <label>{{tr "Client database ID:" /}}</label>
                                        <input class="form-control client-dbid">
                                    </div>
                                </div>
                            </div>
                            <div class="horizontal-stretch">
                                <permission-editor class="client" />
                            </div>
                        </div>
                    </x-content>
                </x-entry>
                <x-entry>
                    <x-tag>{{tr "Client channel permissions" /}}</x-tag>
                    <x-content class="tab-client-channel">
                        <div class="layout-client-channel">
                            <div class="container-client-channel">
                                <div class="client-info">
                                    <div class="client-select form-group">
                                        <label class="bmd-label-floating">{{tr "Client unique ID"/}}</label>
                                        <input type="text" class="form-control client-select-uid">
                                        <div class="invalid-feedback">{{tr "Invalid unique id" /}}</div>
                                    </div>
                                    <hr>
                                    <div class="client-info">
                                        <div class="form-group">
                                            <label>{{tr "Nickname:" /}}</label>
                                            <input class="form-control client-name">
                                        </div>

                                        <div class="form-group">
                                            <label>{{tr "Unique ID:" /}}</label>
                                            <input class="form-control client-uid">
                                        </div>

                                        <div class="form-group">
                                            <label>{{tr "Client database ID:" /}}</label>
                                            <input class="form-control client-dbid">
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="list-channel">
                                    <div class="entries"></div>
                                </div>
                            </div>
                            <div class="horizontal-stretch">
                                <permission-editor class="client-channel" />
                            </div>
                        </div>
                    </x-content>
                </x-entry>
            </x-tab>
        </script>
        <script class="jsrender-template" id="tmpl_server_group_assignment" type="text/html">
           <div class="group-assignment-list">
               <a>{{tr "Changing groups of" /}} <b>{{>client_name}}</b></a>
               <div class="group-list">
                   {{for groups}}
                   <div class="group-entry">
                       <label class="checkbox {{if disabled}}disabled{{/if}}">
                           <input type="checkbox" group-id="{{>id}}" {{if assigned}}checked{{/if}}>
                           <span class="checkmark"></span>
                       </label>
                       <node key="icon_{{>id}}"></node>
                       <a>{{>name}} ({{>id}})</a>
                   </div>
                   {{/for}}
               </div>
           </div>
        </script>

        <script class="jsrender-template" id="tmpl_permission_entry" type="text/html">
            {{if type == "permission"}}
            <div class="entry permission">
                <div class="column-name">{{>permission_name}}</div>
                {{if permission_name.startsWith("b_") }}
                <div class="column-value">
                    <label class="checkbox">
                        <input type="checkbox">
                        <span class="checkmark"></span>
                    </label>
                </div>
                {{else}}
                <div class="column-value form-group">
                    <input class="form-control" type="number" min-value="-1" max-value="9999999999" />
                </div>
                {{/if}}
                <div class="column-skip">
                    <label class="checkbox">
                        <input type="checkbox">
                        <span class="checkmark"></span>
                    </label>
                </div>
                <div class="column-negate">
                    <label class="checkbox">
                        <input type="checkbox">
                        <span class="checkmark"></span>
                    </label>
                </div>
                <div class="column-granted form-group">
                    <input class="form-control" type="number" min-value="-1" max-value="9999999999" />
                </div>
            </div>
            {{else}}
            <div class="entry group tab-show-partitional">
                <div class="title"><div class="arrow down"></div><a>{{>name}}</a></div>
                <div class="group-entries">
                    {{for entries tmpl="tmpl_permission_entry"/}}
                </div>
            </div>
            {{/if}}
        </script>
        <script class="jsrender-template" id="tmpl_permission_editor" type="text/html">
            <div class="container-permissions">
                <div class="permission-explorer">
                    <div class="container-filter">
                        <div class="form-group container-input">
                            <label class="bmd-label-floating">{{tr "filter permissions" /}}</label>
                            <input type="text" class="form-control filter-input"/>
                            <!-- <small class="form-text text-muted">{{tr "Filter permissions by permission name" /}}</small> -->
                        </div>
                        <div class="form-group bmd-form-group">
                            <div class="switch">
                                <label>
                                    <input type="checkbox" value="" class="filter-granted">
                                    {{tr "Show granted permissions only" /}}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="container-mode container-mode-permissions">
                        <div class="container-permission-list">
                            <div class="entry header">
                                <div class="column-name">{{tr "Permission Name" /}}</div>
                                <div class="column-value">{{tr "Value" /}}</div>
                                <div class="column-skip">{{tr "Skip" /}}</div>
                                <div class="column-negate">{{tr "Negate" /}}</div>
                                <div class="column-granted">{{tr "Granted" /}}</div>
                            </div>

                            <div class="entries"> </div>
                        </div>
                    </div>
                    <div class="container-mode container-mode-no-permissions">
                        <div class="container-text">
                            <a>{{tr "You dont have the permission to view this permissions" /}}</a>
                        </div>
                    </div>
                    <div class="container-mode container-mode-unset"> </div>
                    <div class="container-footer">
                        <button class="btn btn-secondary btn-raised button-update"><div class="icon client-check_update"></div> {{tr "Update" /}}</button>
                    </div>
                </div>
            </div>
            <div class="container-error-permissions"></div>
        </script>

        <!-- General management templates -->
        <script class="jsrender-template" id="tmpl_ban_list" type="text/html">
            <div class="banlist">
                <div class="frame-container">
                    <div class="top-menu">
                        <div class="form-group bmd-form-group manage-buttons">
                            <button class="btn btn-success button-add">{{tr "Add" /}}</button>
                            <button class="btn btn-primary button-edit">{{tr "Edit" /}}</button>
                            <button class="btn btn-danger button-remove">{{tr "Remove" /}}</button>
                        </div>
                        <div class="search form-group">
                            <label class="bmd-label-floating">{{tr "filter" /}}</label>
                            <input type="text" class="form-control entry-filter">
                        </div>
                    </div>
                    <div class="entry-container">
                        <div class="ban-entry header">
                            <div class="column column-keys">{{tr "Name/IP/UID/HWID"/}}</div>
                            <div class="column column-reason">{{tr "Reason"/}}</div>
                            <div class="column column-creator">{{tr "Creator"/}}</div>
                            <div class="column column-time">{{tr "Created / Expires"/}}</div>
                        </div>
                        <div class="entries"> </div>
                    </div>
                    <div class="bottom-menu">
                        <div class="left">
                            <button class="btn btn-primary button-refresh btn-raised">{{tr "Reload"/}}</button>
                            <div class="switch">
                                <label>
                                    <input type="checkbox" class="filter-flag-force-own">
                                    {{tr "Show only own bans" /}}
                                </label>
                            </div>
                            <div class="switch">
                                <label>
                                    <input type="checkbox" class="filter-flag-highlight-own">
                                    {{tr "Highlight own bans" /}}
                                </label>
                            </div>
                        </div>
                        <div class="right">
                            <a class="entry-count-info"></a>
                            <button class="btn btn-secondary btn-raised button-close">{{tr "Close" /}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_ban_entry" type="text/html">
            <div class="ban-entry {{if server_id == 0}}ban-entry-global{{/if}} {{if flag_own}}ban-entry-own{{/if}}" ban-id={{>banid}} server-id={{>server_id}}>
                <div class="column column-keys">
                    {{if name }}<a class="property property-name">name={{>name}}</a>{{/if}}
                    {{if ip }} <a class="property property-ip">ip={{>ip}}</a>{{/if}}
                    {{if unique_id }} <a class="property property-unique-id">uid={{>unique_id}}</a>{{/if}}
                    {{if hardware_id }}<a class="property property-hardware-id">hwid={{>hardware_id}}</a>{{/if}}
                </div>
                <div class="column column-reason">{{>reason}}</div>
                <div class="column column-creator">{{>invoker_name}}</div>
                <div class="column column-time">
                    <div class="timestamp-created"><a>{{tr "Created:" /}}</a> {{fmt_date timestamp_created "DD.MM.YYYY HH:mm" /}}</div>
                    <div class="timestamp-expire"><a>{{tr "Expire:" /}}</a> {{if (!timestamp_expire || timestamp_expire.getTime() == 0) }}never{{else}}{{fmt_date timestamp_expire "DD.MM.YYYY HH:mm" /}}{{/if}}</div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_client_ban" type="text/html">
            <div class="align_column">
                <div class="align_column" style="margin: 5px">
                    <a>{{tr "Name:" /}}</a>
                    <input value="{{>client_name}}" readonly>
                </div>
                <div class="align_column" style="margin: 5px">
                    <a>{{tr "Reason:" /}}</a>
                    <textarea style="height: 32px; resize: vertical; max-height: 150px; min-height: 32px" maxlength="512" class="ban_reason"></textarea>
                </div>
                <div class="align_row" style="margin: 5px; justify-content: space-between">
                    <a>{{tr "Duration:" /}}</a>
                    <div class="align_row">
                        <input type="number" value="1" class="ban_duration" style="margin-right: 7px" min="1">
                        <select class="ban_duration_type">
                            <option value="sec">{{tr "seconds"/}}</option>
                            <option value="min">{{tr "minutes"/}}</option>
                            <option value="hours">{{tr "hours"/}}</option>
                            <option value="days">{{tr "days"/}}</option>
                            <option value="perm">{{tr "permanent"/}}</option>
                        </select>
                    </div>
                </div>
                <div class="group_box container-ban-type">
                    <div class="header">{{tr "Ban client by"/}}</div>
                    <div class="content ban-types">
                        <div>
                            <input type="checkbox" class="ban-type-nickname">
                            <a>{{tr "Nickname"/}}</a>
                            <div class="help-tip tip-right tip-small" checked>
                                <p>
                                    {{tr "Bans the client by his current nickname.<br>" +
                                    "The currently nickname cant be used until the ban expired"/}}
                                </p>
                            </div>
                        </div>
                        <div>
                            <input type="checkbox" class="ban-type-hardware-id" checked>
                            <a>{{tr "Hardware ID" /}}</a>
                            <div class="help-tip tip-right tip-small">
                                <p>
                                    {{tr "Bans the client by his hardware id.<br>" +
                                    "The hardware id has different meanings, depends on the users agent<br>" +
                                    "TeaClient: The hardware id will be equal to the mac address<br>" +
                                    "TeaWeb: The TeaSpeak web client hasn't a hardware id, it will be random<br>" +
                                    "TeamSpeak 3 client: The hardware id will be a result of some hashes from hardware specific properties" /}}
                                </p>
                            </div>
                        </div>
                        <div>
                            <input type="checkbox" class="ban-type-ip" checked>
                            <a>{{tr "IP Address" /}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </script>

        <!--  `hwid` VARCHAR(" CLIENT_UID_LENGTH "), `uid` VARCHAR(" CLIENT_UID_LENGTH "), `name` VARCHAR(" CLIENT_NAME_LENGTH "), `ip` VARCHAR(128) -->
        <script class="jsrender-template" id="tmpl_ban_create" type="text/html">
            <div class="bancreate">
                <div class="frame-container">
                    <div class="form-group">
                        <label class="bmd-label-static">{{tr "IP:" /}}</label>
                        <input class="form-control input-ip" type="text" maxlength="128">
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="bmd-label-static">{{tr "Name:" /}}</label>
                            <input class="form-control input-name" type="text" maxlength="128">
                        </div>
                        <div class="form-group">
                            <label class="bmd-label-static">{{tr "Interpret IP/Name as:" /}}</label>
                            <select class="form-control input-name-type">
                                <option value="wildcard-4">{{tr "Wildcard IPv4" /}}</option>
                                <option value="wildcard-6">{{tr "Wildcard IPv6" /}}</option>
                                <option value="fixed" selected>{{tr "Fixed string" /}}</option>
                                <option value="regex">{{tr "Regular Expression" /}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="bmd-label-static">{{tr "Unique ID:" /}}</label>
                        <div><input class="form-control input-uid" type="text" maxlength="64"></div>
                    </div>
                    <div class="form-group">
                        <label class="bmd-label-static">{{tr "Hardware ID:" /}}</label>
                        <input class="form-control input-hwid" type="text" max="64">
                    </div>
                    <div class="form-group container-reason">
                        <label class="bmd-label-static">{{tr "Reason" /}}</label>
                        <textarea class="form-control input-reason"></textarea>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label>{{tr "Duration:" /}}</label>
                            <input type="number" value="1" class="form-control input-time" style="margin-right: 7px" min="1">
                        </div>
                        <div class="form-group input-time-unit">
                            <select class="form-control input-time-unit">
                                <option value="sec">{{tr "seconds"/}}</option>
                                <option value="min">{{tr "minutes"/}}</option>
                                <option value="hours">{{tr "hours"/}}</option>
                                <option value="days">{{tr "days"/}}</option>
                                <option value="perm">{{tr "permanent"/}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="switch">
                            <label>
                                <input type="checkbox" class="input-global">
                                {{tr "Use this ban as a global ban" /}}
                                <div class="help-tip tip-center tip-small">
                                    <p>
                                        {{tr "Global bans are bans which apply instance wide.<br>" +
                                        "This means that (if this rule apply to a victim) cant join <b>any</b> virtual server!<br>" +
                                        "Global bans are by default shown to every server admin group,<br>" +
                                        "but could only be created with query rights"/}}
                                    </p>
                                </div>
                            </label>
                        </div>
                        <div class="bmd-form-group">
                            <button class="btn btn-danger button-close">{{tr "Cancel"/}}</button>
                            <button class="btn btn-success btn-raised button-success">{{tr "OK"/}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </script>

        <!-- Music interface -->
        <script class="jsrender-template" id="tmpl_music_frame" type="text/html">
            <!-- First we want to define some variables if not defined yet. -->
            {{if !thumbnail}}
                {{*
                    data.thumbnail = "img/music/no_thumbnail.svg";
                }}
            {{/if}}
            {{*
                if(!data.song_max_width) data.song_max_width = 300;

                let width = calculate_width(data.song_name);
                if(width > data.song_max_width)
                    data.song_use_scroller = true;
            }}

            <div class="music-wrapper">
                <div class="container">
                    <div class="left">
                        <div class="static-card">
                            <img src="{{:thumbnail}}" alt="Thumbnail" class="thumbnail">
                        </div>
                    </div>
                    <div class="right">
                        <div class="controls hover">
                            <label class="btn-forward"><span></span></label>
                            <label class="btn-rewind"><span></span></label>
                            <label class="btn-settings"><span></span></label>
                        </div>
                        <div class="flip-card">
                            <img src="{{:thumbnail}}" alt="Thumbnail" class="thumbnail">
                        </div>
                    </div>
                </div>
                <div class="controls-overlay">
                    <div class="timer">
                        <div class="button-container">
                            <div class="container-play-pause">
                                <div class="button button_play">
                                    <svg x="0px" y="0px" viewBox="0 0 4.5 6.9" style="enable-background:new 0 0 4.5 6.9;">
                                        <defs>
                                            <filter id="shadow_play" title="Start replaying">
                                                <feDropShadow dx="4" dy="8" stdDeviation="4"/>
                                            </filter>
                                        </defs>
                                        <polyline style="filter:url(#shadow_play);" class="button" points="0.6,0.3 3.9,3.4 0.6,6.6 "></polyline>
                                    </svg>
                                </div>
                                <div class="button button_pause" title="Pause the current song">
                                    <svg x="0px" y="0px" viewBox="0 0 4.5 6.9" style="enable-background:new 0 0 4.5 6.9;">
                                        <defs>
                                            <filter id="shadow_pause">
                                                <feDropShadow dx="4" dy="8" stdDeviation="4"/>
                                            </filter>
                                        </defs>
                                        <g style="filter:url(#shadow_pause);">
                                            <line x1="0.4" y1="0.1" x2="0.4" y2="6.8"></line>
                                            <line x1="4.1" y1="0.1" x2="4.1" y2="6.8"></line>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div>
                                <div class="button button_stop" title="Stop the music bot">
                                    <svg x="0px" y="0px" viewBox="0 0 4.5 6.9" style="enable-background:new 0 0 4.5 6.9;">
                                        <defs>
                                            <filter id="shadow_stop">
                                                <feDropShadow dx="4" dy="8" stdDeviation="4"/>
                                            </filter>
                                        </defs>
                                        <g style="filter:url(#shadow_stop);">
                                            <rect x="0.25" y="1.45" width="4" height="4" fill="black"></rect>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="timeline">
                            <div class="buffered"></div>
                            <div class="played"></div>
                            <div class="slider"></div>
                        </div>
                        <div class="time player_time">--:--</div>
                    </div>
                    <div class="song">
                        {{if song_use_scroller}}
                            <div class="scroll-left">
                                <p class="name">{{>song_name}}</p>
                            </div>
                        {{else}}
                            <div class="name" style="">{{>song_name}}</div>
                        {{/if}}
                    </div>
                </div>
            </div>
        </script>
        <script class="jsrender-template" id="tmpl_music_frame_empty" type="text/html">
            <div class="music-wrapper empty">
                <img src="img/music/empty_disk.svg">
                <a>{{tr "Not playing any music"/}}</a>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_selected_client" type="text/html">
            <table class="select_info_table">
                <tr>
                    <td>{{tr "Name:" /}}</td>
                    <td style="display: flex; flex-direction: row">
                        <div style="margin-right: 3px" class="country flag-{{*:(data.property_client_country || 'xx').toLowerCase()}}" title="{{*:i18n.country_name(data.property_client_country || 'XX')}}"></div>
                        <node key="client_name"/>
                    </td>
                </tr>
                {{if property_client_description.length > 0}}
                <tr>
                    <td>{{tr "Description:"/}}</td>
                    <td>{{>property_client_description}}</td>
                </tr>
                {{/if}}
                {{if !client_is_query}}
                 <tr>
                    <td>{{tr "Version:"/}}</td>
                    <td>
                        <a title="{{>property_client_version}}">{{*: data.property_client_version.split(" ")[0]; }}</a>
                        {{if client_is_web && false}} <!-- we cant show any browser info because every browser claims to be any browser as well -->
                        <div class="icon client-message_info button-browser-info" title="{{tr 'Browser info' /}}"></div>
                        {{/if}}
                        on
                        <a>{{>property_client_platform}}</a>
                    </td>
                </tr>
                {{/if}}
                <tr>
                    <td>{{tr "Online since:"/}}</td>
                    <td class="update_onlinetime">{{:client_onlinetime}}</td>
                </tr>
                {{if !client_is_query}}
                <tr>
                    <td>{{tr "Volume:"/}}</td>
                    <td>{{:sound_volume}}%</td>
                </tr>
                {{/if}}

                {{if client_teaforum_id > 0}}
                <tr>
                    <td>{{tr "TeaSpeak Account:" /}}</td>
                    <td><a href="//forum.teaspeak.de/index.php?members/{{:property_client_teaforum_id}}" target="_blank">{{>property_client_teaforum_name}}</a></td>
                </tr>
                {{/if}}
            </table>
            <!-- Server groups -->
            <div style="display: flex; flex-direction: column;">
                <div style="display:flex;margin-top:5px;align-items:center">
                     <div class="icon client-permission_server_groups"></div>
                     <div style="margin-left:3px;font-weight:bold">{{tr "Server groups:"/}}</div>
                </div>

                {{for group_server}}
                    <div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
                        <node key="group_{{:group_id}}_icon"/>
                        <div style="margin-left: 3px">{{>group_name}}</div>
                    </div>
                {{/for}}
            </div>

            <!-- Channel group -->
            <div style="display: flex; flex-direction: column; margin-bottom: 20px">
                <div style="display:flex;margin-top:10px;align-items:center">
                     <div class="icon client-permission_channel"></div>
                     <div style="margin-left:3px;font-weight:bold">{{tr "Channel group:"/}}</div>
                </div>

                <div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
                    <node key="group_{{:group_channel}}_icon"/>
                    <div style="margin-left: 3px">{{*: data["group_" + data.group_channel + "_name"]}}</div>
                </div>
            </div>

            <!-- Costume tags/icons -->
            <!-- Client is away -->
            {{if property_client_away}}
            <div style="display: inline-flex">
                <div class="icon_x32 client-away" style="margin-right: 5px"></div>
                <a style="align-self: center">{{tr "Away"/}}
                    {{if property_client_away_message && property_client_away_message.length > 0}}
                        ({{>property_client_away_message}})
                    {{/if}}
                </a>
            </div>
            {{/if}}

            <!-- Speakers/Headphones disabled -->
            {{if !property_client_output_hardware}}
                <div style="display: inline-flex">
                    <div class="icon_x32 client-hardware_output_muted" style="margin-right: 5px"></div>
                    <a style="align-self: center">{{tr "Speakers/Headphones disabled"/}}</a>
                </div>
            {{/if}}

             <!-- Microphone disabled -->
            {{if !property_client_input_hardware}}
                <div style="display: inline-flex">
                    <div class="icon_x32 client-hardware_input_muted" style="margin-right: 5px"></div>
                    <a style="align-self: center">{{tr "Microphone disabled"/}}</a>
                </div>
            {{/if}}

             <!-- Speakers/Headphones Muted -->
            {{if property_client_output_muted}}
                <div style="display: inline-flex">
                    <div class="icon_x32 client-output_muted" style="margin-right: 5px"></div>
                    <a style="align-self: center">{{tr "Speakers/Headphones Muted"/}}</a>
                </div>
            {{/if}}

             <!-- Microphone Muted -->
            {{if property_client_input_muted}}
                <div style="display: inline-flex">
                    <div class="icon_x32 client-input_muted" style="margin-right: 5px"></div>
                    <a style="align-self: center">{{tr "Microphone Muted"/}}</a>
                </div>
            {{/if}}

            {{if property_client_flag_avatar && property_client_flag_avatar.length > 0}}
                <div style="margin-top: 10px;" class="client-avatar">
                    <node key="client_avatar"/>
                </div>
            {{/if}}
        </script>
        <script class="jsrender-template" id="tmpl_selected_music" type="text/html">
            <table class="select_info_table">
                <tr>
                    <td>{{tr "Name:"/}}</td>
                    <td><node key="client_name"/></td>
                </tr>
                {{if property_client_description.length > 0}}
                <tr>
                    <td>{{tr "Description:"/}}</td>
                    <td>{{>property_client_description}}</td>
                </tr>
                {{/if}}
                {{if property_client_uptime_mode == 0}}
                <tr>
                    <td>{{tr "Livetime:"/}}</td>
                    <td class="update_onlinetime">{{:client_onlinetime}}</td>
                </tr>
                {{else}}
                <tr>
                    <td>{{tr "Online since" /}}</td>
                    <td>{{tr "Server start" /}}</td>
                </tr>
                {{/if}}
                <!-- player_volume -->
                <tr>
                    <td>{{tr "Remote Volume:"/}}</td>
                    <td class="property-volume-remote">{{*: Math.floor(data.property_player_volume * 100) }}%</td>
                </tr>
                <tr>
                    <td>{{tr "Local Volume:"/}}</td>
                    <td class="property-volume-local">{{>sound_volume}}%</td>
                </tr>
                {{if song_url}}
                <tr>
                    <td>{{tr "Currently replaying:"/}}</td>
                    <td><node key="song_url"></node></td>
                </tr>
                {{/if}}
                <!-- TODO: Created by -->
            </table>
            <!-- Server groups -->
            <div style="display: flex; flex-direction: column;">
                <div style="display:flex;margin-top:5px;align-items:center">
                    <div class="icon client-permission_server_groups"></div>
                    <div style="margin-left:3px;font-weight:bold">{{tr "Server groups:"/}}</div>
                </div>

                {{for group_server}}
                <div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
                    <node key="group_{{:group_id}}_icon"/>
                    <div style="margin-left: 3px">{{:group_name}}</div>
                </div>
                {{/for}}
            </div>

            <!-- Channel group -->
            <div style="display: flex; flex-direction: column; margin-bottom: 20px">
                <div style="display:flex;margin-top:10px;align-items:center">
                    <div class="icon client-permission_channel"></div>
                    <div style="margin-left:3px;font-weight:bold">{{tr "Channel group:"/}}</div>
                </div>

                <div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
                    <node key="group_{{:group_channel}}_icon"/>
                    <div style="margin-left: 3px">{{*: data["group_" + data.group_channel + "_name"]}}</div>
                </div>
            </div>

            <div>
                <node key="music_player"/>
            </div>
        </script>
        <script class="jsrender-template" id="tmpl_selected_hostbanner" type="text/html">
            <div class="hostbanner" x-divider-require-resize="1">
                <img class="meta-image hostbanner-image" src="{{:hostbanner_gfx_url}}"/>
                <a class="image-container"
                   {{if property_virtualserver_hostbanner_url}}
                   href="{{:property_virtualserver_hostbanner_url}}"
                   {{/if}}
                   target="_blank">
                    <div
                        style="background: center no-repeat url({{:hostbanner_gfx_url}})"
                        alt="{{tr 'Host banner'/}}"
                        class="hostbanner-image hostbanner-mode-{{:property_virtualserver_hostbanner_mode}}"
                    ></div>
                </a>
            </div>
        </script>
        <script class="jsrender-template" id="tmpl_selected_server" type="text/html">
            <div class="select_server">
                <div class="container">
                    <!--
                        virtualserver_hostbanner_url: string = "";
                        virtualserver_hostbanner_gfx_url: string = "";
                        virtualserver_hostbanner_gfx_interval: number = 0;
                        virtualserver_hostbanner_mode: number = 0;
                    -->

                    <table class="select_info_table">
                        <tr>
                            <td>{{tr "Name:" /}}</td>
                            <td><node key="server_name"/></td>
                        </tr>
                        <tr>
                            <td>{{tr "Address:" /}}</td>
                            <td>{{>server_address}}</td>
                        </tr>
                        <!--
                        <tr>
                            <td>{{tr "Type:"/}}</td>
                            <td>TeaSpeak</td>
                        </tr>
                        -->
                        <tr>
                            <td>{{tr "Version:"/}}</td>
                            <td><a title="{{>property_virtualserver_version}}">{{*: data.property_virtualserver_version.split(" ")[0]; }}</a> on {{>property_virtualserver_platform}}</td>
                        </tr>
                        <tr>
                            <td>{{tr "Uptime:"/}}</td>
                            <td class="update_onlinetime">{{:server_onlinetime}}</td>
                        </tr>
                        <tr>
                            <td>{{tr "Current Channels:"/}}</td>
                            <td>{{:property_virtualserver_channelsonline}}</td>
                        </tr>
                        <tr>
                            <td>{{tr "Current Clients:"/}}</td>
                            <td>
                                {{:property_virtualserver_clientsonline}}/{{:property_virtualserver_maxclients}}
                                {{if property_virtualserver_reserved_slots > 0}}
                                (<div class="reserved-slots">-{{:property_virtualserver_reserved_slots}} {{tr "Slots reserved" /}}</div>)
                                {{/if}}
                                {{if hidden_clients > 0}}
                                ({{:hidden_clients}} {{tr "clients hidden" /}})
                                {{/if}}
                            </td>
                        </tr>
                        <tr>
                            <td>{{tr "Current Queries:"/}}</td>
                            <td>{{:property_virtualserver_queryclientsonline}}</td>
                        </tr>
                    </table>
                </div>

                <button class="button-update btn btn-success">{{tr "Update info"/}}</button>
            </div>
        </script>
        <script class="jsrender-template" id="tmpl_selected_channel" type="text/html">
            <table class="select_info_table">
                <tr>
                    <td>{{tr "Name:" /}}</td>
                    <td><node key="channel_name"/></td>
                </tr>
                {{if property_channel_topic}}
                <tr>
                    <td>{{tr "Topic:"/}}</td>
                    <td>{{>property_channel_topic}}</td>
                </tr>
                {{/if}}
                <tr>
                    <td>{{tr "Codec:"/}}</td>
                    <td>{{>property_channel_codec}}</td>
                </tr>
                <tr>
                    <td>{{tr "Codec Quality:"/}}</td>
                    <td>{{>property_channel_codec_quality}}</td>
                </tr>
                <tr>
                    <td>{{tr "Type:"/}}</td>
                    <td>{{>channel_type}}</td>
                </tr>
                <tr>
                    <td>{{tr "Current clients:"/}}</td>
                    <td>
                        {{>channel_clients}} /
                        {{if property_channel_maxclients == -1}}
                            {{tr "Unlimited"/}}
                        {{else}}
                            {{>property_channel_maxclients}}
                        {{/if}}
                    </td>
                </tr>
                <tr>
                    <td>{{tr "Subscription Status:"/}}</td>
                    <td>
                        {{if channel_subscribed}}
                            {{tr "Subscribed"/}}
                        {{else}}
                            {{tr "Unsubscribed"/}}
                        {{/if}}
                    </td>
                </tr>
                <tr>
                    <td>{{tr "Voice Data Encryption:" /}}</td>
                    <td>
                        {{if property_channel_codec_is_unencrypted}}
                            {{tr "Unencrypted"/}}
                        {{else}}
                            {{tr "Encrypted"/}}
                        {{/if}}

                        {{if server_encryption == 2}}
                            {{tr "(Overridden by the server with Encrypted)" /}}
                        {{/if}}
                        {{if server_encryption == 1}}
                            {{tr "(Overridden by the server with Unencrypted)"/}}
                        {{/if}}
                    </td>
                </tr>
            </table>
            <div style="margin-top: 10px; flex-shrink: 1; flex-direction: column; display: flex; flex-grow: 1;">
                <b style="margin-bottom: 2px">{{tr "Description"/}}</b>
                <node key="bbcode_channel_description"></node>
            </div>
        </script>
        <script class="jsrender-template" id="tmpl_poke_popup" type="text/html">
            <div class="container-poke">
                <div class="container-information">
                    <a>{{tr "You have been poked by"/}} </a><node key="invoker"></node><a>:</a>
                </div>
                <div class="container-message">
                    <a class="message">{{>message}}</a>
                </div>
                <button class="button-close">{{tr "Close" /}}</button>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_query_create" type="text/html">
            <div class="query-create">
                <a>{{tr "Set the login name for your Server Query account." /}}</a>
                <a>{{tr "You'll receive your password within the next step." /}}</a>
                <div class="form-group row-name">
                    <label>Name:</label>
                    <input type="text" maxlength="64" minlength="3" class="form-control input-name">
                </div>
                <div class="buttons">
                    <button class="btn btn-danger button-close">{{tr "Close" /}}</button>
                    <button class="btn btn-success btn-raised button-create">{{tr "Create" /}}</button>
                </div>
            </div>
        </script>
        <script class="jsrender-template" id="tmpl_query_created" type="text/html">
            <div class="query-created">
                <a>{{tr "Your server query credentials:" /}}</a>
                <div class="form-row">
                    <div class="form-group">
                        <label>{{tr "Name:" /}}</label>
                        <input class="form-control query_name" type="text" maxlength="64" minlength="3" value="{{>username}}">
                    </div>
                    <div class="btn_copy_name icon_x32 client-copy" title="{{tr 'Copy username' /}}"></div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>{{tr "Password:" /}}</label>
                        <input class="form-control query_password" type="text" maxlength="64" minlength="3" value="{{>password}}">
                    </div>
                    <div class="btn_copy_password icon_x32 client-copy" title="{{tr 'Copy username' /}}"></div>
                </div>
                <div class="buttons">
                    <button class="btn btn-primary button-close">{{tr "Close" /}}</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_query_manager" type="text/html">
            <div class="query-management">
                <div class="header">
                    <div class="form-group bmd-form-group buttons">
                        <button class="btn btn-success button button-query-create">{{tr "Create account" /}}</button>
                        <button class="btn btn-danger button button-query-delete">{{tr "Delete account" /}}</button>
                        <button class="btn btn-primary button button-query-rename">{{tr "Rename account" /}}</button>
                        <button class="btn btn-primary button button-query-change-password">{{tr "Change password" /}}</button>
                    </div>
                    <div class="form-group search">
                        <label class="bmd-label-floating">{{tr "search" /}}</label>
                        <input class="form-control input input-search" type="text">
                    </div>
                </div>
                <div class="query-list">
                    <div class="query-list-header">
                        <div class="column column-username">{{tr "Username" /}}</div>
                        <div class="column column-unique-id">{{tr "Unique ID" /}}</div>
                        <div class="column column-bound-server">{{tr "Bounded Server" /}}</div>
                    </div>
                    <div class="query-list-entries-container">
                        <div class="query-list-entries">
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <div class="info">
                        <a>{{tr "loading..." /}}</a>
                    </div>
                    <div class="buttons">
                        <button class="btn btn-primary button-refresh">{{tr "Refresh" /}}</button>
                    </div>
                </div>
            </div>
        </script>


        <script class="jsrender-template" id="tmpl_query_manager-list_entry" type="text/html">
            <div class="entry">
                <div class="column column-username">{{>username}}</div>
                <div class="column column-unique-id">{{>unique_id}}</div>
                <div class="column column-bound-server">{{>bounded_server}}</div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_playlist_list" type="text/html">
            <div class="playlist-management">
                <div class="header">
                    <div class="form-group bmd-form-group buttons">
                        <button class="btn btn-success button button-playlist-create">{{tr "Create playlist" /}}</button>
                        <button class="btn btn-danger button button-playlist-delete">{{tr "Delete playlist" /}}</button>
                        <button class="btn btn-primary button-playlist-edit">{{tr "Edit playlist" /}}</button>
                    </div>
                    <div class="form-group search">
                        <label class="bmd-label-floating">{{tr "search" /}}</label>
                        <input class="form-control input input-search" type="text">
                    </div>
                </div>
                <div class="playlist-list">
                    <div class="playlist-list-header">
                        <div class="column column-id">{{tr "ID" /}}</div>
                        <div class="column column-title">{{tr "Title" /}}</div>
                        <div class="column column-creator">{{tr "Creator" /}}</div>
                        <div class="column column-type">{{tr "Type" /}}</div>
                        <div class="column column-used">{{tr "Used" /}}</div>
                    </div>
                    <div class="playlist-list-entries-container">
                        <div class="playlist-list-entries">
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <div class="info">
                        <a>{{tr "loading..." /}}</a>
                    </div>
                    <div class="buttons">
                        <div class="form-group highlight-own">
                            <div class="switch">
                                <label>
                                    <input type="checkbox" class="button-highlight-own">
                                    {{tr "Highlight own playlists" /}}
                                </label>
                            </div>
                        </div>
                        <div class="form-group bmd-form-group">
                            <button class="btn btn-secondary btn-raised button-refresh">{{tr "Refresh" /}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_playlist_list-list_entry" type="text/html">
            <div class="entry" playlist-owner-dbid="{{>playlist_owner_dbid}}">
                <div class="column column-id">{{>playlist_id}}</div>
                <div class="column column-title">{{>playlist_title}}</div>
                <div class="column column-creator">{{>playlist_owner_name}}</div>
                <div class="column column-type">
                    {{if playlist_type == 0}}
                        bot bound
                    {{else playlist_type == 1}}
                        global
                    {{else}}
                        {{>playlist_type}}
                    {{/if}}
                </div>
                <div class="column column-used">
                    {{if playlist_bot_id > 0}}
                    <div title="{{tr 'Playlist is in use by bot ' /}}{{>playlist_bot_id}}" class="icon client-apply"></div>
                    {{else}}
                    <div title="{{tr 'Playlist isnt use' /}}" class="icon client-delete"></div>
                    {{/if}}
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_playlist_edit" type="text/html">
            <div class="playlist-edit">
                <div class="general-properties">
                    <div class="form-group property-owner">
                        <label>{{tr "Playlist owner:" /}}</label>
                        <input type="text" class="form-control value" readonly>
                    </div>
                    <div class="form-group property-title">
                        <label>{{tr "Title:" /}}</label>
                        <input type="text" class="form-control value">
                    </div>
                    <div class="form-group property-description">
                        <label>{{tr "Description:" /}}</label>
                        <textarea class="form-control value"></textarea>
                    </div>
                    <div class="form-group property-type">
                        <label>{{tr "Type:" /}}</label>
                        <select class="form-control">
                            <option value="0">{{tr "Bot bound" /}}</option>
                            <option value="1">{{tr "Global" /}}</option>
                        </select>
                    </div>
                </div>
                <x-tab>
                    <x-entry>
                        <x-tag>{{tr "Songs" /}}</x-tag>
                        <x-content>
                            <div class="container-songs">
                                <div class="song-list">
                                    <div class="song-list-header">
                                        <div class="column column-id">{{tr "ID" /}}</div>
                                        <div class="column column-url">{{tr "Url" /}}</div>
                                        <div class="column column-loaded">{{tr "loaded" /}}</div>
                                        <div class="column column-buttons"></div>
                                    </div>
                                    <div class="song-list-entries-container">
                                        <div class="song-list-entries">
                                        </div>
                                    </div>
                                </div>
                                <div class="footer">
                                    <div class="buttons">
                                        <button class="btn btn-success button-song-add">{{tr "Add song" /}}</button>
                                        <button class="btn btn-secondary button-refresh">{{tr "Refresh" /}}</button>
                                    </div>
                                    <div class="info-message"></div>
                                </div>
                            </div>
                        </x-content>
                    </x-entry>
                    <x-entry>
                        <x-tag>{{tr "Playback settings"/}}</x-tag>
                        <x-content>
                            <div class="playback-properties">
                                <div class="form-group property-replay-mode">
                                    <label>{{tr "Replay mode" /}}</label>
                                    <select class="form-control value">
                                        <option value="0">{{tr "Normal"/}}</option>
                                        <option value="1">{{tr "Loop list"/}}</option>
                                        <option value="2">{{tr "Loop single entry"/}}</option>
                                        <option value="3">{{tr "Shuffle"/}}</option>
                                    </select>
                                </div>
                                <div class="form-group property-flag-delete-played">
                                    <div class="switch">
                                        <label>
                                            <input type="checkbox">
                                            {{tr "Delete played song:" /}}
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group property-current-song">
                                    <label>{{tr "Current replaying song:" /}}</label>
                                    <input type="text" class="form-control value"/>
                                </div>
                                <div class="form-group property-flag-finished">
                                    <div class="switch">
                                        <label>
                                            {{tr "Playlist finished status" /}}
                                            <input type="checkbox">
                                            <!-- TODO add info text here -->
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </x-content>
                    </x-entry>
                    <x-entry>
                        <x-tag>{{tr "Permissions" /}}</x-tag>
                        <x-content>
                            <div class="container-permissions">
                                <div class="group_box">
                                    <div class="header">{{tr "Access/modify powers" /}}</div>
                                    <div class="content permissions-list">
                                        <div class="form-group permission" permission="i_playlist_needed_view_power">
                                            <label>{{tr "View power" /}}</label>

                                    <input type="number" min="0" value="0" class="form-control value">
                                        </div>
                                        <div class="form-group permission" permission="i_playlist_needed_modify_power">
                                            <label>{{tr "Modify" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value">
                                        </div>
                                        <div class="form-group permission" permission="i_playlist_needed_permission_modify_power">
                                            <label>{{tr "Permission modify" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value">
                                        </div>
                                        <div class="form-group permission" permission="i_playlist_needed_delete_power">
                                            <label>{{tr "Delete" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value">
                                        </div>
                                    </div>
                                </div>
                                <div class="group_box">
                                    <div class="header">{{tr "Song management powers" /}}</div>
                                    <div class="content permissions-list">
                                        <div class="form-group permission" permission="i_playlist_song_needed_add_power">
                                            <label>{{tr "Song add" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value">
                                        </div>
                                        <div class="form-group permission" permission="i_playlist_song_needed_move_power">
                                            <label>{{tr "Song reorder" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value">
                                        </div>
                                        <div class="form-group permission" permission="i_playlist_song_needed_remove_power">
                                            <label>{{tr "Song delete" /}}</label>
                                            <input type="number" min="0" value="0" class="form-control value">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="container-no-permissions">
                                <div class="text">You dont have permissions to see playlist permissions!</div>
                            </div>
                        </x-content>
                    </x-entry>
                </x-tab>
                <div class="buttons">
                    <button class="btn btn-success button-save">{{tr "Save" /}}</button>
                    <button class="btn btn-secondary button-close">{{tr "Close" /}}</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_playlist_edit-song_entry" type="text/html">
            <div class="entry">
                <div class="column column-id">{{>song_id}}</div>
                <div class="column column-url">{{>song_url}}</div>
                <div class="column column-loaded">{{>song_loaded}}</div>
                <div class="column column-buttons">
                    <div class="button button-delete"><div class="icon client-delete"></div></div>
                    <div class="button button-info"><div class="icon client-about"></div></div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_playlist_edit-song_info" type="text/html">
            <div class="container-song-info">
                <div class="properties">
                    <div class="property property-song-id">
                        <div class="key">{{tr "Song ID:" /}}</div>
                        <div class="value">{{>song_id}}</div>
                    </div>
                    <div class="property property-song-order">
                        <div class="key">{{tr "Song order:" /}}</div>
                        <div class="value">{{>song_previous_song_id}}</div>
                    </div>
                    <div class="property property-song-url">
                        <div class="key">{{tr "URL:" /}}</div>
                        <div class="value">{{>song_url}}</div>
                    </div>
                    <div class="property property-song-url-loader">
                        <div class="key">{{tr "URL resolver:"/}}</div>
                        <div class="value">{{if song_url_loader}}{{>song_url_loader}}{{else}}{{tr "unset" /}}{{/if}}</div>
                    </div>
                    <div class="property property-song-loaded">
                        <div class="key">{{tr "Song loaded:" /}}</div>
                        <div class="value">{{if song_loaded}}{{tr "yes" /}}{{else}}{{tr "no" /}}{{/if}}</div>
                    </div>
                    {{if song_loaded}}
                        {{if metadata && false}}
                            {{tr "Display metdata here!" /}}
                        {{else}}
                            <div class="property property-metadata-raw">
                                <div class="line">
                                    <div class="key">{{tr "Metadata:" /}}</div>
                                    <div class="value"><button class="toggle-metadata">show</button></div>
                                </div>
                                <textarea>{{>song_metadata}}</textarea>
                            </div>
                        {{/if}}
                    {{/if}}
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_playlist_edit-song_add" type="text/html">
            <div class="container-song-add">
                <div class="properties">
                    <div class="property property-url">
                        <div class="key">{{tr "URL:" /}}</div>
                        <input class="value" />
                    </div>
                    <div class="property property-loader">
                        <div class="key">{{tr "URL loader:" /}}</div>
                        <input class="value" type="text" list="song-loader-list" />
                        <datalist id="song-loader-list">
                            <option>YouTube</option>
                            <option>FFMpeg</option>
                            <!-- <option>ChannelProvider</option> --> <!-- requires a special url, may add a UI with file select? -->
                        </datalist>
                    </div>
                </div>
                <div class="container-buttons">
                    <button class="button-add">{{tr "Add URL" /}}</button>
                    <button class="button-cancel">{{tr "Cancel" /}}</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_manage_bookmarks" type="text/html">
            <div class="modal-bookmarks">
                <div class="group_box gb-list">
                    <div class="header">{{tr "Bookmarks" /}}</div>
                    <div class="content bookmark-list">
                        <div class="list">
                            <div class="entry bookmark">
                                <div class="name">TeaSpeak official</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="buttons">
                    <button class="button-large btn btn-raised btn-secondary button-create">{{tr "Create new bookmark/directory" /}}</button>
                    <button class="button-large btn btn-danger button-delete">{{tr "Delete selected bookmark/directory" /}}</button>

                    <button class="button-small btn btn-raised btn-secondary button-create">{{tr "Create" /}}</button>
                    <button class="button-small btn btn-danger button-delete">{{tr "Delete" /}}</button>
                </div>
                <hr>
                <div class="group_box gb-settings">
                    <div class="header">{{tr "Bookmark settings" /}}</div>
                    <div class="content">
                        <div class="bookmark-setting bookmark-setting-bookmark">
                            <div class="form-group">
                                <label for="input-bookmark-name" class="bmd-label-static">{{tr "Bookmark name:" /}}</label>
                                <input id="input-bookmark-name" class="form-control setting-bookmark-name">
                            </div>
                            <div class="form-group">
                                <label for="input-bookmark-profile" class="bmd-label-static">{{tr "Connect profile:" /}}</label>
                                <select id="input-bookmark-profile" class="form-control setting-bookmark-profile"></select>
                            </div>
                            <div class="group_box">
                                <div class="header">{{tr "Server Properties" /}}</div>
                                <div class="content">
                                    <div class="form-group">
                                        <label for="input-bookmark-server-host" class="bmd-label-static">{{tr "Server address:" /}}</label>
                                        <input id="input-bookmark-server-host" class="form-control setting-server-host">
                                    </div>
                                    <div class="form-group">
                                        <label for="input-bookmark-server-port" class="bmd-label-static">{{tr "Server port:" /}}</label>
                                        <input type="number" min="1" max="65665" id="input-bookmark-server-port" class="form-control setting-server-port">
                                    </div>
                                    <div class="form-group">
                                        <!-- TODO generated id because of password field (id="bookmark_server_password_{{rnd '0~13377331'/}}") -->
                                        <label for="input-bookmark-server-password" class="bmd-label-floating">{{tr "Server password" /}}</label>
                                        <input id="input-bookmark-server-password" class="form-control setting-server-password" autocomplete="nope" type="password">
                                    </div>
                                </div>
                            </div>
                            <!--
                            <div class="group_box">
                                <div class="header">{{tr "Connect Properties (Not yet supported)" /}}</div>
                                <div class="content">
                                    <div class="form-group">
                                        <label for="input-bookmark-username" class="bmd-label-floating">{{tr "Default Username" /}}</label>
                                        <input id="input-bookmark-username" class="form-control setting-username" disabled>
                                    </div>
                                    <div class="form-row container-default-channel-select">
                                        <div class="form-group container-default-channel">
                                            <label for="input-bookmark-channel" class="bmd-label-floating">{{tr "Default Channel" /}}</label>
                                            <input id="input-bookmark-channel" class="form-control setting-channel" disabled>
                                        </div>
                                        <div class="form-group bmd-form-group">
                                            <button class="btn btn-primary button-set-to-current" disabled>{{tr "Current Channel" /}}</button>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <!- TODO generated id because of password field (id="bookmark_server_password_{{rnd '0~13377331'/}}") ->
                                        <label for="input-bookmark-channel-password" class="bmd-label-floating">{{tr "Default channel password" /}}</label>
                                        <input id="input-bookmark-channel-password" class="form-control setting-channel-password" type="password" disabled>
                                    </div>
                                </div>
                            </div>
                            -->
                        </div>
                        <div class="bookmark-setting bookmark-setting-directory">
                            <div class="form-group">
                                <label for="input-bookmark-dirname" class="bmd-label-static">{{tr "Directory name:" /}}</label>
                                <input id="input-bookmark-dirname" class="form-control setting-bookmark-name">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_manage_bookmarks-list_entry" type="text/html">
            {{if type == "bookmark" }}
            <div class="entry bookmark">
                <div class="name">{{>name}}</div>
            </div>
            {{else type == "directory" }}
            <div class="entry directory">
                <div class="name">{{>name}}</div>
                <div class="members"> </div>
            </div>
            {{/if}}
        </script>


        <script class="jsrender-template" id="tmpl_manage_bookmarks-create" type="text/html">
            <div class="modal-bookmark-create">
                <div class="form-group">
                    <label class="bmd-label-floating">{{tr "Bookmark type:" /}}</label>
                    <select class="form-control bookmark-type">
                        <option value="bookmark">Bookmark</option>
                        <option value="directory">Directory</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="bmd-label-floating">{{tr "Parent directory:" /}}</label>
                    <select class="form-control bookmark-parent">
                        <option bookmark-uuid=""></option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="bmd-label-floating">{{tr "Bookmark name" /}}</label>
                    <input class="form-control bookmark-name">
                </div>
                <div class="buttons">
                    <button class="btn btn-success button-create">Create</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_icon_select" type="text/html">
            <div class="modal-icon-select">
                <div class="container-icons">
                    <div class="group_box">
                        <div class="header">{{tr "Remote" /}}</div>
                        <div class="content">
                            <div class="container-icons-list">
                                <div class="container-icons-remote {{if enable_select}}icon-select{{/if}}"></div>
                                <div class="container-loading">
                                    <a>{{tr "loading..." /}}</a>
                                </div>
                                <div class="container-no-permissions">
                                    <a>{{tr "You dont have permissions the view the icons" /}}</a>
                                </div>
                                <div class="container-error">
                                    <a class="error-message">{{ŧr "An error occured" /}}</a>
                                </div>
                            </div>
                            <!--
                            <div class="container-buttons">
                                <button class="btn btn-success button-upload">{{tr "Upload" /}}</button>
                                <button class="btn btn-danger button-upload">{{tr "Delete" /}}</button>
                            </div>
                            -->
                        </div>
                    </div>
                    <div class="group_box">
                        <div class="header">{{tr "Local" /}}</div>
                        <div class="content">
                            <div class="container-icons-list">
                                <div class="container-icons-local {{if enable_select}}icon-select{{/if}}"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-buttons">
                    <button class="btn btn-primary btn-raised button-reload">{{tr "Reload" /}}</button>
                    <div class="spacer"></div>
                    {{if enable_select}}
                    <button class="btn btn-success btn-raised button-select-no-icon">{{tr "Remove icon" /}}</button>
                    <button class="btn btn-success btn-raised button-select"><a>{{tr "Select " /}}</a><div class="selected-item-container"></div></button>
                    {{/if}}
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_avatar_list" type="text/html">
            <div class="modal-avatar-list">
                <div class="container-list">
                    <div class="list-header">
                        <div class="column column-username">{{tr "Username" /}}</div>
                        <div class="column column-unique-id">{{tr "Unique ID" /}}</div>
                        <div class="column column-size">{{tr "Size" /}}</div>
                        <div class="column column-timestamp">{{tr "Date" /}}</div>
                    </div>
                    <div class="list-entries-container">
                        <div class="list-entries">
                        </div>
                    </div>
                </div>
                <div class="container-info">
                    <div class="container-data">
                        <div class="form-group">
                            <label class="bmd-label-static">{{tr "Username" /}}</label>
                            <input class="form-control property-username" disabled>
                        </div>
                        <div class="form-group">
                            <label class="bmd-label-static">{{tr "Unique ID" /}}</label>
                            <input class="form-control property-unique-id" disabled>
                        </div>
                        <div class="form-group">
                            <label class="bmd-label-static">{{tr "Avatar ID" /}}</label>
                            <input class="form-control property-avatar-id" disabled>
                        </div>
                    </div>
                    <div class="container-preview">
                        <div class="container-image"></div>
                        <div class="container-image-data">
                            <a>{{tr "Image info:" /}}</a>
                            <div class="form-group">
                                <label class="bmd-label-static">{{tr "Bytes" /}}</label>
                                <input class="form-control property-image-size" disabled>
                            </div>
                            <div class="form-group">
                                <label class="bmd-label-static">{{tr "Width" /}}</label>
                                <input class="form-control property-image-width" disabled>
                            </div>
                            <div class="form-group">
                                <label class="bmd-label-static">{{tr "Height" /}}</label>
                                <input class="form-control property-image-height" disabled>
                            </div>
                            <div class="form-group">
                                <label class="bmd-label-static">{{tr "Type" /}}</label>
                                <input class="form-control property-image-type" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="container-buttons">
                        <button class="btn btn-danger button-delete">{{tr "Delete" /}}</button>
                        <button class="btn btn-success button-download">{{tr "Download" /}}</button>
                    </div>
                    <div class="disabled-overlay">
                        <a>{{tr "Please select a user" /}}</a>
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_avatar_list-list_entry" type="text/html">
            <div class="entry">
                <div class="column column-username">{{>username}}</div>
                <div class="column column-unique-id">{{>unique_id}}</div>
                <div class="column column-size">{{>size}}</div>
                <div class="column column-timestamp">{{>timestamp}}</div>
            </div>
        </script>
    </body>
</html>
<!--
<script class="jsrender-template" id="tmpl_query_manager-list_entry" type="text/html">
    <div class="entry">
        <div class="column column-username">{{>username}}</div>
        <div class="column column-unique-id">{{>unique_id}}</div>
        <div class="column column-bound-server">{{>bounded_server}}</div>
    </div>
</script>

        <script class="jsrender-template" id="tmpl_playlist_list" type="text/html">
            <div class="playlist-management">
                <div class="header">
                    <div class="form-group bmd-form-group buttons">
                        <button class="btn btn-success button button-playlist-create">{{tr "Create playlist" /}}</button>
                        <button class="btn btn-danger button button-playlist-delete">{{tr "Delete playlist" /}}</button>
                        <button class="btn btn-primary button-playlist-edit">{{tr "Edit playlist" /}}</button>
                    </div>
                    <div class="form-group search">
                        <label class="bmd-label-floating">{{tr "search" /}}</label>
                        <input class="form-control input input-search" type="text">
                    </div>
                </div>
                <div class="playlist-list">
                    <div class="playlist-list-header">
                        <div class="column column-id">{{tr "ID" /}}</div>
                        <div class="column column-title">{{tr "Title" /}}</div>
                        <div class="column column-creator">{{tr "Creator" /}}</div>
                        <div class="column column-type">{{tr "Type" /}}</div>
                        <div class="column column-used">{{tr "Used" /}}</div>
                    </div>
                    <div class="playlist-list-entries-container">
                        <div class="playlist-list-entries">
                        </div>
                    </div>
                </div>
                <div class="footer">
                    <div class="info">
                        <a>{{tr "loading..." /}}</a>
                    </div>
                    <div class="buttons">
                        <div class="form-group highlight-own">
                            <div class="switch">
                                <label>
                                    <input type="checkbox" class="button-highlight-own">
                                    {{tr "Highlight own playlists" /}}
                                </label>
                            </div>
                        </div>
                        <div class="form-group bmd-form-group">
                            <button class="btn btn-secondary btn-raised button-refresh">{{tr "Refresh" /}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </script>