TeaWeb/shared/html/templates.html

5207 lines
299 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>
</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>
<!-- 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-granted-switch">
<label>
<div class="switch">
<input type="checkbox" class="filter-granted">
<span class="slider">
<span class="dot"></span>
</span>
</div>
<!-- <a>{{tr "Show granted permissions only" /}}</a> -->
<a>{{tr "Assigned 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">{{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="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}}</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 {{>version_client}} ({{>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>