<!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">
                            {{if multi_session}}
                            <div class="button-dropdown container-connect" title="{{tr 'Connect to a server' /}}">
                                <div class="buttons">
                                    <div class="button btn_connect">
                                        <div class="icon_em client-connect"></div>
                                    </div>
                                    <div class="dropdown-arrow">
                                        <div class="arrow down"></div>
                                    </div>
                                </div>
                                <div class="dropdown" style="width: 350px">
                                    <div class="btn_connect">
                                        <div class="icon client-connect"></div>
                                        <a>{{tr "Connect to a server" /}}</a></div>
                                    <div class="btn_connect_new_tab">
                                        <div class="icon client-connect"></div>
                                        <a>{{tr "Connect to a server in another tab" /}}</a></div>
                                </div>
                            </div>

                            <div class="button-dropdown container-disconnect" title="{{tr 'Disconnect from server' /}}"
                                 style="display: none">
                                <div class="buttons">
                                    <div class="button btn_disconnect">
                                        <div class="icon_em client-disconnect"></div>
                                    </div>
                                    <div class="dropdown-arrow">
                                        <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>
                            {{else}}
                            <div class="button container-connect btn_connect">
                                <div class="icon_em client-connect" title="{{tr 'Connect to a server' /}}"></div>
                            </div>
                            <div class="button container-disconnect btn_disconnect">
                                <div class="icon_em client-disconnect" title="{{tr 'Disconnect from server' /}}"></div>
                            </div>
                            {{/if}}
                            <div class="button-dropdown btn_bookmark" title="{{tr 'Bookmarks' /}}">
                                <div class="buttons">
                                    <div class="button btn_bookmark_list">
                                        <div class="icon_em client-bookmark_manager"></div>
                                    </div>
                                    <div class="dropdown-arrow">
                                        <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="button-dropdown btn_away" title="{{tr 'Toggle away status' /}}">
                                <div class="buttons">
                                    <div class="button btn_away_toggle">
                                        <div class="icon_em client-away"></div>
                                    </div>
                                    <div class="dropdown-arrow">
                                        <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="button button-red btn_mute_input">
                                <div class="icon_em client-input_muted" title="{{tr 'Mute/unmute microphone' /}}"></div>
                            </div>
                            <div class="button button-red btn_mute_output">
                                <div class="icon_em 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">
                                        <div class="icon_em client-music"></div>
                                    </div>
                                    <div class="dropdown-arrow">
                                        <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="divider"></div>

                            <div class="button button-subscribe-mode">
                                <div class="icon_em" title="{{tr 'Toggle channel subscribe mode' /}}"></div>
                            </div>

                            <!-- the query button -->
                            <div class="button-dropdown btn_query" title="{{tr 'Show/hide server queries' /}}">
                                <div class="buttons">
                                    <div class="button btn_query_toggle">
                                        <div class="icon_em client-server_query"></div>
                                    </div>
                                    <div class="dropdown-arrow">
                                        <div class="arrow down"></div>
                                    </div>
                                </div>
                                <div class="dropdown">
                                    <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 style="width: 100%"></div>
                            <!--  -->
                            <div class="button button-hostbutton" title="{{tr 'Hostbutton' /}}">
                                <img alt="{{tr 'hostbutton' /}}">
                            </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">
                                <div class="hostbanner" id="hostbanner"></div>
                                <div class="channel-tree" id="channelTree"></div>
                            </div>

                            <div class="container-seperator vertical" seperator-id="seperator-channel-chat"></div>
                            <!-- Chat window -->
                            <div class="container-chat" id="chat"></div>
                        </div>
                        <div class="container-seperator horizontal" seperator-id="seperator-main-log"></div>
                        <div class="container-bottom">
                            <div class="container-server-log" id="server-log"></div>
                            <div class="container-footer">
                                <span>
                                    <a>{{tr "Version:" /}} {{>app_version}}</a>
                                    <div class="hide-small">
                                        (Open source on
                                        <a target="_blank" href="https://github.com/TeaSpeak/TeaSpeak-Web"
                                           style="display: inline-block; position: relative">github.com</a>)
                                    </div>
                                </span>
                            </div>
                        </div> <!-- Selection info -->
                    </div>
                </div>
            </div>
            <div id="contextMenu" class="context-menu"></div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat" type="text/html">
            <div class="container-chat-frame">
                <div class="container-info"></div>
                <div class="container-chat"></div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat_info" type="text/html">
            <div class="lane">
                <div class="block left">
                    <div class="title">{{tr "You're talking in Channel" /}}</div>
                    <div class="value value-voice-channel"></div>
                    <div class="small-value value-voice-limit"></div>
                </div>
                <div class="block right">
                    <div class="title">{{tr "Your ping" /}}</div>
                    <div class="value value-ping">11 ms</div>
                </div>
            </div>
            <div class="lane">
                <div class="block left mode-based mode-channel_chat channel">
                    <div class="title"></div>
                    <div class="value value-text-channel"></div>
                    <div class="small-value value-text-limit"></div>
                </div>
                <div class="block left mode-based mode-private_chat">
                    <div class="button button-switch-chat-channel">{{tr "Switch to channel chat" /}}</div>
                </div>
                <div class="block left mode-based mode-client_info">
                    <div class="spacer-client-info"></div>
                </div>

                <div class="block right mode-based mode-private_chat mode-channel_chat">
                    <div class="title">{{tr "Private chats" /}}
                        <div class="container-indicator">
                            <div class="chat-unread-counter">-1</div>
                        </div>
                    </div>
                    <div class="value button chat-counter">Hmm... Something seems to be wrong!</div>
                </div>

                <div class="block right mode-based mode-client_info">
                    <div class="title">&nbsp;</div>
                    <div class="value button open-conversation">error: open conversation</div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat_private" type="text/html">
            <div class="container-private-conversations">
                <div class="conversation-list">
                    <div class="no-chats">
                        <div>{{tr "You&nbsp;dont&nbsp;have any&nbsp;chats&nbsp;yet!" /}}</div>
                    </div>
                </div>
                <div class="container-seperator vertical" seperator-id="seperator-conversation-list-messages"></div>
                <div class="conversation">
                    <div class="spacer"></div>
                    <div class="messages"></div>
                    <div class="chatbox">
                        <div class="container-typing">{{tr "Partner is typing..." /}}</div>
                        <node key="chatbox"></node>
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat_private_entry" type="text/html">
            <div class="conversation-entry">
                <div class="container-avatar">
                    <node key="avatar"></node>
                    <div class="chat-unread"></div>
                </div>
                <div class="info">
                    <a class="client-name">{{>client_name}}</a>
                    <a class="last-message">{{>last_time}}</a>
                </div>
                <div class="button-close">

                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat_private_message" type="text/html">
            <div class="message-entry" message-id="{{>message_id}}">
                <div class="container-avatar">
                    <node key="avatar"></node>
                </div>
                <div class="container-message">
                    <div class="info">
                        <a class="client-name">
                            <node key="client_name"/>
                        </a>
                        <a class="timestamp">{{>timestamp}}</a>
                    </div>
                    <div class="message">
                        <node key="message"></node>
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat_private_spacer" type="text/html">
            <div class="spacer-entry">
                {{>message}}
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat_chatbox" type="text/html">
            <div class="container-chatbox">
                {{if emojy_support}}
                <div class="container-emojis">
                    <div class="button-emoji">
                        <div class="container-icon">
                            <img src="img/smiley-smile.svg">
                        </div>
                    </div>
                </div>
                {{/if}}
                <div class="container-input">
                    <div class="textarea" contenteditable="true"
                         placeholder="{{tr 'Type your message here...' /}}"></div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat_channel" type="text/html">
            <div class="container-channel-chat">
                <div class="container-chat"></div>
                <node key="chatbox"></node>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat_channel_messages" type="text/html">
            <div class="container-channel-chat-messages">
                <div class="container-messages"></div>
                <div class="new-message">
                    <a>{{tr "Scroll to new messages" /}}</a>
                </div>
                <div class="no-permissions">
                    <div>{{tr "You don't have permissions to participate in this conversation!" /}}</div>
                </div>
                <div class="private-conversation">
                    <div>{{tr "Conversation is private. Join the channel to participate!" /}}</div>
                </div>
                <div class="not-supported">
                    <div>
                        {{tr "The target server does not support channel chats." /}}<br>
                        {{tr "You're only able to write in your own channel" /}}
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat_channel_message" type="text/html">
            <div class="message-entry" message-id="{{>message_id}}">
                <div class="container-avatar">
                    <node key="avatar"></node>
                </div>
                <div class="container-message">
                    <div class="info">
                        <div class="button-delete">
                            <img src="img/icon_conversation_message_delete.svg" alt="X"/>
                        </div>
                        <a class="client-name">
                            <node key="client_name"></node>
                        </a>
                        <a class="timestamp">{{>timestamp}}</a>
                        <br> <!-- Only for copy purposes -->
                    </div>
                    <div class="message">
                        <node key="message"></node>
                        <br> <!-- Only for copy purposes -->
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_frame_chat_client_info" type="text/html">
            <div class="container-client-info">
                <div class="heading">
                    <div class="container-avatar">
                        <div class="avatar">
                            <img src="img/style/avatar.png" style="height: 100%; width: 100%">
                        </div>
                        <div class="container-avatar-edit" title="{{tr 'Upload Avatar' /}}">
                            <img src="img/photo-camera.svg">
                        </div>
                    </div>
                    <a class="client-name"></a>
                    <div class="container-description">
                        <a class="client-description">error: description</a>
                    </div>
                </div>
                <div class="general-info">
                    <div class="block block-left">
                        <div class="container-property">
                            <div class="icon_em client-home"></div>
                            <div class="property">
                                <div class="title">{{tr "Online since" /}}</div>
                                <div class="value client-online-time">error: online-time</div>
                            </div>
                        </div>
                        <div class="container-property">
                            <div class="icon_em client-home"></div>
                            <div class="property">
                                <div class="title">{{tr "Country" /}}</div>
                                <div class="value client-country"><a>error: country</a></div>
                            </div>
                        </div>
                        <div class="container-property container-teaforo">
                            <div class="icon_em client-home"></div>
                            <div class="property">
                                <div class="title">{{tr "TeaSpeak Forum Account" /}}</div>
                                <div class="value client-teaforo-account"><a>error: online-time</a></div>
                            </div>
                        </div>
                        <div class="container-property">
                            <div class="icon_em client-home"></div>
                            <div class="property">
                                <div class="title">{{tr "Version" /}}</div>
                                <div class="value client-version"><a>error: version</a></div>
                            </div>
                        </div>
                        <div class="container-property">
                            <div class="icon_em client-home"></div>
                            <div class="property">
                                <div class="title">{{tr "Volume" /}}</div>
                                <div class="value client-local-volume">error: local volume</div>
                            </div>
                        </div>
                        <div class="container-property list container-client-status">
                            <div class="icon_em client-home"></div>
                            <div class="property">
                                <div class="title">{{tr "Status" /}}</div>
                                <div class="value client-status">
                                    <div>error: client status</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="block block-right">
                        <div class="container-property">
                            <div class="icon_em client-permission_server_groups"></div>
                            <div class="property">
                                <div class="title">{{tr "Channel Group" /}}</div>
                                <div class="value client-group-channel"><a>error: channel group</a></div>
                            </div>
                        </div>
                        <div class="container-property list">
                            <div class="icon_em client-permission_channel"></div>
                            <div class="property">
                                <div class="title">{{tr "Server Groups" /}}</div>
                                <div class="value client-group-server">
                                    <div>error: client server groups</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="button-close"></div>
                <div class="button-more">{{tr "Full Info" /}}</div>
            </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 button-modal-close" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <div class="container-banner"></div>
                <div class="container-select-info"></div>
            </div>
        </script>

        <div class="template-group-modals">
            <script class="jsrender-template" id="tmpl_modal" type="text/html">
                <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content" style="{{if full_size}}flex-grow: 1{{/if}}">
                            <div class="modal-header {{if header_class}}{{:header_class}}{{/if}}">
                                <div class="container-icon">
                                    <img src="img/favicon/teacup.png">
                                </div>
                                <node key="modal_header"></node>
                                <div class="container-close">
                                    <div class="button-modal-close icon_em client-close_button"></div>
                                </div>
                            </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" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <div class="container-icon">
                                    <img src="img/favicon/teacup.png">
                                </div>
                                <node key="modal_header"></node>
                                <div class="container-close">
                                    <div class="button-modal-close icon_em client-close_button"></div>
                                </div>
                            </div>
                            <div class="modal-body modal-body-input modal-green">
                                <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 class="buttons">
                                    <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>
                </div>
            </script>

            <script class="jsrender-template" id="tmpl_modal_yesno" type="text/html">
                <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <div class="container-icon">
                                    <img src="img/favicon/teacup.png">
                                </div>
                                <node key="modal_header"></node>
                                <div class="container-close">
                                    <div class="button-modal-close icon_em client-close_button"></div>
                                </div>
                            </div>
                            <div class="modal-body modal-body-yesno">
                                <node key="question"></node>
                                <div class="buttons">
                                    <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>
                </div>
            </script>
        </div>

        <!-- Template for the connect modal -->
        <script class="jsrender-template" id="tmpl_connect" type="text/html">
            <div class="container-connect-input">
                <div class="row container-address-password">
                    <div class="form-group container-address">
                        <label>{{tr "Server Address" /}}</label>
                        <input 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 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="row container-profile-name">
                    <div class="form-group container-nickname">
                        <label>{{tr "Nickname" /}}</label>
                        <input 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">{{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>
                        <div class="form-group">
                            <button type="button" class="btn btn-raised button-manage-profiles">{{tr "Profiles" /}}
                            </button>
                        </div>
                    </div>
                </div>
                <div class="container-buttons">
                    <button type="button" class="btn btn-raised button-toggle-last-servers"><a>{{tr "Show last servers"
                        /}}</a>
                        <div class="arrow down"></div>
                    </button>

                    <div class="container-buttons-connect">
                        {{if default_connect_new_tab}}
                        <button type="button" class="btn btn-raised btn-success button-connect button-left">{{tr
                            "Connect in same tab" /}}
                        </button>
                        <button type="button" class="btn btn-raised btn-success button-connect-new-tab button-right">
                            {{tr "Connect" /}}
                        </button>
                        {{else}}
                        {{if multi_tab}}
                        <button type="button" class="btn btn-raised btn-success button-connect-new-tab button-left">{{tr
                            "Connect in a new tab" /}}
                        </button>
                        {{/if}}
                        <button type="button" class="btn btn-raised btn-success button-connect button-right">{{tr
                            "Connect" /}}
                        </button>
                        {{/if}}
                    </div>
                </div>
            </div>
            <div class="container-last-servers">
                <hr>
                <div class="table">
                    <div class="head">
                        <div class="column delete">Nr</div>
                        <div class="column name">{{tr "Name" /}}</div>
                        <div class="column address">{{tr "Address" /}}</div>
                        <div class="column password">{{tr "Password" /}}</div>
                        <div class="column country-name">{{tr "Country" /}}</div>
                        <div class="column clients">{{tr "Clients" /}}</div>
                        <div class="column connections">{{tr "Connections" /}}</div>
                    </div>
                    <div class="body">
                        <div class="body-empty">
                            <a>{{tr "No connections yet made" /}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </script>


        <!-- Template for channel create & edit-->
        <script class="jsrender-template" id="tmpl_channel_edit" type="text/html">
            <div> <!-- only for rendering -->
                <div class="container-general">
                    <div class="container-name-icon">
                        <input type="text" class="input-boxed channel_name" placeholder="{{tr 'Channel name' /}}"
                               value="{{>channel_name}}"/>
                        <div class="container-icon-select">
                            <div class="button-select-icon icon-preview">
                                <node key="channel_icon_general"/>
                            </div>
                            <div class="container-dropdown">
                                <div class="button">
                                    <div class="arrow down"></div>
                                </div>
                                <div class="dropdown">
                                    <div class="entry button-select-icon">{{tr "Edit icon" /}}</div>
                                    <div class="entry button-icon-remove">{{tr "Remove icon" /}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container-password">
                        <input class="input-boxed channel_password" placeholder="{{tr 'Password' /}}" type="password"
                               id="field_channel_password_{{rnd '0~13377331'/}}" {{if channel_flag_password}}
                               value="WolverinDEV" {{/if}}/>
                    </div>
                    <div class="container-topic">
                        <input class="input-boxed channel_topic" placeholder="{{tr 'Topic' /}}"
                               value="{{>channel_topic}}"/>
                    </div>
                    <div class="container-description">
                        <div class="toolbar">
                            <div class="button button-bold">B</div>
                            <div class="button button-italic">I</div>
                            <div class="button button-underline">U</div>
                            <label class="button button-color">
                                <input type="color" value="#FF0000">
                                <a class="rainbow-letter">C</a>
                            </label>
                        </div>
                        <textarea class="input-boxed channel_description" placeholder="{{tr 'Description' /}}">{{>channel_description}}</textarea>
                    </div>
                </div>

                <div class="mode-container">
                    <div class="container-simple">
                        <div class="container-left border">
                            <div class="header">{{tr "Channel Options" /}}</div>
                            <div class="content">
                                <div class="container-type">
                                    <a>{{tr "Channel Type"/}}</a>
                                    <select name="channel-type" class="input-boxed channel-type">
                                        <option name="channel-type" value="temp">{{tr "Temporary" /}}</option>
                                        <option name="channel-type" value="semi">{{tr "Semi-Permanent" /}}</option>
                                        <option name="channel-type" value="perm">{{tr "Permanent" /}}</option>
                                        <option name="channel-type" value="def">{{tr "Default Channel" /}}</option>
                                    </select>
                                </div>
                                <div class="container-codec">
                                    <a>{{tr "Channel Codec"/}}</a>
                                    <select name="voice_template" class="input-boxed channel-codec">
                                        <option name="voice_template" value="custom" style="display: none">{{tr "Custom (Advanced)" /}}
                                        </option>
                                        <option name="voice_template" value="voice_mobile">{{tr "Mobile" /}}</option>
                                        <option name="voice_template" value="voice_desktop">{{tr "Voice" /}}</option>
                                        <option name="voice_template" value="music">{{tr "Music" /}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="container-right">
                            <div class="header">{{tr "Sorting and Talk power" /}}</div>
                            <div class="content">
                                <div class="container-sort">
                                    <a>{{tr "Sort this channel after:"/}}</a>
                                    <select class="input-boxed order_id">
                                    </select>
                                </div>
                                <div class="container-talk">
                                    <a>&nbsp;</a>
                                    <div class="input-boxed">
                                        <a class="prefix">{{tr "Talk power:" /}}</a>
                                        <input type="number" type="number" min="0" name="talk_power"
                                               value="{{if channel_needed_talk_power}}{{:channel_needed_talk_power}}{{else}}0{{/if}}">
                                        <div class="container-tooltip tooltip-permission-subscribe">
                                            <img src="img/icon_tooltip.svg"/>
                                            <div class="tooltip">
                                                <a>{{tr "Required power to talk in this channel" /}}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="container-advanced">
                        <div class="categories">
                            <div class="entry" container="container-standard">{{tr "Standard" /}}</div>
                            <div class="entry" container="container-audio">{{tr "Audio" /}}</div>
                            <div class="entry" container="container-permissions">{{tr "Permissions" /}}</div>
                            <div class="entry" container="container-misc">{{tr "Misc" /}}</div>
                        </div>
                        <div class="bodies">
                            <div class="body container-standard">
                                <div class="container-top">
                                    <div class="container-left border">
                                        <div class="header">{{tr "Channel Type" /}}</div>
                                        <div class="content">
                                            <fieldset class="container-channel-type">
                                                <label class="type type-temp">
                                                    <div class="ratio-button">
                                                        <input type="radio" name="channel_type" value="temp"/>
                                                        <div class="mark"></div>
                                                    </div>
                                                    <a>{{tr "Temporary" /}}</a>
                                                </label>
                                                <label class="type type-semi">
                                                    <div class="ratio-button">
                                                        <input type="radio" name="channel_type" value="semi"/>
                                                        <div class="mark"></div>
                                                    </div>
                                                    <a>{{tr "Semi-Permanent" /}}</a>
                                                </label>
                                                <div class="container-perm-default">
                                                    <label class="type type-perm">
                                                        <div class="ratio-button">
                                                            <input type="radio" name="channel_type" value="perm"/>
                                                            <div class="mark"></div>
                                                        </div>
                                                        <a>{{tr "Permanent" /}}</a>
                                                    </label>

                                                    <label class="container-default-channel">
                                                        <a>{{tr "Default Channel" /}}</a>
                                                        <div class="checkbox">
                                                            <input type="checkbox" class="input-flag-default">
                                                            <div class="mark"></div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </fieldset>
                                        </div>
                                    </div>
                                    <div class="container-right">
                                        <div class="header">{{tr "Sorting and Talk power" /}}</div>
                                        <div class="content">
                                            <div class="container-sort">
                                                <a>{{tr "Sort this channel after:"/}}</a>
                                                <select class="input-boxed order_id">
                                                </select>
                                            </div>
                                            <div class="container-talk">
                                                <a>&nbsp;</a>
                                                <div class="input-boxed">
                                                    <a class="prefix">{{tr "Talk power:" /}}</a>
                                                    <input type="number" type="number" min="0" name="talk_power"
                                                           value="{{if channel_needed_talk_power}}{{:channel_needed_talk_power}}{{else}}0{{/if}}">
                                                    <div class="container-tooltip tooltip-permission-subscribe">
                                                        <img src="img/icon_tooltip.svg"/>
                                                        <div class="tooltip">
                                                            <a>{{tr "Required power to talk in this channel" /}}</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-bottom">
                                    <div class="container-left container-max-users">
                                        <div class="header">{{tr "Max users" /}}</div>
                                        <div class="content">
                                            <fieldset>
                                                <label class="container-unlimited">
                                                    <div class="ratio-button">
                                                        <input type="radio" name="max_users" value="unlimited" {{if
                                                               channel_flag_maxclients_unlimited}}checked{{/if}}/>
                                                        <div class="mark"></div>
                                                    </div>
                                                    <a>{{tr "Unlimited" /}}</a>
                                                </label>
                                                <label class="container-limited">
                                                    <div class="ratio-button">
                                                        <input type="radio" name="max_users" value="limited" {{if
                                                               !channel_flag_maxclients_unlimited}}checked{{/if}}/>
                                                        <div class="mark"></div>
                                                    </div>
                                                    <a>{{tr "Limited" /}}</a>
                                                    <div class="input-boxed">
                                                        <input class="channel_maxclients"
                                                               value="{{if channel_maxclients}}{{:channel_maxclients}}{{else}}0{{/if}}"
                                                               type="number" min="0" max="99999999">
                                                        <div class="container-tooltip tooltip-max-users">
                                                            <img src="img/icon_tooltip.svg"/>
                                                            <div class="tooltip">
                                                                <a>{{tr "Max users which could join the channel" /}}</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </label>
                                            </fieldset>
                                        </div>
                                    </div>

                                    <div class="container-right container-max-family-users">
                                        <div class="header">{{tr "Family Max users" /}}</div>
                                        <div class="content">
                                            <fieldset>
                                                <label class="container-inherited">
                                                    <div class="ratio-button">
                                                        <input type="radio" name="max_family_users" value="inherited"
                                                               {{if channel_flag_maxfamilyclients_inherited}}checked{{/if}}/>
                                                        <div class="mark"></div>
                                                    </div>
                                                    <a>{{tr "Inherited" /}}</a>
                                                </label>
                                                <label class="container-unlimited">
                                                    <div class="ratio-button">
                                                        <input type="radio" name="max_family_users" value="unlimited"
                                                               {{if channel_flag_maxfamilyclients_unlimited}}checked{{/if}}/>
                                                        <div class="mark"></div>
                                                    </div>
                                                    <a>{{tr "Unlimited" /}}</a>
                                                </label>
                                                <label class="container-limited">
                                                    <div class="ratio-button">
                                                        <input type="radio" name="max_family_users" value="limited" {{if
                                                               !channel_flag_maxfamilyclients_unlimited &&
                                                               !channel_flag_maxfamilyclients_inherited}}checked{{/if}}/>
                                                        <div class="mark"></div>
                                                    </div>
                                                    <a>{{tr "Limited" /}}</a>
                                                    <div class="input-boxed">
                                                        <input class="channel_maxfamilyclients"
                                                               value="{{if channel_maxfamilyclients}}{{:channel_maxfamilyclients}}{{else}}0{{/if}}"
                                                               type="number" min="0" max="99999999">
                                                        <div class="container-tooltip tooltip-max-family-users">
                                                            <img src="img/icon_tooltip.svg"/>
                                                            <div class="tooltip">
                                                                <a>{{tr "Max users which could join the channel family"
                                                                    /}}</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </label>
                                            </fieldset>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="body container-audio">
                                <div class="container-top">
                                    <div class="container-left container-presets">
                                        <div class="header">{{tr "Presets" /}}</div>
                                        <div class="content">
                                            <fieldset style="">
                                                <label>
                                                    <div class="ratio-button">
                                                        <input type="radio" name="voice_template" value="voice_mobile"/>
                                                        <div class="mark"></div>
                                                    </div>
                                                    <a>{{tr "Voice Mobile" /}}</a>
                                                </label>

                                                <label>
                                                    <div class="ratio-button">
                                                        <input type="radio" name="voice_template"
                                                               value="voice_desktop"/>
                                                        <div class="mark"></div>
                                                    </div>
                                                    <a>{{tr "Voice Desktop" /}}</a>
                                                </label>

                                                <label>
                                                    <div class="ratio-button">
                                                        <input type="radio" name="voice_template" value="music"/>
                                                        <div class="mark"></div>
                                                    </div>
                                                    <a>{{tr "Music" /}}</a>
                                                </label>

                                                <label>
                                                    <div class="ratio-button">
                                                        <input type="radio" name="voice_template" value="custom"/>
                                                        <div class="mark"></div>
                                                    </div>
                                                    <a>{{tr "Custom" /}}</a>
                                                </label>
                                            </fieldset>
                                        </div>
                                    </div>
                                    <div class="container-right border container-custom">
                                        <div class="header">{{tr "Custom Settings" /}}</div>
                                        <div class="content">
                                            <div class="custom">
                                                <div class="contianer-codec-type">
                                                    <a>{{tr "Codec:" /}}</a>
                                                    <select class="input-boxed 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="container-quality">
                                                    <label class="bmd-label-static">
                                                        {{tr "Quality:" /}}
                                                        <a class="container-value"></a>
                                                    </label>
                                                    <div class="container-slider">
                                                        <div class="filler" style="width: 30%"></div>
                                                        <div class="thumb container-tooltip" style="left: 30%">
                                                            <div class="tooltip">
                                                                <a>86%</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-bottom">
                                    <div class="header">{{tr "Information" /}}</div>
                                    <div class="content">
                                        <p>
                                            {{tr "Estimated needed bandwidth:" /}}<a class="container-needed-bandwidth">0.00 KiB/s</a>
                                        </p>
                                        <p class="hint">
                                            {{tr "For bad internet connection, lower settings are recommend to reduce bandwidth." /}}
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div class="body container-permissions">
                                <div class="container-left">
                                    <div class="header">{{tr "Regular needed powers:" /}}</div>
                                    <div class="content">
                                        <div class="container-permission">
                                            <a class="name">{{tr "Join" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_channel_needed_join_power">
                                                <div class="container-tooltip tooltip-permission-join">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to join this channel" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-permission">
                                            <a class="name">{{tr "View" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_channel_needed_view_power">
                                                <div class="container-tooltip tooltip-permission-view">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to see this channel" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-permission">
                                            <a class="name">{{tr "Description view" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_channel_needed_description_view_power">
                                                <div class="container-tooltip tooltip-permission-view">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to see the channel description" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-permission">
                                            <a class="name">{{tr "Subscribe" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_channel_needed_subscribe_power">
                                                <div class="container-tooltip tooltip-permission-subscribe">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to subscribe to this channel" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-permission">
                                            <a class="name">{{tr "Modify" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_channel_needed_modify_power">
                                                <div class="container-tooltip tooltip-permission-modify">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to modify this channel permissions"
                                                            /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-permission">
                                            <a class="name">{{tr "Delete" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_channel_needed_delete_power">
                                                <div class="container-tooltip tooltip-permission-delete">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to delete this channel" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-right border">
                                    <div class="header">{{tr "File transfer needed powers:" /}}</div>
                                    <div class="content">
                                        <div class="container-permission">
                                            <a class="name">{{tr "Browse" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_ft_needed_file_browse_power">
                                                <div class="container-tooltip tooltip-permission-ft-browse">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to browse all files and directories"
                                                            /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="container-permission">
                                            <a class="name">{{tr "Upload" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_ft_needed_file_upload_power">
                                                <div class="container-tooltip tooltip-permission-ft-upload">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to upload files" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="container-permission">
                                            <a class="name">{{tr "Download" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_ft_needed_file_download_power">
                                                <div class="container-tooltip tooltip-permission-ft-download">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to download files" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="container-permission">
                                            <a class="name">{{tr "Rename" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_ft_needed_file_rename_power">
                                                <div class="container-tooltip tooltip-permission-ft-rename">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to rename files within this channel"
                                                            /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="container-permission">
                                            <a class="name">{{tr "Directory create" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_ft_needed_directory_create_power">
                                                <div class="container-tooltip tooltip-permission-ft-create">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to create a directory" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="container-permission">
                                            <a class="name">{{tr "Delete" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" value="0" class="value"
                                                       permission="i_ft_needed_file_delete_power">
                                                <div class="container-tooltip tooltip-permission-ft-delete">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Required power to delete a directory or file" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="body container-misc">
                                <div class="container-other">
                                    <div class="header">{{tr "Other Settings" /}}</div>
                                    <div class="content">
                                        <div class="container-phonetic">
                                            <a>{{tr "Phonetic Name:" /}}</a>
                                            <input class="input-boxed channel_name_phonetic"
                                                   value="{{>channel_name_phonetic}}">
                                        </div>
                                        <div class="container-delay">
                                            <a>{{tr "Delete delay:" /}}</a>
                                            <div class="input-boxed">
                                                <input class="channel_delete_delay" type="number" min="0"
                                                       max="99999999"
                                                       value="{{if channel_delete_delay}}{{:channel_delete_delay}}{{else}}0{{/if}}">
                                                <div class="container-tooltip tooltip-misc-delete-delay">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Time in seconds before the channel gets deleted when its empty." /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <button class="btn btn-info button-delete-max">{{tr "Max" /}}</button>
                                        </div>
                                        <div class="container-encrypt">
                                            <a>{{tr "Encrypt voice data:" /}}</a>
                                            <label>
                                                <div class="switch">
                                                    <input class="channel_codec_is_unencrypted" type="checkbox" {{if
                                                           !channel_codec_is_unencrypted}}checked{{/if}}/>
                                                    <span class="slider">
                                                        <div class="dot"></div>
                                                    </span>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-buttons">
                    <label>
                        <div class="switch">
                            <input class="input-advanced-mode" type="checkbox"/>
                            <span class="slider">
                                <div class="dot"></div>
                            </span>
                        </div>
                        <a>{{tr "Advanced mode" /}}</a>
                    </label>
                    <div class="spacer"></div>
                    <button class="btn btn-danger button_cancel">{{tr "Cancel" /}}</button>
                    <button class="btn btn-success button_ok">{{if create}}{{tr "Create" /}}{{else}}{{tr "Ok"
                        /}}{{/if}}
                    </button>
                </div>
                <!-- button_cancel, button_ok -->
            </div>
        </script>
        <script class="jsrender-template" id="tmpl_server_edit" type="text/html">
            <div> <!-- Only for rendering -->
                <div class="container-general">
                    <div class="container-name-icon">
                        <input type="text" class="input-boxed virtualserver_name" placeholder="{{tr 'Virtual Server name' /}}" value="{{>virtualserver_name}}"/>
                        <div class="container-icon-select">
                            <div class="button-select-icon icon-preview">
                                <node key="server_icon"/>
                            </div>
                            <div class="container-dropdown">
                                <div class="button">
                                    <div class="arrow down"></div>
                                </div>
                                <div class="dropdown">
                                    <div class="entry button-select-icon">{{tr "Edit icon" /}}</div>
                                    <div class="entry button-icon-remove">{{tr "Remove icon" /}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container-password">
                        <input class="input-boxed virtualserver_password" placeholder="{{tr 'Password' /}}" type="password"
                               id="field_server_password_{{rnd '0~13377331'/}}" {{if virtualserver_flag_password}}
                               value="WolverinDEV" {{/if}}/>
                    </div>
                    <div class="container-slots">
                        <div class="input-boxed">
                            <a class="prefix">{{tr "Slots:" /}}</a>
                            <input type="number" class="virtualserver_maxclients" value="{{:virtualserver_maxclients}}">
                            <div class="container-tooltip tooltip-slots-max">
                                <img src="img/icon_tooltip.svg"/>
                                <div class="tooltip">
                                    <a>{{tr "Max amount of simultaneously connected clients." /}}</a>
                                </div>
                            </div>
                        </div>
                        <div class="input-boxed">
                            <a class="prefix">{{tr "Reserved slots:" /}}</a>
                            <input type="number" class="virtualserver_reserved_slots" value="{{:virtualserver_reserved_slots}}">
                            <div class="container-tooltip tooltip-slots-reserved">
                                <img src="img/icon_tooltip.svg"/>
                                <div class="tooltip">
                                    <a>{{tr "Reserved server slots for admins." /}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container-welcome-message">
                        <div class="toolbar">
                            <div class="button button-bold">B</div>
                            <div class="button button-italic">I</div>
                            <div class="button button-underline">U</div>
                            <label class="button button-color">
                                <input type="color" value="#FF0000">
                                <a class="rainbow-letter">C</a>
                            </label>
                        </div>
                        <textarea class="input-boxed virtualserver_welcomemessage" placeholder="{{tr 'Welcome message' /}}">{{>virtualserver_welcomemessage}}</textarea>
                    </div>
                </div>

                <div class="container-categories">
                    <div class="categories">
                        <div class="entry" container="container-host">{{tr "Host" /}}</div>
                        <div class="entry" container="container-network">{{tr "Networking" /}}</div>
                        <div class="entry" container="container-security">{{tr "Security" /}}</div>
                        <div class="entry" container="container-messages">{{tr "Messages" /}}</div>
                        <div class="entry" container="container-misc">{{tr "Misc" /}}</div>
                    </div>
                    <div class="bodies">
                        <div class="body container-host">
                            <div class="container-top container-host-message">
                                <div class="header">{{tr "Host Message" /}}</div>
                                <div class="content">
                                    <div class="container-message">
                                        <div class="container-title">
                                            <a>{{tr "Message" /}}</a>
                                        </div>
                                        <textarea class="input-boxed virtualserver_hostmessage" placeholder="{{tr 'Enter a message...' /}}">{{>virtualserver_hostmessage}}</textarea>
                                    </div>
                                    <div class="container-mode">
                                        <div class="container-title">
                                            <a>{{tr "Message Mode" /}}</a>
                                        </div>
                                        <select class="input-boxed virtualserver_hostmessage_mode">
                                            <option value="0" {{if virtualserver_hostmessage_mode == 0}}selected{{/if}}>{{tr "No message" /}}</option>
                                            <option value="1" {{if virtualserver_hostmessage_mode == 1}}selected{{/if}}>{{tr "Show message in log" /}}</option>
                                            <option value="2" {{if virtualserver_hostmessage_mode == 2}}selected{{/if}}>{{tr "Show message as modal" /}}</option>
                                            <option value="3" {{if virtualserver_hostmessage_mode == 3}}selected{{/if}}>{{tr "Show message as modal and disconnect the client" /}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="container-bottom">
                                <div class="container-left container-host-banner">
                                    <div class="header">{{tr "Host Banner" /}}</div>
                                    <div class="content">
                                        <div class="container-url">
                                            <a>{{tr "URL" /}}</a>
                                            <div class="input-boxed">
                                                <input class="virtualserver_hostbanner_url" value="{{>virtualserver_hostbanner_url}}">
                                                <div class="container-tooltip tooltip-host-banner-url">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "URL which will be opened when the client clicks on the host banner" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-gfx-url">
                                            <a>{{tr "Image URL" /}}</a>
                                            <div class="input-boxed">
                                                <input class="virtualserver_hostbanner_gfx_url" value="{{>virtualserver_hostbanner_gfx_url}}">
                                                <div class="container-tooltip tooltip-host-banner-gfx-url">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "URL of the image which will be displayed" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-refresh">
                                            <a>{{tr "Refresh Interval" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" class="virtualserver_hostbanner_gfx_interval" value="{{>virtualserver_hostbanner_gfx_interval}}">
                                                <div class="container-tooltip tooltip-host-banner-gfx-refresh">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Time in seconds which determine in which interval the client reloads the hostbanner. A value of 0 means no reload." /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-resize">
                                            <a>{{tr "Resize Mode" /}}</a>
                                            <div class="input-boxed">
                                                <select class="virtualserver_hostbanner_mode">
                                                    <option value="0" {{if virtualserver_hostbanner_mode == 0}}selected{{/if}}>{{tr "Do not adjust" /}}</option>
                                                    <option value="1" {{if virtualserver_hostbanner_mode == 1}}selected{{/if}}>{{tr "Adjust but ignore ratio aspect" /}}</option>
                                                    <option value="2" {{if virtualserver_hostbanner_mode == 2}}selected{{/if}}>{{tr "Adjust and keep ratio aspect" /}}</option>
                                                </select>
                                                <div class="container-tooltip tooltip-host-banner-gfx-refresh">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Time in seconds which determine in which interval the client reloads the hostbanner.<br>A value of 0 means no reload." /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-gfx-preview">
                                            <div class="container-title">
                                                <a>{{tr "Image Preview" /}}</a>
                                            </div>
                                            <a class="container-image">
                                                <img src="{{:virtualserver_hostbanner_gfx_url}}"
                                                     alt="&nbsp;{{tr 'Hostbanner Preview' /}}"
                                                     title="{{tr 'Hostbanner Preview' /}}"
                                                     {{if !virtualserver_hostbanner_gfx_url}}style="display: none;"{{/if}}
                                                >
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-right container-host-button">
                                    <div class="header">{{tr "Host Button" /}}</div>
                                    <div class="content">
                                        <div class="container-url">
                                            <a>{{tr "URL" /}}</a>
                                            <div class="input-boxed">
                                                <input class="virtualserver_hostbutton_url" value="{{:virtualserver_hostbutton_url}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "URL which will be opened when the client clicks on the host button" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-tooltip-button">
                                            <a>{{tr "Tooltip" /}}</a>
                                            <div class="input-boxed">
                                                <input class="virtualserver_hostbutton_tooltip" value="{{:virtualserver_hostbutton_tooltip}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Text for the tooltip on button hover" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-gfx-url">
                                            <a>{{tr "Icon URL" /}}</a>
                                            <div class="input-boxed">
                                                <input class="virtualserver_hostbutton_gfx_url" value="{{:virtualserver_hostbutton_gfx_url}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "URL of the image which will be displayed" /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-gfx-preview">
                                            <div class="container-title">
                                                <a>{{tr "Icon Preview" /}}</a>
                                            </div>
                                            <a class="container-image">
                                                <img src="{{:virtualserver_hostbutton_gfx_url}}"
                                                     alt="&nbsp;{{tr 'Hostbutton Preview' /}}"
                                                     title="{{tr 'Hostbutton Preview' /}}"
                                                     {{if !virtualserver_hostbutton_gfx_url}}style="display: none;"{{/if}}
                                                >
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="body container-network">
                            <div class="container-top container-binding">
                                <div class="header">{{tr "Binding" /}}</div>
                                <div class="content">
                                    <div class="container-host">
                                        <a>{{tr "Host" /}}</a>
                                        <div class="input-boxed">
                                            <input class="virtualserver_host" value="{{:virtualserver_host}}">
                                            <div class="container-tooltip">
                                                <img src="img/icon_tooltip.svg"/>
                                                <div class="tooltip">
                                                    <a>
                                                        {{tr "A comma separated set of IP's where the server is listening on." /}}<br>
                                                        {{tr "IPv4 and IPv6 is supported!" /}}<br>
                                                        {{tr "Note: If you change this you need to restart the virtual server!" /}}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="container-port">
                                        <a>{{tr "Port" /}}</a>
                                        <div class="input-boxed">
                                            <input type="number" min="1" max="65535" class="virtualserver_port" value="{{:virtualserver_port}}">
                                            <div class="container-tooltip">
                                                <img src="img/icon_tooltip.svg"/>
                                                <div class="tooltip">
                                                    <a>
                                                        {{tr "The port where the server should be listening to." /}}<br>
                                                        {{tr "Note: If you change this you need to restart the virtual server!" /}}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <label class="container-weblist">
                                        <div class="checkbox">
                                            <input type="checkbox" class="virtualserver_weblist_enabled" {{if virtualserver_weblist_enabled}}checked{{/if}}>
                                            <div class="mark"></div>
                                        </div>
                                        <a>{{tr "Enable reporting to the TeamSpeak server list" /}}</a>
                                    </label>
                                </div>
                            </div>
                            <div class="container-bottom">
                                <div class="container-left container-download">
                                    <div class="header">{{tr "File Download" /}}</div>
                                    <div class="content">
                                        <div class="container-bandwidth">
                                            <a>{{tr "Bandwidth limit" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="-1" class="virtualserver_max_download_total_bandwidth" value="{{:virtualserver_max_download_total_bandwidth}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Max bandwidth used by all file transfer clients." /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <a class="unit">{{tr "Bytes/s" /}}</a>
                                        </div>
                                        <div class="container-quota">
                                            <a>{{tr "Quota" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" class="virtualserver_download_quota" value="{{:virtualserver_download_quota}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>
                                                            {{tr "Max amount of data in megabytes which could be downloaded." /}}<br>
                                                            {{tr "The quota will be reset on every new month" /}}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <a class="unit">{{tr "MiB/mo" /}}</a>
                                        </div>
                                        <div class="container-used-quota">
                                            <a>{{tr "Quota this month" /}}</a>
                                            <div class="value virtualserver_month_bytes_downloaded">{{>virtualserver_month_bytes_downloaded}}</div>
                                        </div>
                                        <div class="container-used-quota">
                                            <a>{{tr "Quota total" /}}</a>
                                            <div class="value virtualserver_total_bytes_downloaded">{{>virtualserver_total_bytes_downloaded}}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-right container-upload">
                                    <div class="header">{{tr "File Upload" /}}</div>
                                    <div class="content">
                                        <div class="container-bandwidth">
                                            <a>{{tr "Bandwidth limit" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="-1" class="virtualserver_max_upload_total_bandwidth" value="{{:virtualserver_max_upload_total_bandwidth}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Max bandwidth used by all file transfer clients." /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <a class="unit">{{tr "Bytes/s" /}}</a>
                                        </div>
                                        <div class="container-quota">
                                            <a>{{tr "Quota" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" class="virtualserver_upload_quota" value="{{:virtualserver_upload_quota}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>
                                                            {{tr "Max amount of data in megabytes which could be downloaded." /}}<br>
                                                            {{tr "The quota will be reset on every new month" /}}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <a class="unit">{{tr "MiB/mo" /}}</a>
                                        </div>
                                        <div class="container-used-quota">
                                            <a>{{tr "Quota this month" /}}</a>
                                            <div class="value virtualserver_month_bytes_uploaded">{{>virtualserver_month_bytes_uploaded}}</div>
                                        </div>
                                        <div class="container-used-quota">
                                            <a>{{tr "Quota total" /}}</a>
                                            <div class="value virtualserver_total_bytes_uploaded">{{>virtualserver_total_bytes_uploaded}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="body container-security">
                            <div class="container-top container-antiflood">
                                <div class="header">{{tr "Anti Flood" /}}</div>
                                <div class="content">
                                    <div class="container-reduce">
                                        <a>{{tr "Reduced points every ½ seconds." /}}</a>
                                        <div class="input-boxed">
                                            <input type="number" min="0" class="virtualserver_antiflood_points_tick_reduce" value="{{:virtualserver_antiflood_points_tick_reduce}}">
                                            <div class="container-tooltip">
                                                <img src="img/icon_tooltip.svg"/>
                                                <div class="tooltip">
                                                    <a>{{tr "Flood point count which will be reduced each server tick." /}}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="container-block-commands">
                                        <a>{{tr "Points needed to block commands" /}}</a>
                                        <div class="input-boxed">
                                            <input type="number" min="0" class="virtualserver_antiflood_points_needed_command_block" value="{{:virtualserver_antiflood_points_needed_command_block}}">
                                            <div class="container-tooltip">
                                                <img src="img/icon_tooltip.svg"/>
                                                <div class="tooltip">
                                                    <a>{{tr "If the value has been reached, the users command will be rejected." /}}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="container-block-ip">
                                        <a>{{tr "Points needed to ban IP" /}}</a>
                                        <div class="input-boxed">
                                            <input type="number" min="0" class="virtualserver_antiflood_points_needed_ip_block" value="{{:virtualserver_antiflood_points_needed_ip_block}}">
                                            <div class="container-tooltip">
                                                <img src="img/icon_tooltip.svg"/>
                                                <div class="tooltip">
                                                    <a>{{tr "If the value has been reached, the user will be temporally banned from the server." /}}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="container-bottom container-security">
                                <div class="header">{{tr "Misc" /}}</div>
                                <div class="content">
                                    <div class="container-encryption">
                                        <a>{{tr "Channel voice data encryption" /}}</a>
                                        <div class="input-boxed">
                                            <select class="virtualserver_codec_encryption_mode">
                                                <option value="0" {{if virtualserver_codec_encryption_mode == 0}}selected{{/if}}>{{tr "Edit per channel individually" /}}</option>
                                                <option value="1" {{if virtualserver_codec_encryption_mode == 1}}selected{{/if}}>{{tr "Globally disabled" /}}</option>
                                                <option value="2" {{if virtualserver_codec_encryption_mode == 2}}selected{{/if}}>{{tr "Globally enabled (recommended)" /}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="container-security-level">
                                        <a>{{tr "Needed Security Level" /}}</a>
                                        <div class="input-boxed">
                                            <input type="number" min="8" class="virtualserver_needed_identity_security_level" value="{{:virtualserver_needed_identity_security_level}}">
                                            <div class="container-tooltip">
                                                <img src="img/icon_tooltip.svg"/>
                                                <div class="tooltip">
                                                    <a>{{tr "Required security level to join the server. (Only applies to TeamSpeak identities)" /}}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="container-security-level-description">
                                        <a></a>
                                        <div class="container-description">
                                            <a>{{tr "Level &nbsp;<b>0 - 23</b> generated in seconds" /}}</a>
                                            <a>{{tr "Level <b>24 - 29</b> generated in minutes" /}}</a>
                                            <a>{{tr "Level <b>29 - 34</b> generated in hours" /}}</a>
                                            <a>{{tr "Level <b>35 - 39</b> generated in days" /}}</a>
                                            <a>{{tr "Level <b>40 - 43</b> generated in months" /}}</a>
                                            <a>{{tr "Level <b>44 - 23</b> generated in years" /}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="body container-messages">
                            <div class="container-top container-channel">
                                <div class="header">{{tr "Channel" /}}</div>
                                <div class="content">
                                    <div class="container-topic">
                                        <div class="container-title">
                                            <a>{{tr "Topic" /}}</a>
                                        </div>
                                        <div class="input-boxed">
                                            <input class="virtualserver_default_channel_topic" value="{{:virtualserver_default_channel_topic}}">
                                            <div class="container-tooltip">
                                                <img src="img/icon_tooltip.svg"/>
                                                <div class="tooltip">
                                                    <a>{{tr "The default server channel topic" /}}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="container-description">
                                        <div class="container-title">
                                            <a>{{tr "Description" /}}</a>
                                        </div>
                                        <textarea class="input-boxed virtualserver_default_channel_description" placeholder="{{tr 'Enter a message...' /}}">{{>virtualserver_default_channel_description}}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="container-bottom container-client">
                                <div class="header">{{tr "Client" /}}</div>
                                <div class="content">
                                    <div class="container-description">
                                        <a>{{tr "Description" /}}</a>
                                        <div class="input-boxed">
                                            <input class="virtualserver_default_client_description" value="{{:virtualserver_default_client_description}}">
                                            <div class="container-tooltip">
                                                <img src="img/icon_tooltip.svg"/>
                                                <div class="tooltip">
                                                    <a>{{tr "The default client description" /}}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="body container-misc">
                            <div class="container-top container-default-groups">
                                <div class="header">{{tr "Default groups" /}}</div>
                                <div class="content">
                                    <div class="container-default-group">
                                        <a>{{tr "Server Group" /}}</a>
                                        <select class="input-boxed virtualserver_default_server_group">
                                        </select>
                                    </div>
                                    <div class="container-default-group">
                                        <a>{{tr "Music Bot Group" /}}</a>
                                        <select class="input-boxed virtualserver_default_music_group">
                                        </select>
                                    </div>
                                    <div class="container-default-group">
                                        <a>{{tr "Channel Admin Group" /}}</a>
                                        <select class="input-boxed virtualserver_default_channel_admin_group">
                                        </select>
                                    </div>
                                    <div class="container-default-group">
                                        <a>{{tr "Channel Group" /}}</a>
                                        <select class="input-boxed virtualserver_default_channel_group">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="container-bottom">
                                <div class="container-left container-complains">
                                    <div class="header">{{tr "Complains" /}}</div>
                                    <div class="content">
                                        <div class="container-ban-threshold">
                                            <a>{{tr "Complains until ban" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" class="virtualserver_complain_autoban_count" value="{{:virtualserver_complain_autoban_count}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Amount of complains against one user until he receives an automated ban." /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-ban-time">
                                            <a>{{tr "Autoban time" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" class="virtualserver_complain_autoban_time" value="{{:virtualserver_complain_autoban_time}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Amount of complains against one user until he receives an automated ban." /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-cooldown">
                                            <a>{{tr "Complain auto remove" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" class="virtualserver_complain_remove_time" value="{{:virtualserver_complain_remove_time}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Time in seconds after a complain expires." /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-right container-others">
                                    <div class="header">{{tr "Others" /}}</div>
                                    <div class="content">
                                        <div class="container-silence">
                                            <a>{{tr "Clients before silence" /}}</a>
                                            <div class="input-boxed">
                                                <input type="number" min="0" class="virtualserver_min_clients_in_channel_before_forced_silence" value="{{:virtualserver_min_clients_in_channel_before_forced_silence}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Minimum clients within a channel to enforce silence." /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-dim">
                                            <a>{{tr "Priority speaker dim factor" /}}</a>
                                            <div class="input-boxed">
                                                <input min="-100" max="100" class="virtualserver_priority_speaker_dimm_modificator" value="{{:virtualserver_priority_speaker_dimm_modificator}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "Dim factor in '%' for priority speakers." /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="container-gfx-url">
                                            <a>{{tr "Default delete delay" /}}</a>
                                            <div class="input-boxed">
                                                <input class="virtualserver_channel_temp_delete_delay_default" value="{{:virtualserver_channel_temp_delete_delay_default}}">
                                                <div class="container-tooltip">
                                                    <img src="img/icon_tooltip.svg"/>
                                                    <div class="tooltip">
                                                        <a>{{tr "The default temporary channel delete delay." /}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-buttons">
                    <button class="btn btn-danger button-cancel">{{tr "Cancel" /}}</button>
                    <button class="btn btn-success button-save">{{tr "Save Changes" /}}</button>
                </div>
            </div>
        </script>

        <!-- Template for the settings -->
        <script class="jsrender-template" id="tmpl_settings" type="text/html">
            <div class="inner-container">
                <div class="left">
                    <div class="entry group">{{tr "General Settings" /}}</div>
                    <div class="entry" container="general-application">{{tr "Application" /}}</div>
                    <div class="entry" container="general-language">{{tr "Language" /}}</div>
                    <!-- <div class="entry" container="general-updates">{{tr "Updates" /}}</div> -->
                    <div class="entry" container="general-chat">{{tr "Chat" /}}</div>

                    <div class="entry group">{{tr "Audio" /}}</div>
                    <div class="entry" container="audio-microphone">{{tr "Microphone" /}}</div>
                    <div class="entry" container="audio-speaker">{{tr "Speaker" /}}</div>
                    <div class="entry" container="audio-sounds">{{tr "Sounds" /}}</div>

                    <div class="entry group">{{tr "Identity" /}}</div>
                    <div class="entry" container="identity-profiles">{{tr "Profiles" /}}</div>
                    <div class="entry" container="identity-forum">{{tr "TeaForo connection" /}}</div>
                </div>
                <div class="container-seperator vertical" seperator-id="seperator-settings"></div>
                <div class="right">
                    <div class="container general-application">
                        <label>
                            <div class="checkbox">
                                <input type="checkbox" class="option-hostbanner-background">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr 'Disabled backrounds within the hostbanner' /}}</a>
                        </label>
                        <div class="container-font-size">
                            <a>{{tr "Font size" /}}</a>
                            <select class="input-boxed option-font-size">
                                <option value="-1" style="display: none;">Custom</option>
                                <option value="10">Extra Small (10px)</option>
                                <option value="12">Small (12px)</option>
                                <option value="14">Normal (14px)</option>
                                <option value="16">Large (16px)</option>
                                <option value="18">Extra Large (18px)</option>
                            </select>
                        </div>
                        <label>
                            <div class="checkbox">
                                <input type="checkbox" class="option-all-permissions">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Show all permissions in permission editor. Even if their assignment don't make sense." /}}</a>
                        </label>
                    </div>
                    <div class="container general-language">
                        <div class="container-selected">
                            <a>{{tr "Current language:" /}}</a>
                            <div class="selected-language">
                                <div class="country flag-de"></div>
                                {{tr "German" /}}
                            </div>
                        </div>
                        <div class="container-list">
                            <div class="entries"></div>
                            <div class="buttons">
                                <div class="restart-note">
                                    <button class="btn btn-danger button-restart">{{tr "Restart" /}}</button>
                                    <a>{{tr "Attention: Changing the client language require a client restart!" /}}</a>
                                </div>
                                <div class="spacer"></div>
                                <button class="btn btn-success button-add-repository">{{tr "Add repository" /}}</button>
                            </div>
                        </div>
                    </div>
                    <div class="container general-updates">{{tr "GU" /}}</div>
                    <div class="container general-chat">
                        <label>
                            <div class="checkbox">
                                <input type="checkbox" class="option-fixed-timestamps">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr 'Fixed chat timestamp (Disables "2 seconds ago"... etc)' /}}</a>
                        </label>
                        <label>
                            <div class="checkbox">
                                <input type="checkbox" class="option-colloquial-timestamps">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr 'Colloquial chat timestamp (Enables "Yesterday at ..." or "Today at ...")' /}}</a>
                        </label>
                        <label>
                            <div class="checkbox">
                                <input type="checkbox" class="option-instant-channel-switch">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Switch to channel chat on select" /}}</a>
                        </label>
                        <label>
                            <div class="checkbox">
                                <input type="checkbox" class="option-instant-client-switch">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Switch to client info on client select" /}}</a>
                        </label>

                        <!-- format -->
                        <label>
                            <div class="checkbox">
                                <input type="checkbox" class="option-colored-emojies">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Colored emojies within chat" /}}</a>
                        </label>
                        <label>
                            <div class="checkbox">
                                <input type="checkbox" class="option-url-tagging">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Automatically detect valid URL's and tag them with [url]" /}}</a>
                        </label>
                        <label>
                            <div class="checkbox">
                                <input type="checkbox" class="option-support-markdown">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Enables markdown input support for chat. " /}}</a>
                        </label>
                        <div class="container-icon-size">
                            <div>{{tr "Chat-icon size:" /}}<a class="value">100%</a></div>
                            <div class="container-slider">
                                <div class="filler" style="width: 30%"></div>
                                <div class="thumb container-tooltip" style="left: 30%">
                                    <div class="tooltip">
                                        <a>86%</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="container audio-microphone">
                        <div class="left">
                            <div class="header">
                                <a>{{tr "Select your Microphone Device" /}}</a>
                                <button class="btn btn-info button-update">{{tr "Update" /}}</button>
                            </div>
                            <div class="body container-devices">
                            </div>
                        </div>
                        <div class="right">
                            <div class="header">
                                <a>{{tr "Microphone Settings" /}}</a>
                            </div>
                            <div class="body">
                                <div class="container-volume">
                                    <a>{{tr "Volume" /}}</a>
                                    <div class="container-slider">
                                        <div class="filler" style="width: 30%"></div>
                                        <div class="thumb container-tooltip" style="left: 30%">
                                            <div class="tooltip">
                                                <a>86%</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-select-vad">
                                    <div class="fieldset">
                                        <div class="container container-ppt">
                                            <label class="container-ppt">
                                                <div class="ratio-button">
                                                    <input type="radio" name="vad-type" value="push_to_talk">
                                                    <div class="mark"></div>
                                                </div>
                                                <a>{{tr "Push to Talk" /}}</a>
                                            </label>
                                            <div class="container-button">
                                                <button class="btn">{{tr "T" /}}</button>
                                            </div>
                                        </div>
                                        <div class="container container-vad">
                                            <label>
                                                <div class="ratio-button">
                                                    <input type="radio" name="vad-type" value="threshold">
                                                    <div class="mark"></div>
                                                </div>
                                                <a>{{tr "Voice activity detection" /}}</a>
                                            </label>
                                        </div>
                                        <div class="container container-always-active">
                                            <label>
                                                <div class="ratio-button">
                                                    <input type="radio" name="vad-type" value="active">
                                                    <div class="mark"></div>
                                                </div>
                                                <a>{{tr "Always active" /}}</a>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="header">
                                <a>{{tr "Sensitivity Settings" /}}</a>
                            </div>
                            <div class="body">
                                <div class="container-sensitivity">
                                    <div class="container-activity-bar">
                                        <div class="bar-hider" style="width: 80%;"></div>
                                        <div class="bar-error"></div>
                                        <div class="thumb container-tooltip" style="left: 20%">
                                            <div class="tooltip">
                                                <a>20%</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="header">
                                <a>{{tr "Advanced Settings" /}}</a>
                            </div>
                            <div class="body">
                                <div class="container-advanced">
                                    <div class="container-ppt-delay">
                                        <label>
                                            <div class="checkbox">
                                                <input type="checkbox" class="delay-enabled">
                                                <div class="mark"></div>
                                            </div>
                                            <a>{{tr "Delay on Push to Talk" /}}</a>
                                        </label>
                                        <div class="container-input">
                                            <input type="number" class="delay-time" min="0" max="4" step="0.1">
                                            <label>{{tr "Sec" /}}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container audio-speaker">
                        <div class="left">
                            <div class="header">
                                <a>{{tr "Select your Speaker Device" /}}</a>
                                <button class="btn btn-info button-update">{{tr "Update" /}}</button>
                            </div>
                            <div class="body">
                                <div class="container-devices">
                                </div>
                                <div class="buttons">
                                    <a class="container-error"></a>
                                    <div class="spacer"></div>
                                    <button class="btn btn-success button-test-sound">{{tr "Play test Sound" /}}
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="header">
                                <a>{{tr "Speaker Settings" /}}</a>
                            </div>
                            <div class="body">
                                <div class="container-volume-master">
                                    <a>{{tr "Master Volume" /}} <span class="container-value"></span></a>
                                    <div class="container-slider">
                                        <div class="filler" style="width: 30%"></div>
                                        <div class="thumb container-tooltip" style="left: 30%">
                                            <div class="tooltip">
                                                <a>86%</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-volume-soundpack">
                                    <a>{{tr "Soundpack Volume" /}} <span class="container-value"></span></a>
                                    <div class="container-slider">
                                        <div class="filler" style="width: 30%"></div>
                                        <div class="thumb container-tooltip" style="left: 30%">
                                            <div class="tooltip">
                                                <a>86%</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container audio-sounds">
                        <div class="left">
                            <div class="header">
                                <a>{{tr "Sound list" /}}</a>
                            </div>
                            <div class="body">
                                <div class="container-sounds">
                                </div>
                                <div class="container-filter">
                                    <div class="form-group">
                                        <label class="bmd-label-floating">{{tr "Search for a sound" /}}</label>
                                        <input type="text" class="form-control input-sounds-filter">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="header">
                                <a>{{tr "Sound settings" /}}</a>
                            </div>
                            <div class="body">
                                <label>
                                    <div class="checkbox">
                                        <input type="checkbox" class="option-overlap-same">
                                        <div class="mark"></div>
                                    </div>
                                    <a>{{tr "Overlap same sounds" /}}</a>
                                </label>
                                <label>
                                    <div class="checkbox">
                                        <input type="checkbox" class="option-mute-output">
                                        <div class="mark"></div>
                                    </div>
                                    <a>{{tr "Mute sounds when output is muted" /}}</a>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="container identity-profiles">
                        <div class="left">
                            <div class="header">
                                <a>{{tr "Your Profiles" /}}</a>
                                <button class="btn btn-info button-create">{{tr "Create new" /}}</button>
                            </div>
                            <div class="body">
                                <div class="container-profiles">
                                </div>
                                <div class="buttons">
                                    <button class="btn btn-danger button-delete">{{tr "Delete selected" /}}</button>
                                    <div class="spacer"></div>
                                    <button class="btn btn-success button-set-default">{{tr "Select as Default" /}}
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="header">
                                <a>{{tr "Profile Settings" /}}</a>
                                <div class="spacer"></div>
                                <div class="container-avatar"></div>
                                <button class="btn btn-info button-change-avatar">{{tr "Change Avatar" /}}</button>
                                <!-- AVATAR -->
                            </div>
                            <div class="body">
                                <div class="container-general">
                                    <div class="form-group">
                                        <label>{{tr "Profile Name" /}}</label>
                                        <input class="form-control profile-name">
                                        <div class="invalid-feedback">{{tr "Profile name is invalid" /}}</div>
                                    </div>
                                    <div class="form-group">
                                        <label>{{tr "Default Nickname" /}}</label>
                                        <input class="form-control profile-default-name"
                                               placeholder="Another TeaSpeak user">
                                    </div>
                                    <div class="form-group">
                                        <label>{{tr "Identity Type" /}}</label>
                                        <select class="form-control profile-identity-type">
                                            <option value="unset" style="display: none">{{tr "Unset" /}}</option>
                                            <option value="teaforo">{{tr "Forum Account" /}}</option>
                                            <option value="teamspeak">{{tr "TeamSpeak Identity" /}}</option>
                                            <option value="nickname">{{tr "Nickname (Debug only!)" /}}</option>
                                        </select>
                                        <div class="invalid-feedback">{{tr "Invalid identity type" /}}</div>
                                    </div>
                                </div>
                                <div class="container-teamspeak">
                                    <div class="container-valid">
                                        <div class="form-group">
                                            <label>{{tr "Unique-ID" /}}</label>
                                            <input class="form-control unique-id" readonly>
                                        </div>
                                        <div class="container-level">
                                            <div class="form-group">
                                                <label>{{tr "Level" /}}</label>
                                                <input class="form-control current-level" readonly>
                                            </div>
                                            <button class="btn button-improve">{{tr "Improve" /}}</button>
                                        </div>
                                    </div>
                                    <div class="container-invalid">
                                        {{tr "You have'nt generated/imported an identity." /}}<br>
                                        {{tr "Generate a new one or import one." /}}
                                    </div>
                                    <div class="buttons">
                                        <button class="btn btn-danger button-new">{{tr "Generate new" /}}</button>

                                        <div>
                                            <button class="btn btn-danger button-import">{{tr "Import identity" /}}
                                            </button>
                                            <button class="btn btn-success button-export">{{tr "Export identity" /}}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="container-teaforo">
                                    <div class="container-valid">
                                        {{tr "You're using your forum account as identification" /}}
                                    </div>
                                    <div class="container-invalid">
                                        <a>{{tr "You cant use your TeaSpeak forum account. You're not connected with your forum Account!" /}}</a>
                                        <button class="btn btn-success button-setup">{{tr "Setup your connection" /}}
                                        </button>
                                    </div>
                                </div>
                                <div class="container-nickname">
                                    <div class="form-group">
                                        <label>{{tr "Nickname" /}}</label>
                                        <input class="form-control nickname">
                                        <div class="invalid-feedback">{{tr "Invalid nickname. Name must be at least 5 characters" /}}
                                        </div>
                                    </div>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container identity-forum">
                        <div class="fill">
                            <div class="header">
                                <a>{{tr "TeaSpeak forum connection" /}}</a>
                                <div class="spacer"></div>
                                <button class="btn btn-danger show-connected button-logout">{{tr "Logout" /}}</button>
                            </div>
                            <div class="body">
                                <div class="container-connected show-connected">
                                    <a>You're successfully connected with your forum account</a>
                                    <div><a>Username: </a><a class="forum-username"></a></div>
                                    <div><a>Premium: </a><a class="forum-premium"></a></div>
                                </div>
                                <div class="container-disconnected show-disconnected">
                                    <a>{{tr "You're not connected with the TeaSpeak forum." /}}</a>
                                    <div class="container-login">
                                        <a>{{tr "Login the the TeaSpeak forum:" /}}</a>
                                        <a class="container-error">Login to the forum failed.</a>
                                        <div class="form-group">
                                            <label class="bmd-label-floating">{{tr "Username" /}}</label>
                                            <input class="form-control input-username">
                                        </div>
                                        <div class="form-group">
                                            <label class="bmd-label-floating">{{tr "Password" /}}</label>
                                            <input class="form-control input-password" type="password">
                                        </div>
                                        <div class="container-button">
                                            <div class="g-recaptcha"></div>
                                            <button class="btn btn-success button-login">{{tr "Login" /}}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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>
                <div class="container-status"><a></a></div>
                <fieldset class="">
                    <div class="container-text">
                        <label>
                            <div class="radio-button">
                                <input type="radio" name="type" value="text"/>
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Import from text" /}}</a>
                        </label>
                        <div class="form-group">
                            <label>{{tr "Identity Data" /}}</label>
                            <input class="form-control input-identity-text" placeholder="{{tr 'Please paste your identity data here' /}}"/>
                        </div>
                    </div>
                    <div class="container-file">
                        <label>
                            <div class="radio-button">
                                <input type="radio" name="type" value="file"/>
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Import from file" /}}</a>
                        </label>
                        <button class="btn btn-brown button-load-file">{{tr "Select file" /}}</button>
                        <a class="current-file">{{tr "No file selected" /}}</a>
                    </div>
                </fieldset>
                <input type="file" class="file-selector"/>
                <div class="footer">
                    <button class="btn btn-success button-import">{{tr "Import" /}}</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_settings-teamspeak_improve" type="text/html">
            <div>
                <div class="options">
                    <div class="title">{{tr "Identity: "/}} {{>identity_name}}</div>
                    <div class="row">
                        <div class="form-group identity-unique-id">
                            <label>{{tr "Unique ID:" /}}</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>
                    <div class="row">
                        <div class="form-group identity-target-level">
                            <div class="bmd-label-static">
                                <div class="container-tooltip">
                                    <img src="img/icon_tooltip.svg"/>
                                    <div class="tooltip">
                                        <a>
                                            {{tr "The number of threads used to improve your identity" /}}<br>
                                            {{tr "The optimal value is equal to the amount of kernel threads." /}}
                                        </a>
                                    </div>
                                </div>
                                {{tr "Target level: " /}}
                            </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="container-tooltip">
                                    <img src="img/icon_tooltip.svg"/>
                                    <div class="tooltip">
                                        <a>{{tr "A value of zero means unlimited. Improve until you abort" /}}</a>
                                    </div>
                                </div>
                                {{tr "Threads: " /}}
                            </div>
                            <input class="form-control" value="2" type="number" min="1" max="32">
                        </div>
                    </div>
                </div>
                <div class="status">
                    <div class="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>
                <div class="buttons">
                    <button class="btn btn-danger 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">{{tr "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> <!-- for the renderer -->
                <div class="info">
                    <div>{{tr "Change volume for client "/}} <node key="client"></node> :</div>
                    <a class="value">error: value</a>
                </div>
                <div class="container-slider">
                    <div class="filler" style="width: 30%"></div>
                    <div class="thumb container-tooltip" style="left: 30%">
                        <div class="tooltip">
                            <a>86%</a>
                        </div>
                    </div>
                </div>
                <div class="buttons">
                    <button class="btn btn-blue button-reset">{{tr "Reset" /}}</button>
                    <div class="spacer"></div>
                    {{if !local}}
                    <button class="btn btn-success button-apply">{{tr "Apply" /}}</button>
                    {{/if}}
                    <button class="btn btn-danger button-cancel">{{tr "Cancel" /}}</button>
                    <button class="btn btn-success button-save">{{tr "Save" /}}</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_change_latency" type="text/html">
            <div> <!-- for the renderer -->
                <div class="info">
                    <div>{{tr "Change latency for client "/}} <node key="client"></node></div>
                </div>
                <div class="container-min">
                    <div class="container-value">
                        {{tr "Min buffer: "/}}
                        <a class="value">20ms</a>
                    </div>
                    <div class="container-slider">
                        <div class="filler" style="width: 30%"></div>
                        <div class="thumb container-tooltip" style="left: 30%">
                            <div class="tooltip">
                                <a>86%</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-max">
                    <div class="container-value">
                        {{tr "Max buffer: "/}}
                        <a class="value">20ms</a>
                    </div>
                    <div class="container-slider">
                        <div class="filler" style="width: 30%"></div>
                        <div class="thumb container-tooltip" style="left: 30%">
                            <div class="tooltip">
                                <a>86%</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="buttons">
                    <button class="btn btn-blue button-reset">{{tr "Reset" /}}</button>
                    {{if have_flush}}
                    <button class="btn btn-blue button-flush">{{tr "Flush buffer" /}}</button>
                    {{/if}}
                    <div class="spacer"></div>
                    <button class="btn btn-danger button-cancel">{{tr "Cancel" /}}</button>
                    <button class="btn btn-success button-close">{{tr "Close" /}}</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_newcomer" type="text/html">
            <div> <!-- required for the renderer -->

            </div>
        </script>

        <!-- Permission overview -->
        <script class="jsrender-template" id="tmpl_server_permissions" type="text/html">
            <div class="container">
                <div class="left">
                    <div class="header">
                        <div class="entry"><a class="container-selected">{{tr "error" /}}</a></div>
                    </div>
                    <div class="body">
                        <div class="container container-view-server-groups">
                            <div class="container-group-list">
                                <div class="list-groups">
                                    <div class="entries"></div>
                                </div>
                                <div class="container-buttons">
                                    <div class="button button-add">
                                        <img src="img/icon_group_add.svg">
                                    </div>
                                    <div class="button button-rename">
                                        <img src="img/icon_group_rename.svg">
                                    </div>
                                    <div class="button button-duplicate">
                                        <img src="img/icon_group_duplicate.svg">
                                    </div>
                                    <div class="button button-delete">
                                        <img src="img/icon_group_delete.svg">
                                    </div>
                                </div>
                            </div>
                            <div class="container-client-list">
                                <div class="container-current-group"></div>
                                <div class="list-clients">
                                    <div class="entries"></div>
                                </div>
                                <div class="container-buttons">
                                    <div class="button button-add">
                                        <img src="img/icon_group_add.svg">
                                    </div>
                                    <div class="button button-delete">
                                        <img src="img/icon_group_delete.svg">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container container-view-channel-groups">
                            <div class="list-groups">
                                <div class="entries"></div>
                            </div>
                            <div class="container-buttons">
                                <div class="button button-add">
                                    <img src="img/icon_group_add.svg">
                                </div>
                                <div class="button button-rename">
                                    <img src="img/icon_group_rename.svg">
                                </div>
                                <div class="button button-duplicate">
                                    <img src="img/icon_group_duplicate.svg">
                                </div>
                                <div class="button button-delete">
                                    <img src="img/icon_group_delete.svg">
                                </div>
                            </div>
                        </div>
                        <div class="container container-view-channel-permissions">
                            <div class="list-channel">
                                <div class="entries"></div>
                            </div>
                        </div>
                        <div class="container container-view-client-permissions">
                            <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" disabled>
                                    </div>

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

                                    <div class="form-group">
                                        <label>{{tr "Client database ID:" /}}</label>
                                        <input class="form-control client-dbid" disabled>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="container container-view-client-channel-permissions">
                            <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" disabled>
                                    </div>

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

                                    <div class="form-group">
                                        <label>{{tr "Client database ID:" /}}</label>
                                        <input class="form-control client-dbid" disabled>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="list-channel">
                                <div class="entries"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-seperator vertical" seperator-id="seperator-permissions"></div>
                <div class="right">
                    <div class="header">
                        <div class="entry sg"><a>{{tr "Server Groups" /}}</a></div>
                        <div class="entry cg"><a>{{tr "Channel Groups" /}}</a></div>
                        <div class="entry chp"><a>{{tr "Channel Permissions" /}}</a></div>
                        <div class="entry clp"><a>{{tr "Client Permissions" /}}</a></div>
                        <div class="entry clchp"><a>{{tr "Client Channel Permissions" /}}</a></div>
                    </div>
                    <div class="body">
                        <div class="container container-view-server-groups">
                            <div class="permission-editor"></div>
                        </div>
                        <div class="container container-view-channel-groups">
                            <div class="permission-editor"></div>
                        </div>
                        <div class="container container-view-channel-permissions">
                            <div class="permission-editor"></div>
                        </div>
                        <div class="container container-view-client-permissions">
                            <div class="permission-editor"></div>
                        </div>
                        <div class="container container-view-client-channel-permissions">
                            <div class="permission-editor"></div>
                        </div>
                    </div>
                </div>
            </div>
        </script>
        <script class="jsrender-template" id="tmpl_server_group_assignment" type="text/html">
            <div class="group-assignment-list">
                <a>{{tr "Changing groups of" /}}
                    <node key="client"/>
                </a>
                <div class="group-list">
                    {{for groups}}
                    <div class="group-entry">
                        <label class="checkbox {{if default}}disabled{{/if}}">
                            <input type="checkbox" group-id="{{:id}}" {{if default}}default disabled="true" {{/if}}>
                            <div class="mark"></div>
                        </label>
                        <node key="icon_{{>id}}"></node>
                        <a>{{>name}} ({{>id}})</a>
                    </div>
                    {{/for}}
                </div>
            </div>
            <div class="container-buttons">
                <div class="btn btn-danger button-remove-all">{{tr "Remove all groups" /}}</div>
                <div class="btn btn-success button-close">{{tr "Close" /}}</div>
            </div>
        </script>
        <script class="jsrender-template" id="tmpl_group_add" type="text/html">
            <div class="form-group">
                <label>{{tr "Group name"/}}</label>
                <input type="text" class="form-control group-name">
                <div class="invalid-feedback">{{tr "Invalid group name" /}}</div>
            </div>
            <div class="form-group">
                <label>{{tr "Created group should have the type:" /}}</label>
                <select class="form-control group-type">
                    <option class="group-type-template">{{tr "Template group" /}}</option>
                    <option class="group-type-regular" selected>{{tr "Regular group" /}}</option>
                    {{if server_group}}
                    <option class="group-type-query">{{tr "ServerQuery group" /}}</option>
                    {{/if}}
                </select>
            </div>
            <div class="buttons">
                <button class="btn btn-danger button-cancel">{{tr "Cancel" /}}</button>
                <button class="btn btn-success button-create">{{tr "Create" /}}</button>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_permission_editor_canvas" type="text/html">
            <div class="container-permissions container-permissions-canvas">
                <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="entry-editor-container"></div>
                        </div>
                    </div>
                    <div class="container-mode container-mode-private">
                        <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>
        <script class="jsrender-template" id="tmpl_permission_editor_html" type="text/html">
            <div class="container-permissions container-permissions-html">
                <div class="container-filter">
                    <button class="btn btn-success button-toggle-clients">Hide clients in group</button>
                    <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="container-switchs">
                        <label class="container-granted-switch" title="{{tr 'Show only permission which are assigned' /}}">
                            <div class="switch">
                                <input type="checkbox" class="filter-granted">
                                <span class="slider">
                                    <span class="dot"></span>
                                </span>
                            </div>
                            <a>{{tr "Assigned only" /}}</a>
                        </label>
                        <label class="container-editable-switch" title="{{tr 'Show only permissions which are editable by yourself' /}}">
                            <div class="switch">
                                <input type="checkbox" class="filter-granted">
                                <span class="slider">
                                    <span class="dot"></span>
                                </span>
                            </div>
                            <a>{{tr "Editable only" /}}</a>
                        </label>
                    </div>
                    <div class="container-icon-select">
                        <div class="button-select-icon icon-preview">
                            <div class="icon-container icon_empty"></div>
                        </div>
                        <div class="container-dropdown">
                            <div class="button">
                                <div class="arrow down"></div>
                            </div>
                            <div class="dropdown">
                                <div class="entry button-select-icon">Edit icon</div>
                                <div class="entry button-icon-remove">Remove icon</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-mode container-mode-permissions">
                    <div class="container-permission-list">
                        <div class="entry header">
                            <div class="column-name"><a title="{{tr 'Permission Name' /}}">{{tr "Permission Name" /}}</a></div>
                            <div class="column-value"><a title='{{tr "Value" /}}'>{{tr "Value" /}}</a></div>
                            <div class="column-skip"><a title='{{tr "Skip" /}}'>{{tr "Skip" /}}</a></div>
                            <div class="column-negate"><a title='{{tr "Negate" /}}'>{{tr "Negate" /}}</a></div>
                            <div class="column-granted"><a title='{{tr "Granted" /}}'>{{tr "Granted" /}}</a></div>
                        </div>

                        <div class="body">
                        </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>
        </script>

        <!-- General management templates -->
        <script class="jsrender-template" id="tmpl_ban_list" type="text/html">
        <div> <!-- required for jquery -->
            <div class="left">
                <div class="head">
                    <div class="category category-add">
                        <a>{{tr "Create" /}}</a>
                        <div class="background"></div>
                    </div>
                    <div class="category category-edit">
                        <a>{{tr "Edit" /}}</a>
                        <div class="background"></div>
                    </div>
                </div>
                <div class="body">
                    <div class="container-add">
                        <div class="container-no-permissions">
                            <a>{{tr "You dont have permission to create bans" /}}</a>
                        </div>
                        <div class="group group-name">
                            <a>{{tr "Name" /}}</a>
                            <div class="input-boxed">
                                <input placeholder="{{tr 'Username to ban' /}}" />
                            </div>
                        </div>
                        <div class="group group-ip">
                            <a>{{tr "IP" /}}</a>
                            <div class="input-boxed">
                                <input placeholder="{{tr 'IP to ban' /}}" />
                            </div>
                        </div>
                        <!-- Currently not supported by TeaSpeak
                        <div class="group group-interpret">
                            <a>{{tr "Interpret IP / Name as" /}}</a>
                            <div class="input-boxed">
                                <select class="ban-regex-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="group group-unique-id">
                            <a>{{tr "Unique ID" /}}</a>
                            <div class="input-boxed">
                                <input placeholder="{{tr 'Client unique id to ban' /}}" />
                            </div>
                        </div>
                        <div class="group group-hwid">
                            <a>{{tr "Hardware ID" /}}</a>
                            <div class="input-boxed">
                                <input placeholder="{{tr 'No Hardware ID given' /}}" />
                                <div class="container-tooltip">
                                    <img src="img/icon_tooltip.svg"/>
                                    <div class="tooltip">
                                        <p>
                                            {{tr "The hardware id has different meanings, depends on the users agent<br>" +
                                            "TeaClient: The hardware id will be generate out of some unique system id's<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 a random generate string within the system registry" /}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="group group-reason">
                            <a>{{tr "Reason" /}}</a>
                            <textarea class="input-boxed" placeholder="{{tr 'No reason given' /}}"></textarea>
                        </div>
                        <div class="group group-duration">
                            <a>{{tr "Duration" /}}</a>
                            <div class="container-value">
                                <div class="input-boxed value">
                                    <input type="number" value="1" min="1" />
                                    <div class="container-tooltip tooltip-max-time">
                                        <img src="img/icon_tooltip.svg"/>
                                        <div class="tooltip">
                                            <a class="max">error: max duration</a>
                                        </div>
                                    </div>
                                </div>
                                <select class="input-boxed">
                                    <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>
                        <label class="group-global">
                            <div class="checkbox">
                                <input type="checkbox">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Use this ban as a global ban" /}}</a>
                        </label>
                    </div>
                    <div class="container-edit">
                        <div class="group group-name">
                            <a>{{tr "Name" /}}</a>
                            <div class="input-boxed">
                                <input placeholder="{{tr 'No username given' /}}" />
                            </div>
                        </div>
                        <div class="group group-ip">
                            <a>{{tr "IP" /}}</a>
                            <div class="input-boxed">
                                <input placeholder="{{tr 'No IP given' /}}" />
                            </div>
                        </div>
                        <!-- Currently not supported by TeaSpeak
                        <div class="group group-interpret">
                            <a>{{tr "Interpret IP / Name as" /}}</a>
                            <div class="input-boxed">
                                <select class="ban-regex-type">
                                    <option value="wildcard-4">{{tr "Wildcard IPv4" /}}</option>
                                    <option value="wildcard-6">{{tr "Wildcard IPv6" /}}</option>
                                    <option value="fixed">{{tr "Fixed string" /}}</option>
                                    <option value="regex">{{tr "Regular Expression" /}}</option>
                                </select>
                            </div>
                        </div>
                        -->
                        <div class="group group-unique-id">
                            <a>{{tr "Unique ID" /}}</a>
                            <div class="input-boxed">
                                <input placeholder="{{tr 'No Unique ID given' /}}" />
                            </div>
                        </div>
                        <div class="group group-hwid">
                            <a>{{tr "Hardware ID" /}}</a>
                            <div class="input-boxed">
                                <input placeholder="{{tr 'No Hardware ID given' /}}" />
                                <div class="container-tooltip">
                                    <img src="img/icon_tooltip.svg"/>
                                    <div class="tooltip">
                                        <p>
                                            {{tr "The hardware id has different meanings, depends on the users agent<br>" +
                                            "TeaClient: The hardware id will be generate out of some unique system id's<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 a random generate string within the system registry" /}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="group group-reason">
                            <a>{{tr "Reason" /}}</a>
                            <textarea class="input-boxed" placeholder="{{tr 'No reason given' /}}"></textarea>
                        </div>
                        <div class="group group-duration">
                            <a>{{tr "Duration" /}}</a>
                            <div class="container-value">
                                <div class="input-boxed value">
                                    <input type="number" value="1" min="1" />
                                    <div class="container-tooltip tooltip-max-time">
                                        <img src="img/icon_tooltip.svg"/>
                                        <div class="tooltip">
                                            <a class="detailed">error: details</a>
                                            <a class="max">error: max duration</a>
                                        </div>
                                    </div>
                                </div>
                                <select class="input-boxed">
                                    <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-creator">
                            <a class="key">{{tr "Creator" /}}</a>
                            <div class="value">
                                error: creator value
                            </div>
                        </div>
                        <div class="group-enforcements">
                            <a class="key">{{tr "Enforcements" /}}</a>
                            <div class="value">
                                <a>43</a>
                                <button class="btn btn-yellow button-enforcement-list">{{tr "Show list" /}}</button>
                            </div>
                        </div>
                        <label class="group-global">
                            <div class="checkbox disabled">
                                <input type="checkbox" disabled>
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "This ban is a global ban" /}}</a>
                        </label>
                    </div>
                </div>
                <div class="buttons">
                    <button class="btn btn-success button-apply">error: button apply</button>
                </div>
            </div>
            <div class="container-seperator vertical" seperator-id="seperator-banlist">
                <div class="top"></div>
            </div>
            <div class="right">
                <div class="container-banlist">
                    <div class="container-filter">
                        <div class="form-group">
                            <label class="bmd-label-floating">{{tr "Filter" /}}</label>
                            <input class="form-control">
                        </div>
                    </div>
                    <div class="container-list">
                        <div class="entry header">
                            <div class="column column-key">{{tr "Name/IP/UID/HWID" /}}</div>
                            <div class="column column-reason">{{tr "Reason" /}}</div>
                            <div class="column column-expires">{{tr "Expires" /}}</div>
                            <div class="column column-delete">&nbsp;</div>
                        </div>
                        <div class="body">
                            <div class="container-empty">
                                <a>error: empty message</a>
                            </div>
                            <div class="container-error">
                                <a>error: no permissions</a>
                            </div>
                            <!-- <div class="entry local"></div> -->
                        </div>
                    </div>
                    <div class="container-options">
                        <label class="container-option">
                            <div class="checkbox">
                                <input type="checkbox" class="option-show-own">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Show only own bans" /}}</a>
                        </label>
                        <label class="container-option">
                            <div class="checkbox">
                                <input type="checkbox" class="option-highlight-own">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Highlight own bans" /}}</a>
                        </label>
                        <button class="btn btn-success button-refresh-banlist">{{tr "Refresh" /}}</button>
                    </div>
                </div>
                <div class="container-triggerlist">
                    <div class="container-filter">
                        <div class="form-group">
                            <label class="bmd-label-floating">{{tr "Filter" /}}</label>
                            <input class="form-control">
                        </div>
                        <div class="container-close">
                            <!-- TODO -->
                        </div>
                    </div>
                    <div class="container-list">
                        <div class="entry header">
                            <div class="column column-properties">{{tr "Properties" /}}</div>
                            <div class="column column-timestamp">{{tr "Timestamp" /}}</div>
                        </div>
                        <div class="body">
                            <div class="container-empty">
                                <a>error: empty message</a>
                            </div>
                            <div class="container-error">
                                <a>error: no permissions</a>
                            </div>
                            <!-- <div class="entry local"></div> -->
                        </div>
                    </div>
                    <div class="container-options">
                        <label class="container-option">
                            <div class="checkbox">
                                <input type="checkbox" class="option-highlight-cause">
                                <div class="mark"></div>
                            </div>
                            <a>{{tr "Highlight cause" /}}</a>
                        </label>
                        <button class="btn btn-success button-refresh-triggerlist">{{tr "Refresh" /}}</button>
                    </div>
                </div>
            </div>
        </div>
        </script>

        <script class="jsrender-template" id="tmpl_client_ban" type="text/html">
            <div> <!-- for the renderer -->
                <div class="container-info">
                    <div class="container container-name">
                        <div class="title">{{tr "Nickname" /}}</div>
                        <div class="value">
                            {{for entries}}
                                {{>name}}<br>
                            {{/for}}
                        </div>
                    </div>
                    <div class="container container-unique-id">
                        <div class="title">{{tr "Unique ID" /}}</div>
                        <div class="value">
                            {{for entries}}
                                {{>unique_id}}<br>
                            {{/for}}
                        </div>
                    </div>
                </div>
                <div class="container-duration">
                    <a>{{tr "Duration" /}}</a>
                    <div class="container-value">
                        <div class="input-boxed value">
                            <input type="number" value="1" min="1" />
                            <div class="container-tooltip tooltip-max-time">
                                <img src="img/icon_tooltip.svg"/>
                                <div class="tooltip">
                                    <a class="max">error: max duration</a>
                                </div>
                            </div>
                        </div>
                        <select class="input-boxed">
                            <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="container-reason">
                    <div class="toolbar">
                        <div class="button button-bold">B</div>
                        <div class="button button-italic">I</div>
                        <div class="button button-underline">U</div>
                        <label class="button button-color">
                            <input type="color" value="#FF0000">
                            <a class="rainbow-letter">C</a>
                        </label>
                    </div>
                    <textarea class="input-boxed ban-reason" placeholder="{{tr 'Ban reason' /}}"></textarea>
                </div>
                <div class="container-criteria">
                    <div class="criteria nickname">
                        <a>{{tr "Nickname and Unique ID" /}}</a>
                        <label class="checkbox">
                            <input type="checkbox">
                            <div class="mark"></div>
                        </label>
                    </div>
                    <div class="criteria ip-address">
                        <a>{{tr "IP-Address" /}}</a>
                        <label class="checkbox">
                            <input type="checkbox">
                            <div class="mark"></div>
                        </label>
                    </div>
                    <div class="criteria hardware-id">
                        <a>{{tr "Hardware ID" /}}</a>
                        <label class="checkbox">
                            <input type="checkbox">
                            <div class="mark"></div>
                        </label>
                    </div>
                </div>
                <div class="container-buttons">
                    <button class="btn btn-danger button-cancel">{{tr "Cancel" /}}</button>
                    <button class="btn btn-success button-apply">{{tr "Ok" /}}</button>
                </div>
            </div>
        </script>

        <!-- TODO: Delete me! -->
        <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> virtualserver!<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 property_client_teaforo_id > 0}}
                <tr>
                    <td>{{tr "TeaSpeak Account:" /}}</td>
                    <td><a href="//forum.teaspeak.de/index.php?members/{{:property_client_teaforo_id}}" target="_blank">{{>property_client_teaforo_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_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>
                        {{if server_peer_address != server_address}}
                        <tr>
                            <td>{{tr "Peer address:" /}}</td>
                            <td>{{>server_peer_address}}</td>
                        </tr>
                        {{/if}}
                        <!--
                        <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-servers"></div>
                <div class="buttons">
                    <div class="spacer"></div>
                    <button class="btn btn-raised btn-primary button-close">{{tr "Close" /}}</button>
                </div>
            </div>
        </script>
        <script class="jsrender-template" id="tmpl_invite" type="text/html">
            <div class="general-properties">
                <div class="form-group property-type">
                    <label>{{tr "Link type:" /}}</label>
                    <select class="form-control">
                        <option value="tea-web">{{tr "TeaWeb" /}}</option>
                        <option value="tea-client">{{tr "TeaClient" /}}</option>
                        <option value="teamspeak">{{tr "TeamSpeak" /}}</option>
                    </select>
                </div>
                <label class="container-settings">
                    <label>
                        <div class="checkbox flag-direct-connect">
                            <input type="checkbox">
                            <div class="mark"></div>
                        </div>

                        <a>{{tr "Connect directly" /}}</a>
                        <!--
                          <div class="help-tip tip-center tip-small">
                                <p>
                                    {{tr "Lets the user directly connect to the server and not open the connect modal" /}}
                                </p>
                            </div>
                        -->
                    </label>
                    <label>
                        <div class="checkbox flag-resolved-address">
                            <input type="checkbox">
                            <div class="mark"></div>
                        </div>

                        <a>{{tr "Use resolved address" /}}</a>
                        <!--
                          <div class="help-tip tip-center tip-small">
                                <p>
                                    {{tr "Use the resolved server address (IP) instead of the given address" /}}
                                </p>
                            </div>
                        -->
                    </label>
                </div>
            </div>
            <textarea class="text-output" readonly></textarea>
            <div class="buttons">
                <button class="btn btn-primary button-copy">
                    <div class="icon client-copy"></div>
                    {{tr "Copy" /}}
                </button>
                <button class="btn btn-primary 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="container"> <!-- required for the seperator -->
                <div class="left">
                    <div class="title">
                        <a>{{tr "Account list" /}}</a>
                        <button class="btn btn-success button-create">{{tr "Create account" /}}</button>
                    </div>
                    <div class="container-list">
                        <div class="container-entries">
                            <div class="container-empty">
                                error: empty
                            </div>
                            <div class="container-error">
                                error: query list
                            </div>
                        </div>
                        <div class="container-search">
                            <button class="btn btn-blue button-update">{{tr "Refresh" /}}</button>
                            <div class="form-group">
                                <label class="bmd-label-floating">{{tr "Search for query" /}}</label>
                                <input type="text" class="form-control filter-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-seperator vertical" seperator-id="seperator-query-manage"></div>
                <div class="right">
                    <div class="title">
                        <a>{{tr "Account details" /}}</a>
                        <button class="btn btn-danger button-delete">{{tr "Delete account" /}}</button>
                    </div>
                    <div class="container-details">
                        <div class="detail login-name">
                            <a class="title">{{tr "Login name" /}}</a>
                            <a class="value">error: login name</a>
                        </div>
                        <div class="detail unique-id">
                            <div class="title">
                                <a>{{tr "Unique ID" /}}</a>
                                <div class="button button-copy">
                                    <div class="icon_em client-copy"></div>
                                </div>
                            </div>
                            <a class="value">error: unique id</a>
                        </div>
                        <div class="detail bound-server">
                            <a class="title">{{tr "Bound server ID" /}}</a>
                            <a class="value">error: bound server</a>
                        </div>

                        <div class="spacer"></div>
                        <div class="buttons">
                            <button class="btn btn-blue button-change-password">{{tr "Change password" /}}</button>
                            <button class="btn btn-blue button-rename">{{tr "Rename Account" /}}</button>
                        </div>
                    </div>
                </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>
                <div class="left">
                    <div class="title">{{tr "Your bookmarks" /}}</div>
                    <div class="container-bookmarks">
                    </div>
                    <div class="buttons">
                        <button class="btn btn-danger button-delete">{{tr "Delete" /}}</button>
                        <button class="btn btn-purple button-add-folder">{{tr "Add Folder" /}}</button>
                        <button class="btn btn-success button-add-bookmark">{{tr "Add Bookmark" /}}</button>
                    </div>
                </div>
                <div class="container-seperator vertical" seperator-id="seperator-bookmarks"></div>
                <div class="right">
                    <div class="header">
                        <div class="container-name">{{tr "Your bookmarks" /}}</div>
                        <div class="container-address"></div>
                    </div>
                    <div class="container-settings">
                        <div class="group">
                            <div class="row">
                                <div class="key">{{tr "Bookmark Name" /}}</div>
                                <div class="value">
                                    <div class="input-boxed">
                                        <input class="input-bookmark-name">
                                        <!--
                                        <div class="container-tooltip">
                                            <img src="img/icon_tooltip.svg"/>
                                            <div class="tooltip">
                                                <a>{{tr "The displayed name of this bookmark." /}}</a>
                                            </div>
                                        </div>
                                        -->
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="key">{{tr "Connect Profile" /}}</div>
                                <div class="value">
                                    <div class="input-boxed">
                                        <select class="input-connect-profile">
                                        </select>
                                        <!--
                                        <div class="container-tooltip">
                                            <img src="img/icon_tooltip.svg"/>
                                            <div class="tooltip">
                                                <a>{{tr "The profile which you're connection with when you're using the bookmark." /}}</a>
                                            </div>
                                        </div>
                                        -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="group">
                            <div class="row">
                                <div class="key">{{tr "Server Address" /}}</div>
                                <div class="value">
                                    <div class="input-boxed">
                                        <input class="input-server-address">
                                        <!--
                                        <div class="container-tooltip">
                                            <img src="img/icon_tooltip.svg"/>
                                            <div class="tooltip">
                                                <a>{{tr "The server address of the bookmark. The port is separated via a colon" /}}</a>
                                            </div>
                                        </div>
                                        -->
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="key">{{tr "Server Password" /}}</div>
                                <div class="value">
                                    <div class="input-boxed">
                                        <input type="password" class="input-server-password">
                                        <!--
                                        <div class="container-tooltip">
                                            <img src="img/icon_tooltip.svg"/>
                                            <div class="tooltip">
                                                <a>{{tr "The server port of the bookmark" /}}</a>
                                            </div>
                                        </div>
                                        -->
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="key">{{tr "Default Channel" /}}</div>
                                <div class="value">
                                    <div class="input-boxed">
                                        <input class="input-default-channel" placeholder="{{tr 'Not yet implemented' /}}" disabled>
                                        <!--
                                        <div class="container-tooltip">
                                            <img src="img/icon_tooltip.svg"/>
                                            <div class="tooltip">
                                                <a>{{tr "The server port of the bookmark" /}}</a>
                                            </div>
                                        </div>
                                        -->
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="key">{{tr "Channel Password" /}}</div>
                                <div class="value">
                                    <div class="input-boxed">
                                        <input type="password" class="input-default-channel-password" placeholder="{{tr 'Not yet implemented' /}}" disabled>
                                        <!--
                                        <div class="container-tooltip">
                                            <img src="img/icon_tooltip.svg"/>
                                            <div class="tooltip">
                                                <a>{{tr "The server port of the bookmark" /}}</a>
                                            </div>
                                        </div>
                                        -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="group info">
                            <div class="container-image">
                                <img src="img/serveredit_1.png">
                            </div>
                            <div class="container-properties">
                                <div class="row">
                                    <a class="key">{{tr "Server name" /}}</a>
                                    <div class="value server-name">
                                        error: name
                                    </div>
                                </div>
                                <div class="row">
                                    <a class="key">{{tr "Server region" /}}</a>
                                    <div class="value server-region">
                                        error: region
                                    </div>
                                </div>
                                <div class="row">
                                    <a class="key">{{tr "Last ping" /}}</a>
                                    <div class="value server-ping">
                                        error: ping
                                    </div>
                                </div>
                                <div class="row">
                                    <a class="key">{{tr "Last client count" /}}</a>
                                    <div class="value server-client-count">
                                        error: last client
                                    </div>
                                </div>
                                <div class="row">
                                    <a class="key">{{tr "Your connection" /}}</a>
                                    <div class="value server-connection-count">
                                        error: connection count
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="buttons">
                        <button class="btn btn-success button-connect-tab">{{tr "Connect in a new tab" /}}</button>
                        <button class="btn btn-success button-connect">{{tr "Connect" /}}</button>
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_icon_select" type="text/html">
            <div class="container-icons">
                <div class="left">
                    <div class="header">{{tr "Remote" /}}</div>
                    <div class="content">
                        <div class="container-icons-list">
                            <div class="container-icons-remote {{if enable_select || enable_delete}}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 occurred" /}}</a>
                            </div>
                        </div>
                        <div class="container-buttons">
                            {{if enable_upload}}
                            <button class="btn btn-success button-upload">{{tr "Upload" /}}</button>
                            {{/if}}
                            {{if enable_delete}}
                            <button class="btn btn-danger button-delete">{{tr "Delete" /}}</button>
                            {{/if}}
                        </div>
                    </div>
                </div>
                <div class="right">
                    <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>
        </script>

        <script class="jsrender-template" id="tmpl_icon_upload" type="text/html">
            <div class="container-select">
                <div class="container-icons"></div>
                <div class="container-buttons">
                    <div class="buttons-manage">
                        <button class="btn btn-primary btn-raised button-add">{{tr "Add icon" /}}</button>
                        <button class="btn btn-danger button-remove">{{tr "Remove selected" /}}</button>
                    </div>
                    <button class="btn btn-primary btn-raised button-upload"></button>

                    <input type="file" class="input-file-upload" accept="image/*" multiple/>
                </div>
            </div>
            <div class="container-upload">
                <div class="container-error">
                    <div class="error-message">You're not connected. Failed to upload icons</div>
                    <button type="button" class="btn btn-danger btn-raised button-upload-abort">{{tr "abort" /}}
                    </button>
                </div>
                <div class="container-process"></div>
                <div class="container-info">
                    <div class="container-info-uploaded">{{tr "Uploaded icons (total | successfully | error): "
                        /}}
                    </div>
                    <div class="uploaded-statistics"></div>
                </div>
                <div class="container-success">
                    <div class="message">Uploaded 10 icons successfully</div>
                    <button type="button" class="btn btn-success btn-raised button-upload-abort">{{tr "okey" /}}
                    </button>
                </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_upload" type="text/html">
            <div class="modal-avatar-upload">
                <div class="container-upload">
                    <div class="bmd-form-group">
                        <button type="button" class="btn btn-primary btn-raised button-select">{{tr "Select avatar"
                            /}}
                        </button>
                        <p>
                            {{tr "Supported image types: SVG, PNG, JPEG" /}}<br>
                            {{tr "Supported image sizes: any" /}}
                        </p>
                        <input type="file" class="file-inputs" accept=".svg, .png, .jpg, .jpeg">
                    </div>
                    <div class="bmd-form-group">
                        <button type="button" class="btn btn-success button-upload">{{tr "Upload avatar" /}}</button>
                        <button type="button" class="btn btn-warning button-delete">{{tr "Delete avatar" /}}</button>
                        <button type="button" class="btn btn-danger button-cancel">{{tr "Cancel" /}}</button>
                    </div>
                </div>
                <div class="container-preview">
                    <a class="title">{{tr "Preview" /}}</a>
                    <div class="previews">
                        <div class="preview preview-client-info">
                            <div class="container-avatar">
                                <div class="avatar">
                                    <img src="#">
                                </div>
                            </div>
                            <a>{{tr "Client info" /}}</a>
                        </div>
                        <div class="preview preview-chat">
                            <div class="container-avatar">
                                <div class="avatar">
                                    <img src="#">
                                </div>
                            </div>
                            <a>{{tr "Chat avatar" /}}</a>
                        </div>
                        <div class="preview preview-chat-entry">
                            <div class="container-avatar">
                                <div class="avatar">
                                    <img src="#">
                                </div>
                            </div>
                            <a>{{tr "Chat list avatar" /}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_about" type="text/html">
            <div class="container-left">
                <div class="container-logo">
                    <img src="https://teaspeak.de/img/teaspeak_cup_animated.png"/>
                </div>
                <div class="copyright">Copyright (c) 2017-2019 TeaSpeak<br>(Markus Hadenfeldt)</div>
                <div class="versions">
                    {{if client}}
                    <div class="version version-native">
                        <a>TeaClient:</a><a class="value version-client">{{>version_client}}</a>
                    </div>
                    <div class="version version-web">
                        <a>UI:</a><a class="value">{{>version_ui}}</a>
                    </div>
                    {{else}}
                    <div class="version version-web">
                        <a>TeaWeb:</a><a class="value">{{>version_client}}</a>
                    </div>
                    {{/if}}
                </div>
            </div>
            <div class="container-right">
                {{if client}}
                <h1>TeaSpeak-Client build <span class="version-client">{{>version_client}}</span><!-- ({{>version_timestamp}}) --></h1>
                {{else}}
                <h1>TeaSpeak-Web build {{>version_client}} <!-- ({{>version_timestamp}}) --></h1>
                <!-- We currently dont have a timestamp for the web client -->
                {{/if}}
                <h2>{{tr "Special thanks" /}}</h2>
                <p>
                    "Яedeemer" (Janni K.)<br>
                    Chromatic-Solutions (Sofian) for the lovely dark design
                </p>
                <h2>{{tr "Contact" /}}</h2>
                <p>
                    {{tr "E-Mail:" /}} <a href="mailto:{{if client}}client{{else}}web{{/if}}.support@teaspeak.de">{{if client}}client{{else}}web{{/if}}.support@teaspeak.de</a><br>
                    {{tr "WWW:" /}} <a href="https://teaspeak.de" target="_blank">https://teaspeak.de</a><br>
                    {{tr "Community:" /}} <a href="https://teaspeak.de" target="_blank">https://forum.teaspeak.de</a>
                </p>
                <h2>{{tr "License" /}}</h2>
                <p>
                    The {{if client}}TeaClient{{else}}TeaWeb{{/if}} application is licensed by MPL-2.0<br>
                    More information here: <a href="https://github.com/TeaSpeak/TeaWeb/blob/master/LICENSE.TXT" target="_blank">https://github.com/TeaSpeak/TeaWeb/blob/master/LICENSE.TXT</a>
                </p>
            </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>

        <script class="jsrender-template" id="tmpl_key_select" type="text/html">
            <div> <!-- required for the renderer-->
                <div class="body">
                    <a>{{tr "Press any key which you want to use." /}}</a>
                    <div class="container-select">
                        <a>Current key:</a>
                        <div class="container-key">
                            <a></a>
                        </div>
                    </div>
                </div>
                <div class="container-buttons">
                    <button class="btn btn-danger button-cancel">{{tr "Cancel" /}}</button>
                    <button class="btn btn-success button-save">{{tr "Save Key" /}}</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_client_info" type="text/html">
            <div> <!-- Important for the renderer -->
                <div class="head">
                    <div class="status-row">
                        <div class="status-entry status-away">
                            <div class="icon_em client-away"></div>
                        </div>
                        <div class="status-entry status-output-muted">
                            <div class="icon_em client-output_muted"></div>
                        </div>
                        <div class="status-entry status-output-disabled">
                            <div class="icon_em client-hardware_output_muted"></div>
                        </div>
                        <div class="status-entry status-input-muted">
                            <div class="icon_em client-input_muted"></div>
                        </div>
                        <div class="status-entry status-input-disabled">
                            <div class="icon_em client-hardware_input_muted"></div>
                        </div>
                    </div>
                    <div class="container-away-message" title="{{tr 'Away message' /}}">
                        <a>A verry long away message, because I want to tell a story. There was a child....A verry long away message, because I want to tell a story. There was a child....A verry long away message, because I want to tell a story. There was a child....A verry long away message, because I want to tell a story. There was a child....A verry long away message, because I want to tell a story. There was a child....A verry long away message, because I want to tell a story. There was a child....A verry long away message, because I want to tell a story. There was a child....A verry long away message, because I want to tell a story. There was a child....</a>
                    </div>
                </div>
                <div class="body">
                    <div class="container-avatar">
                    </div>
                    <div class="container-name"></div>
                    <div class="container-description">
                        <div class="client-description"></div>
                    </div>

                    <div class="container-categories">
                        <div class="categories">
                            <div class="entry" container="container-basic">{{tr "Basic Info" /}}</div>
                            <div class="entry" container="container-groups">{{tr "Groups" /}}</div>
                            <div class="entry" container="container-packets">{{tr "Packets" /}}</div>
                        </div>
                        <div class="bodies">
                            <div class="body container-basic">
                                <div class="left">
                                    <div class="property property-unique-id">
                                        <div class="title">
                                            <a>{{tr "Unique ID" /}}</a>
                                            <div class="container-tooltip">
                                                <img src="img/icon_tooltip.svg"/>
                                                <div class="tooltip">
                                                    <a>{{tr "Database ID:" /}} <span class="value-dbid">error: database id</span></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="value">
                                            <a>error: unique id</a>
                                            <div class="button button-copy">
                                                <div class="icon_em client-copy"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="property property-teaforo">
                                        <div class="title">
                                            <a>{{tr "TeaForo Connection" /}}</a>
                                        </div>
                                        <div class="value">
                                            <a>This will be a really long string...</a>
                                        </div>
                                    </div>
                                    <div class="property property-version">
                                        <div class="title">
                                            <a>{{tr "Version" /}}</a>
                                            <div class="container-tooltip">
                                                <img src="img/icon_tooltip.svg"/>
                                                <div class="tooltip">
                                                    <a>{{tr "Build timestamp:" /}} <span class="value-timestamp">error: no timestamp</span></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="value">
                                            <a>This will be a really long string...</a>
                                        </div>
                                    </div>
                                    <div class="property property-country">
                                        <div class="title">
                                            <a>{{tr "Country" /}}</a>
                                        </div>
                                        <div class="value">
                                            <a>This will be a really long string...</a>
                                        </div>
                                    </div>
                                    <div class="property property-ip">
                                        <div class="title">
                                            <a>{{tr "IP Address" /}}</a>
                                        </div>
                                        <div class="value">
                                            <a>error: IP</a>
                                            <div class="button button-copy">
                                                <div class="icon_em client-copy"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="spacer"></div>
                                <div class="right">
                                    <div class="property property-first-connected">
                                        <div class="title">
                                            <a>{{tr "First connected" /}}</a>
                                        </div>
                                        <div class="value">
                                            <a>error: first connected</a>
                                        </div>
                                    </div>
                                    <div class="property property-connect-count">
                                        <div class="title">
                                            <a>{{tr "Connect count" /}}</a>
                                        </div>
                                        <div class="value">
                                            <a>error: connect count</a>
                                        </div>
                                    </div>
                                    <div class="property property-online-since">
                                        <div class="title">
                                            <a>{{tr "Online since" /}}</a>
                                        </div>
                                        <div class="value">
                                            <a>error: online since</a>
                                        </div>
                                    </div>
                                    <div class="property property-idle-time">
                                        <div class="title">
                                            <a>{{tr "Idle time" /}}</a>
                                        </div>
                                        <div class="value">
                                            <a>error: idle time</a>
                                        </div>
                                    </div>
                                    <div class="property property-ping">
                                        <div class="title">
                                            <a>{{tr "Ping" /}}</a>
                                        </div>
                                        <div class="value">
                                            <a>error: ping</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="body container-groups">
                                <div class="left">
                                    <!-- <div class="title">{{tr "Server Groups" /}}</div> -->
                                    <div class="container">
                                        <div class="entries">
                                        </div>
                                        <div class="container-default-groups">
                                            <a>{{tr "Client has no own server group" /}}</a>
                                        </div>
                                    </div>
                                    <div class="buttons">
                                        <button class="btn btn-success button-group-add">{{tr "Manage client server groups" /}}</button>
                                    </div>
                                </div>
                                <!--
                                <div class="spacer"></div>
                                <div class="right">
                                    <div class="title">{{tr "Channel Groups" /}}</div>
                                    <div class="container">
                                    </div>
                                </div>
                                -->
                            </div>
                            <div class="body container-packets">
                                <div class="left">
                                    <div class="statistic statistic-packet-loss">
                                        <div class="title">
                                            <a>{{tr "Packetloss" /}}</a>
                                        </div>
                                        <div class="downstream">
                                            <a>{{tr "Downstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                        <div class="upstream">
                                            <a>{{tr "Upstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                    </div>
                                    <div class="statistic statistic-transmitted-packets">
                                        <div class="title">
                                            <a>{{tr "Transmitted Packets" /}}</a>
                                        </div>
                                        <div class="downstream">
                                            <a>{{tr "Downstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                        <div class="upstream">
                                            <a>{{tr "Upstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                    </div>
                                    <div class="statistic statistic-transmitted-bytes">
                                        <div class="title">
                                            <a>{{tr "Transmitted Bytes" /}}</a>
                                        </div>
                                        <div class="downstream">
                                            <a>{{tr "Downstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                        <div class="upstream">
                                            <a>{{tr "Upstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="spacer"></div>
                                <div class="right">
                                    <div class="statistic statistic-quota">
                                        <div class="title">
                                            <a>{{tr "Used/Max file transfer quota" /}}</a>
                                        </div>
                                        <div class="downstream">
                                            <a>{{tr "Downstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                        <div class="upstream">
                                            <a>{{tr "Upstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                    </div>
                                    <div class="statistic statistic-bandwidth-second">
                                        <div class="title">
                                            <a>{{tr "Bandwidth last second" /}}</a>
                                        </div>
                                        <div class="downstream">
                                            <a>{{tr "Downstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                        <div class="upstream">
                                            <a>{{tr "Upstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                    </div>
                                    <div class="statistic statistic-bandwidth-minute">
                                        <div class="title">
                                            <a>{{tr "Bandwidth last minute" /}}</a>
                                        </div>
                                        <div class="downstream">
                                            <a>{{tr "Downstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                        <div class="upstream">
                                            <a>{{tr "Upstream" /}}</a>
                                            <a class="value"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_channel_info" type="text/html">
            <div> <!-- Important for the renderer -->
                <div class="row">
                    <div class="column channel-type">
                        <a class="title">{{tr "Channel Type" /}}</a>
                        <div class="value">error: channel type</div>
                    </div>
                    <div class="column chat-mode">
                        <a class="title">{{tr "Chat mode" /}}</a>
                        <div class="value">error: chat mode</div>
                    </div>
                    <div class="column current-clients">
                        <a class="title">{{tr "Current clients" /}}</a>
                        <div class="value">error: current clients</div>
                    </div>
                </div>
                <div class="row">
                    <div class="column audio-codec">
                        <a class="title">{{tr "Audio Codec" /}}</a>
                        <div class="value">error: audio codec</div>
                    </div>
                    <div class="column audio-encrypted">
                        <a class="title">{{tr "Audio encrypted" /}}</a>
                        <div class="value">error: audio encrypted</div>
                    </div>
                    <div class="column flag-password">
                        <a class="title">{{tr "Password protected" /}}</a>
                        <div class="value">error: password protected</div>
                    </div>
                </div>
                <div class="row topic"> <!-- only visible if set! -->
                    <div class="column">
                        <a class="title">{{tr "Topic" /}}</a>
                        <div class="value">error: channel topic</div>
                    </div>
                </div>
                <div class="container-description"> <!-- only visible if set -->
                    <a class="title">
                        {{tr "Description" /}}
                        <div class="button-copy">
                            <div class="icon client-copy"></div>
                        </div>
                    </a>
                    <div class="value">
                        error: channel description
                    </div>
                    <div class="no-value">{{tr "Channel has no description" /}}</div>
                </div>
                <div class="container-buttons">
                    <button class="btn btn-success button-update">{{tr "Refresh" /}}</button>
                </div>
            </div>
        </script>

        <script class="jsrender-template" id="tmpl_server_info" type="text/html">
            <div> <!-- required for the renderer -->
                <div class="container-top hostbanner">
                </div>
                <div class="container-body">
                    <div class="group">
                        <div class="container-image">
                            <img src="img/serveredit_1.png">
                        </div>
                        <div class="container-properties">
                            <div class="row">
                                <a class="key">{{tr "Server name" /}}</a>
                                <div class="value server-name">
                                    error: name
                                </div>
                            </div>
                            <div class="row">
                                <a class="key">{{tr "Server region" /}}</a>
                                <div class="value server-region">
                                    error: region
                                </div>
                            </div>
                            <div class="row">
                                <a class="key">{{tr "Slots" /}}</a>
                                <div class="value server-slots">
                                    error: slots
                                </div>
                            </div>
                            <div class="row">
                                <a class="key">{{tr "First run" /}}</a>
                                <div class="value server-first-run">
                                    error: first run
                                </div>
                            </div>
                            <div class="row">
                                <a class="key">{{tr "Uptime" /}}</a>
                                <div class="value server-uptime">
                                    error: uptime
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="group reverse">
                        <div class="container-image">
                            <img src="img/serveredit_2.png">
                        </div>
                        <div class="container-properties">
                            <div class="row">
                                <a class="key">{{tr "IP Address" /}}</a>
                                <div class="value server-ip">
                                    error: ip
                                </div>
                            </div>
                            <div class="row">
                                <a class="key">{{tr "Version" /}}</a>
                                <div class="value server-version">
                                    <div class="container-tooltip">
                                        <img src="img/icon_tooltip.svg"/>
                                        <div class="tooltip">
                                            <a></a>
                                        </div>
                                    </div>
                                    <a></a>
                                </div>
                            </div>
                            <div class="row">
                                <a class="key">{{tr "Platform" /}}</a>
                                <div class="value server-platform">
                                    error: platform
                                </div>
                            </div>
                            <div class="container-network">
                                <div class="container-button">
                                    <button class="btn btn-purple button-show-bandwidth">{{tr "Show Bandwidth" /}}</button>
                                </div>
                                <div class="right">
                                    <div class="row">
                                        <a class="key">{{tr "Average ping" /}}</a>
                                        <div class="value server-ping">
                                            error: average ping
                                        </div>
                                    </div>
                                    <div class="row">
                                        <a class="key">{{tr "Average packet loss" /}}</a>
                                        <div class="value server-packet-loss">
                                            error: average packet loss
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="group">
                        <div class="container-image">
                            <img src="img/serveredit_3.png">
                        </div>
                        <div class="container-properties">
                            <div class="row">
                                <a class="key">{{tr "Global unique ID" /}}</a>
                                <div class="value server-unique-id">
                                    error: unique id
                                </div>
                            </div>
                            <div class="row">
                                <a class="key">{{tr "Current Channels" /}}</a>
                                <div class="value server-channel-count">
                                    error: channel count
                                </div>
                            </div>
                            <div class="row">
                                <a class="key">{{tr "Voice data encryption" /}}</a>
                                <div class="value server-voice-encryption">
                                    error: voice encryption
                                </div>
                            </div>
                            <div class="row">
                                <a class="key">{{tr "Minimal security level" /}}</a>
                                <div class="value server-min-security-level">
                                    error: security level
                                </div>
                            </div>
                            <div class="row">
                                <a class="key">{{tr "Complains until ban" /}}</a>
                                <div class="value server-complains">
                                    error: complains
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container-buttons">
                        <button class="btn btn-success button-update">{{tr "Refresh" /}}</button>
                        <button class="btn btn-danger button-close">{{tr "Close" /}}</button>
                    </div>
                </div>
            </div>
        </script>
        <script class="jsrender-template" id="tmpl_server_info_bandwidth" type="text/html">
            <div> <!-- required for the renderer -->
                <div class="top">
                    <div class="container-image">
                        <img src="img/serveredit_3.png"> <!-- TODO Get the right image! -->
                    </div>
                    <div class="container-stats">
                        <div class="statistic statistic-packets">
                            <a>{{tr "Transmitted packets" /}}</a>
                            <div class="values">
                                <a class="upload" title="{{tr 'Upload bandwidth' /}}">error: upload</a>
                                <a class="download" title="{{tr 'Download bandwidth' /}}">error: download</a>
                            </div>
                        </div>
                        <div class="statistic statistic-bytes">
                            <a>{{tr "Transmitted bytes" /}}</a>
                            <div class="values">
                                <a class="upload" title="{{tr 'Upload bandwidth' /}}">error: upload</a>
                                <a class="download" title="{{tr 'Download bandwidth' /}}">error: download</a>
                            </div>
                        </div>
                        <div class="statistic statistic-ft-bytes">
                            <a>{{tr "Transferred file transfer bytes" /}}</a>
                            <div class="values">
                                <a class="upload" title="{{tr 'Upload bandwidth' /}}">error: upload</a>
                                <a class="download" title="{{tr 'Download bandwidth' /}}">error: download</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="statistic statistic-bandwidth">
                        <a class="title">{{tr "Current bandwidth" /}}</a>
                        <div class="body">
                            <div class="container-canvas">
                                <canvas></canvas>
                            </div>
                            <div class="values">
                                <a class="upload" title="{{tr 'Upload bandwidth' /}}">N Bytes/s</a>
                                <a class="download" title="{{tr 'Download bandwidth' /}}">N Bytes/s</a>
                            </div>
                        </div>
                    </div>
                    <div class="statistic statistic-ft-bandwidth">
                        <a class="title">{{tr "Current file transfer bandwidth" /}}</a>
                        <div class="body">
                            <div class="container-canvas">
                                <canvas></canvas>
                            </div>
                            <div class="values">
                                <a class="upload" title="{{tr 'Upload bandwidth' /}}">N Bytes/s</a>
                                <a class="download" title="{{tr 'Download bandwidth' /}}">N Bytes/s</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </script>
    </body>
</html>