TeaWeb/shared/html/templates.html

3181 lines
191 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">
<div class="button btn_connect container-connect" title="{{tr 'Connect to a server' /}}">
<div class="icon_x32 client-connect"></div>
</div>
<div class="button-dropdown container-disconnect" title="{{tr 'Disconnect from server' /}}" style="display: none">
<div class="buttons">
<div class="button icon_x32 client-disconnect btn_disconnect"></div>
<div class="button-dropdown">
<div class="arrow down"></div>
</div>
</div>
<div class="dropdown" style="width: 350px">
<div class="btn_disconnect"><div class="icon client-disconnect"></div><a>{{tr "Disconnect from current server" /}}</a></div>
<div class="btn_connect"><div class="icon client-connect"></div><a>{{tr "Connect to a server" /}}</a></div>
</div>
</div>
<!--
<div class="button btn_disconnect" title="{{tr 'Disconnect from server' /}}" style="display: none">
<div class="icon_x32 client-disconnect"></div>
</div>
-->
<div class="button-dropdown btn_bookmark" title="{{tr 'Bookmarks' /}}">
<div class="buttons">
<div class="button icon_x32 client-bookmark_manager btn_bookmark_list"></div>
<div class="button-dropdown">
<div class="arrow down"></div>
</div>
</div>
<div class="dropdown bookmark-dropdown" style="width: 350px">
<div class="btn_bookmark_list"><div class="icon client-bookmark_manager"></div><a>{{tr "Manage bookmarks" /}}</a></div>
<div class="btn_bookmark_add"><div class="icon client-bookmark_add"></div><a>{{tr "Add current server to bookmarks" /}}</a></div>
<div class="btn_bookmark_remove"><div class="icon client-bookmark_remove"></div><a>{{tr "Remove current server to bookmarks" /}}</a></div>
<hr>
</div>
</div>
<div class="divider"></div>
<div class="hide-small button-dropdown btn_away" title="{{tr 'Toggle away status' /}}">
<div class="buttons">
<div class="button icon_x32 client-away btn_away_toggle"></div>
<div class="button-dropdown">
<div class="arrow down"></div>
</div>
</div>
<div class="dropdown" style="width: 350px">
<div class="btn_away_disable"><div class="icon client-present"></div><a>{{tr "Go online" /}}</a></div>
<div class="btn_away_enable"><div class="icon client-away"></div><a>{{tr "Set away on this server" /}}</a></div>
<div class="btn_away_message"><div class="icon client-away"></div><a>{{tr "Set away message on this server" /}}</a></div>
<hr class="btn_away_message_global"> <!-- applied to this HR this class because it needs to get hidden as well if we dont have global settings -->
<div class="btn_away_enable_global"><div class="icon client-away"></div><a>{{tr "Set away for all servers" /}}</a></div>
<div class="btn_away_message_global"><div class="icon client-away"></div><a>{{tr "Set away message for all servers" /}}</a></div>
<div class="btn_away_disable_global"><div class="icon client-present"></div><a>{{tr "Go online for all servers" /}}</a></div>
</div>
</div>
<div class="hide-small button btn_mute_input">
<div class="icon_x32 client-input_muted" title="{{tr 'Mute/unmute microphone' /}}"></div>
</div>
<div class="hide-small button btn_mute_output">
<div class="icon_x32 client-output_muted" title="{{tr 'Mute/unmute headphones' /}}"></div>
</div>
<div class="show-small button-dropdown dropdown-audio" title="{{tr 'Audio settings' /}}">
<div class="buttons">
<div class="button button-display icon_x32 client-music"></div>
<div class="button-dropdown">
<div class="arrow down"></div>
</div>
</div>
<div class="dropdown">
<div class="btn_mute_input" title="{{tr 'Mute/unmute microphone' /}}">
<div class="icon client-input_muted"></div>
<a>{{tr "Mute/unmute microphone" /}}</a>
</div>
<div class="btn_mute_output" title="{{tr 'Mute/unmute headphones' /}}">
<div class="icon client-output_muted"></div>
<a>{{tr "Mute/unmute headphones" /}}</a>
</div>
</div>
</div>
<div class="divider"></div>
<div class="button button-subscribe-mode">
<div class="icon_x32" title="{{tr 'Toggle channel subscribe mode' /}}"></div>
</div>
<div class="hide-small button-dropdown btn_token" title="{{tr 'Use token' /}}">
<div class="buttons">
<div class="button icon_x32 client-token btn_token_use"></div>
<div class="button-dropdown">
<div class="arrow down"></div>
</div>
</div>
<div class="dropdown">
<div class="btn_token_list"><div class="icon client-token"></div><a>{{tr "List tokens" /}}</a></div>
<div class="btn_token_use"><div class="icon client-token_use"></div><a>{{tr "Use token" /}}</a></div>
</div>
</div>
<div style="width: 100%"></div>
<div class="show-small button-dropdown dropdown-servertools" title="{{tr 'Server tools' /}}">
<div class="buttons">
<div class="button button-display icon_x32 client-virtualserver_edit"></div>
<div class="button-dropdown">
<div class="arrow down"></div>
</div>
</div>
<div class="dropdown right">
<div class="button-playlist-manage" title="{{tr 'Playlists' /}}">
<div class="icon icon-playlist-manage"></div>
<a>{{tr "Playlists" /}}</a>
</div>
<div class="btn_banlist" title="{{tr 'Banlist' /}}">
<div class="icon client-ban_list"></div>
<a>{{tr "Banlist" /}}</a>
</div>
<div class="btn_permissions" title="{{tr 'View/edit permissions' /}}">
<div class="icon client-permission_overview"></div>
<a>{{tr "View/edit permissions" /}}</a>
</div>
<div class="btn_query_toggle" title="{{tr 'Show/hide server queries' /}}">
<div class="icon client-toggle_server_query_clients"></div>
<a class="query-text"></a>
</div>
<div class="btn_query_manage" title="{{tr 'Manage server queries' /}}">
<div class="icon client-server_query"></div>
<a>{{tr "Manage server queries" /}}</a>
</div>
</div>
</div>
<div class="hide-small button button-playlist-manage" title="{{tr 'Playlists' /}}">
<div class="icon_x32 icon-playlist-manage"></div>
</div>
<div class="hide-small button btn_banlist" title="{{tr 'Banlist' /}}">
<div class="icon_x32 client-ban_list"></div>
</div>
<div class="hide-small button btn_permissions" title="{{tr 'View/edit permissions' /}}">
<div class="icon_x32 client-permission_overview"></div>
</div>
<!-- the query button -->
<div class="hide-small button-dropdown btn_query" title="{{tr 'Show/hide server queries' /}}">
<div class="buttons">
<div class="button icon_x32 client-server_query btn_query_toggle"></div>
<div class="button-dropdown">
<div class="arrow down"></div>
</div>
</div>
<div class="dropdown display_left">
<div class="btn_query_toggle"><div class="icon client-toggle_server_query_clients"></div><a class="query-text"></a></div>
<div class="btn_query_manage"><div class="icon client-server_query"></div><a>{{tr "Manage server queries" /}}</a></div>
<!-- <div class="btn_query_create"><div class="icon client-away"></div><a>{{tr "Create server query login" /}}</a></div> -->
</div>
</div>
<div class="divider"></div>
<div class="button btn_open_settings" title="{{tr 'Edit global client settings' /}}">
<div class="icon_x32 client-settings"></div>
</div>
</div>
</div>
<div class="container-connection-handlers scrollbar" id="connection-handlers">
<div class="connection-handlers"> </div>
<div class="container-scroll">
<div class="button-scroll button-scroll-left">
<div class="icon client-arrow_left"></div>
</div>
<div class="button-scroll button-scroll-right disabled">
<div class="icon client-arrow_right"></div>
</div>
</div>
</div>
<div class="container-app-main">
<div class="container-channel-chat">
<!-- Channel tree -->
<div class="container-channel-tree main_container">
<div class="channel-tree" id="channelTree"></div>
</div>
<div class="container-seperator horizontal" seperator-id="seperator-channel-chat"></div>
<!-- Chat window -->
<div class="main_container container-chat" id="chat"> </div>
</div>
<div class="container-seperator vertical" seperator-id="seperator-main-info"></div>
<div id="select_info" class="main_container container-info"> </div> <!-- Selection info -->
</div>
</div>
</div>
<div id="contextMenu" class="context-menu"></div>
</script>
<script class="jsrender-template" id="tmpl_select_info" type="text/html">
<div class="select_info" style="width: 100%; max-width: 100%">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="container-banner"></div>
<!-- <div class="container-seperator horizontal" seperator-id="seperator-hostbanner-info"></div> -->
<div class="container-select-info"></div>
</div>
</script>
<script class="jsrender-template" id="tmpl_frame_chat" type="text/html">
<div class="container-frame-chat">
<div class="messages">
<div class="message_box"></div>
</div>
<div class="chats"></div>
<div class="input">
<!--<div contentEditable="true" class="input_box"></div>-->
<div class="form-group">
<textarea id="input-chat-input"
type="text"
class="form-control input-message client-chat-box-field"
placeholder="{{tr 'enter a chat message...' /}}"
autocomplete="off"></textarea>
</div>
<button class="btn btn-primary button-send">{{tr "Send" /}}</button>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_modal" type="text/html">
<div class="modal fade" tabindex="-1" role="dialog" style="padding-right: 8%; padding-left: 8%;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: unset;">
<div class="modal-content" style="{{if full_size}}flex-grow: 1{{/if}}">
<div class="modal-header {{if header_class}}{{:header_class}}{{/if}}">
<node key="modal_header"></node>
{{if closeable}}
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{{/if}}
</div>
<div class="modal-body">
<node key="modal_body"></node>
</div>
{{if modal_footer}}
<div class="modal-footer">
<node key="modal_footer"></node>
</div>
{{/if}}
</div>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_modal_input" type="text/html">
<div class="modal fade" tabindex="-1" role="dialog" style="padding-right: 8%; padding-left: 8%;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: unset;">
<div class="modal-content">
<div class="modal-header modal-header-input">
<node key="modal_header"></node>
{{if closeable}}
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{{/if}}
</div>
<div class="modal-body modal-body-input">
<node key="question"></node>
<div class="form-group container-value {{if field_title}}with-title{{/if}}">
{{if field_title}}
<label for="input-modal-input" class="bmd-label-floating">{{>field_title}}</label>
{{/if}}
<!-- placeholder="ts.teaspeak.de" -->
<!-- aria-describedby="input-connect-address-help" -->
<input id="input-modal-input"
type="text"
class="form-control"
{{if field_placeholder}} placeholder="{{>field_placeholder}}"{{/if}}
autocomplete="off"
>
{{if error_message || field_label}}
<div class="container-help-feedback">
{{if error_message}}
<div class="invalid-feedback">{{>error_message}}</div>
{{/if}}
{{if field_label}}
<span class="bmd-help">{{>field_label}}</span>
{{/if}}
</div>
{{/if}}
</div>
</div>
<div class="modal-footer modal-footer-button-group">
<button type="button" class="btn btn-warning button-cancel">{{tr "Cancel" /}}</button>
<button type="button" class="btn btn-raised btn-success button-submit">{{tr "Ok" /}}</button>
</div>
</div>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_modal_yesno" type="text/html">
<div class="modal fade" tabindex="-1" role="dialog" style="padding-right: 8%; padding-left: 8%;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: unset;">
<div class="modal-content">
<div class="modal-header modal-header-warning bg-warning">
<node key="modal_header"></node>
</div>
<div class="modal-body modal-body-input">
<node key="question"></node>
</div>
<div class="modal-footer modal-footer-button-group">
<button type="button" class="btn btn-danger button-no">{{>text_no}}</button>
<button type="button" class="btn btn-raised btn-success button-yes">{{>text_yes}}</button>
</div>
</div>
</div>
</div>
</script>
<!-- Template for the connect modal -->
<script class="jsrender-template" id="tmpl_connect" type="text/html">
<modal>
<modal-header>
<h5 class="modal-title">{{tr "Connect to a server" /}}</h5>
</modal-header>
<modal-body class="modal-connect">
<div class="container-address-password">
<div class="form-group container-address">
<label for="input-connect-address">{{tr "Server Address" /}}</label>
<input id="input-connect-address" type="text" class="form-control" aria-describedby="input-connect-address-help" placeholder="ts.teaspeak.de" autocomplete="off">
<div class="invalid-feedback">{{tr "Please enter a valid server address" /}}</div>
</div>
<div class="form-group container-password">
<label for="input-connect-password-{{>password_id}}" class="bmd-label-floating">{{tr "Server password" /}}</label>
<form autocomplete="off" onsubmit="return false;">
<input id="input-connect-password-{{>password_id}}" type="password" class="form-control" autocomplete="off">
</form>
</div>
</div>
<div class="form-group container-nickname">
<label for="input-connect-nickname">{{tr "Nickname" /}}</label>
<input id="input-connect-nickname" type="text" class="form-control" aria-describedby="input-connect-nickname-help" placeholder="Another TeaSpeak user">
<div class="invalid-feedback">{{tr "Please enter a valid server nickname" /}}</div>
<!-- <small id="input-connect-nickname-help" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
</div>
<div class="container-profile-manage">
<div class="form-group container-select-profile">
<label for="select-connect-profile" class="bmd-label-floating">{{tr "Connect Profile" /}}</label>
<select class="form-control" id="select-connect-profile"> </select>
<div class="invalid-feedback">{{tr "Selected profile is invalid. Select another one or fix the profile." /}}</div>
</div>
<span class="form-group bmd-form-group container-manage"> <!-- needed to match padding for floating labels -->
<button type="button" class="btn btn-raised button-manage-profiles">{{tr "Profiles" /}}</button>
</span>
</div>
</modal-body>
<modal-footer>
<button type="button" class="btn btn-raised btn-success button-connect">{{tr "Connect" /}}</button>
{{if multi_tab}}
<button type="button" class="btn btn-raised btn-success button-connect-new-tab">{{tr "Connect in a new tab" /}}</button>
{{/if}}
</modal-footer>
</modal>
</script>
<!-- Template for channel create & edit-->
<script class="jsrender-template" id="tmpl_channel_edit" type="text/html">
<div class="align_column general_properties container-channel-edit-general">
<div class="container-name-icon form-row">
<div class="container-name form-group">
<label>{{tr "Name:" /}}</label>
<input class="form-control channel_name" value="{{>channel_name}}"/>
</div>
<div class="container-icon form-group">
<label>{{tr "Icon:" /}}</label>
<input class="form-control">
<span class="bmd-form-group button-select-icon">
<div class="icon-node">
<node key="channel_icon"/>
</div>
</span>
</div>
</div>
<div class="form-group">
<label class="bmd-label-floating">{{tr "Channel password" /}}</label>
<!-- Use a random id to trick the default browser password manager. (I think something like a default password is really useless and -->
<!-- Just display a random value here-->
<input class="form-control channel_password" type="password" id="field_channel_password_{{rnd '0~13377331'/}}" {{if channel_flag_password}} value="WolverinDEV"{{/if}}/>
</div>
<div class="form-group">
<label class="bmd-label-static">{{tr "Topic:" /}}</label>
<input class="form-control channel_topic" value="{{>channel_topic}}"/>
</div>
<div class="form-group">
<label class="bmd-label-static">{{tr "Description:" /}}</label>
<textarea class="form-control channel_description" style="min-height: 30px; max-height: 500px; resize: vertical;">{{>channel_description}}</textarea>
</div>
<!--
<div class="properties">
<a class="key">{{tr "Name:"/}}</a>
<input class="value channel_name" value="{{>channel_name}}"/>
<a class="key">{{tr "Password:"/}}</a>
<input class="value channel_password" type="password" id="field_channel_password_{{rnd '0~13377331'/}}" {{if channel_flag_password}} value="WolverinDEV"{{/if}}/>
<a class="key">{{tr "Topic:"/}}</a>
<input class="value channel_topic" value="{{>channel_topic}}"/>
<a class="key">{{tr "Description:"/}}</a>
<textarea class="value channel_description" style="height: 150px; resize: none">{{>channel_description}}</textarea>
</div>
-->
</div>
<div style="margin-bottom: 5px"></div>
<x-tab>
<x-entry>
<x-tag>{{tr "Standard" /}}</x-tag>
<x-content>
<div class="container-channel-settings-standard settings_standard">
<div class="container-left">
<div>
<a>{{tr "Channel Type" /}}</a><br>
<fieldset class="container-channel-type">
<div class="radio"> <!-- May add class disabled-->
<label>
<input type="radio" name="channel_type" value="temp" {{if !channel_flag_semi_permanent && !channel_flag_permanent}}checked{{/if}}/>
{{tr "Temporary" /}}
</label>
</div>
<div class="radio"> <!-- May add class disabled-->
<label>
<input type="radio" name="channel_type" value="semi" {{if channel_flag_semi_permanent}}checked{{/if}}/>
{{tr "Semi-Permanent" /}}
</label>
</div>
<div class="radio"> <!-- May add class disabled-->
<label>
<input type="radio" name="channel_type" value="perm" {{if channel_flag_semi_permanent}}checked{{/if}}/>
{{tr "Permanent" /}}
</label>
</div>
<hr style="width: 100%;">
<div class="switch">
<label>
<input type="checkbox" name="channel_default" id="default" value="def">
{{tr "Default Channel" /}}
</label>
</div>
</fieldset>
</div>
</div>
<div class="container-divider"></div>
<div class="container-right">
<div class="form-group">
<label class="bmd-label-static">{{tr "Sort this channel after:"/}}</label>
<select class="form-control order_id">
</select>
</div>
<div class="form-group">
<label class="bmd-label-static">{{tr "Needed Talk Power:"/}}</label>
<input class="form-control" type="number" min="0" value="0" name="talk_power">
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Audio" /}}</x-tag>
<x-content>
<div class="container-channel-settings-audio">
<div class="container-presets">
<div class="group_box">
<div class="header">{{tr "Presets" /}}</div>
<div class="content">
<fieldset style="">
<div class="radio">
<label>
<input type="radio" name="voice_template" value="voice_mobile"/>
{{tr "Voice Mobile" /}}
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="voice_template" value="voice_desktop"/>
{{tr "Voice Desktop" /}}
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="voice_template" value="music"/>
{{tr "Music" /}}
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="voice_template" value="custom"/>
{{tr "Custom" /}}
</label>
</div>
</fieldset>
</div>
</div>
</div>
<div class="container-divider"></div>
<div class="container-custom">
<div class="group_box">
<div class="header">{{tr "Custom Settings" /}}</div>
<div class="content">
<div class="custom">
<div class="form-group">
<label class="bmd-label-static">Codec:</label>
<select class="form-control voice_codec">
<option value="speex_narrow">
{{tr "Speex Narrowband" /}}
</option>
<option value="speex_wide">
{{tr "Speex Wideband" /}}
</option>
<option value="speex_ultra_wide">
{{tr "Speex Ultra-Wideband" /}}
</option>
<option value="celt">
{{tr "CELT Mono" /}}
</option>
<option value="opus_voice">
{{tr "Opus Voice" /}}
</option>
<option value="opus_music">
{{tr "Opus Music" /}}
</option>
</select>
</div>
<div class="form-group">
<label class="bmd-label-static">
{{tr "Quality:" /}}
</label>
<input class="form-control voice_quality_slider" type="range" min="1" max="10" value="6">
<small class="text-muted voice_quality_number"></small>
</div>
</div>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Permissions" /}}</x-tag>
<x-content>
<div class="container-channel-settings-permission settings_permissions">
<div class="container-left">
<div class="group_box">
<div class="header">{{tr "Regular needed powers:" /}}</div>
<div class="content">
<div class="form-group">
<label>{{tr "Join:" /}}</label>
<input type="number" min="0" value="0" class="form-control value" permission="i_channel_needed_join_power">
<span class="bmd-help">{{tr "Required power to join this channel" /}}</span>
</div>
<div class="form-group">
<label>{{tr "View:" /}}</label>
<input type="number" min="0" value="0" class="form-control value" permission="i_channel_needed_view_power">
<span class="bmd-help">{{tr "Required power to see this channel" /}}</span>
</div>
<div class="form-group">
<label>{{tr "Subscribe:" /}}</label>
<input type="number" min="0" value="0" class="form-control value" permission="i_channel_needed_description_view_power">
<span class="bmd-help">{{tr "Required power to subscribe to this channel" /}}</span>
</div>
<div class="form-group">
<label>{{tr "Modify:" /}}</label>
<input type="number" min="0" value="0" class="form-control value" permission="i_channel_needed_modify_power">
<span class="bmd-help">{{tr "Required power to modify this channel permissions" /}}</span>
</div>
<div class="form-group">
<label>{{tr "Delete:" /}}</label>
<input type="number" min="0" value="0" class="form-control value" permission="i_channel_needed_delete_power">
<span class="bmd-help">{{tr "Required power to delete this channel" /}}</span>
</div>
<div class="form-group form-placeholder">
<input class="form-control">
</div> <!-- placeholder -->
</div>
</div>
</div>
<div class="container-right">
<div class="group_box">
<div class="header">{{tr "File transfer needed powers:" /}}</div>
<div class="content">
<div class="form-group">
<label>{{tr "Browse:" /}}</label>
<input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_file_browse_power">
<span class="bmd-help">{{tr "Required power to browse all files and directories" /}}</span>
</div>
<div class="form-group">
<label>{{tr "Upload:" /}}</label>
<input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_file_upload_power">
<span class="bmd-help">{{tr "Required power to upload files" /}}</span>
</div>
<div class="form-group">
<label>{{tr "Download:" /}}</label>
<input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_file_download_power">
<span class="bmd-help">{{tr "Required power to download files" /}}</span>
</div>
<div class="form-group">
<label>{{tr "Rename:" /}}</label>
<input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_file_rename_power">
<span class="bmd-help">{{tr "Required power to rename files within this channel" /}}</span>
</div>
<div class="form-group">
<label>{{tr "Directory create:" /}}</label>
<input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_directory_create_power">
<span class="bmd-help">{{tr "Required power to create a directory" /}}</span>
</div>
<div class="form-group">
<label>{{tr "Delete:" /}}</label>
<input type="number" min="0" value="0" class="form-control value" permission="i_ft_needed_file_delete_power">
<span class="bmd-help">{{tr "Required power to delete a directory or file" /}}</span>
</div>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Advanced" /}}</x-tag>
<x-content>
<div class="container container-channel-settings-advanced settings_advanced">
<div class="container-other">
<div class="group_box">
<div class="header">{{tr "Other Settings" /}}</div>
<div class="content">
<div class="form-group">
<label class="bmd-label-static">
{{tr "Phonetic Name:" /}}
</label>
<input class="form-control channel_name_phonetic" value="{{>channel_name_phonetic}}">
</div>
<div class="form-group">
<label class="bmd-label-static">
{{tr "Delete delay:" /}}
</label>
<!-- TODO Implement max? -->
<input class="form-control channel_delete_delay" type="number" min="0" max="99999999" value="{{if channel_delete_delay}}{{:channel_delete_delay}}{{else}}0{{/if}}">
</div>
<div class="form-group">
<div class="switch">
<label>
<input class="channel_codec_is_unencrypted" type="checkbox" name="channel_default" value="def" {{if !channel_codec_is_unencrypted}}checked{{/if}}>
{{tr "Encrypt voice data" /}}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="container-max-users">
<div class="group_box">
<div class="header">{{tr "Max users" /}}</div>
<div class="content max_users">
<fieldset style="">
<div class="form-row">
<div class="radio">
<label>
<input type="radio" name="max_users" value="infinity" {{if channel_flag_maxclients_unlimited}}checked{{/if}}/>
{{tr "Unlimited" /}}
</label>
</div>
</div>
<div class="form-row">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="max_users" value="limited" {{if !channel_flag_maxclients_unlimited}}checked{{/if}}/>
<a>{{tr "Limited" /}}</a>
</label>
</div>
</div>
<div style="margin-left: 5px" class="form-group">
<input class="form-control channel_maxclients" value="{{if channel_maxclients}}{{:channel_maxclients}}{{else}}0{{/if}}" type="number" min="0" max="99999999">
</div>
</div>
</fieldset>
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Family Max users" /}}</div>
<div class="content max_users">
<fieldset>
<div class="form-row">
<div class="radio">
<label>
<input type="radio" name="max_users_family" value="inherited" {{if channel_flag_maxfamilyclients_inherited}}checked{{/if}}/>
{{tr "Inherited" /}}
</label>
</div>
</div>
<div class="form-row">
<div class="radio">
<label>
<input type="radio" name="max_users_family" value="infinity" {{if channel_flag_maxfamilyclients_unlimited}}checked{{/if}}/>
{{tr "Unlimited" /}}
</label>
</div>
</div>
<div class="form-row">
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="max_users_family" value="limited" {{if !channel_flag_maxfamilyclients_unlimited && !channel_flag_maxfamilyclients_inherited}}{{tr "checked" /}}{{/if}}/>
<a>{{tr "Limited" /}}</a>
</label>
</div>
</div>
<div style="margin-left: 5px" class="form-group">
<input class="form-control channel_maxfamilyclients" value="{{if channel_maxfamilyclients}}{{:channel_maxfamilyclients}}{{else}}0{{/if}}" type="number" min="0" max="99999999">
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
</x-tab>
</script>
<script class="jsrender-template" id="tmpl_server_edit" type="text/html">
<modal>
<modal-header>
<h5 class="modal-title">{{tr "Manager the Virtual Server" /}}</h5>
</modal-header>
<modal-body>
<div class="container-server-settings-general">
<div class="container-name-icon form-row">
<div class="container-name form-group">
<label>{{tr "Name:" /}}</label>
<input class="form-control virtualserver_name" value="{{>virtualserver_name}}"/>
</div>
<div class="container-icon form-group">
<label>{{tr "Icon:" /}}</label>
<input class="form-control">
<span class="bmd-form-group button-select-icon">
<div class="icon-node">
<node key="virtualserver_icon"/>
</div>
</span>
</div>
</div>
<div class="form-group">
<label>{{tr "Phonetic Name:" /}}</label>
<input class="form-control virtualserver_name_phonetic" value="{{>virtualserver_name_phonetic}}"/>
</div>
<div class="form-group">
<label>{{tr "Password:" /}}</label>
<input class="form-control virtualserver_password" autocomplete="nope" type="password" id="field_server_password_{{rnd '0~13377331'/}}" {{if virtualserver_flag_password}} value="WolverinDEV"{{/if}}/>
</div>
<hr>
<div class="container-server-settings-slots form-row">
<div class="form-group">
<label>{{tr "Maximum Clients:" /}}</label>
<input type="number" min="0" max="1024" value="{{:virtualserver_maxclients}}" class="form-control virtualserver_maxclients">
</div>
<div class="form-group">
<label>{{tr "Reserved slots:" /}}</label>
<input type="number" min="0" max="{{*: data.virtualserver_maxclients - 1 }}" value="{{:virtualserver_reserved_slots}}" class="form-control virtualserver_reserved_slots">
</div>
</div>
<div class="form-group">
<label>{{tr "Welcome Message:" /}}</label>
<textarea class="form-control virtualserver_welcomemessage">{{>virtualserver_welcomemessage}}</textarea>
</div>
<hr>
</div>
<div style="margin-bottom: 5px"></div>
<x-tab>
<x-entry>
<x-tag>{{tr "Host" /}}</x-tag>
<x-content>
<div class="container-server-settings-host properties_host">
<div class="group_box">
<div class="header">{{tr "Binding" /}}</div>
<div class="content">
<div class="form-group">
<label>{{tr "Host:" /}}</label>
<input class="form-control virtualserver_host" value="{{>virtualserver_host}}"/>
</div>
<div class="form-group">
<label>{{tr "Port:" /}}</label>
<input type="number" min="1" max="65536" value="{{>virtualserver_port}}" class="form-control virtualserver_port"/>
</div>
<a>{{tr "Note: These settings require a virtual server restart to take effect!" /}}</a>
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Host message" /}}</div>
<div class="content">
<div class="form-group">
<label class="bmd-label-static">{{tr "Message:" /}}</label>
<textarea class="form-control virtualserver_hostmessage" value="{{>virtualserver_hostmessage}}"/>
</div>
<div class="form-group">
<label>{{tr "Message Mode:" /}}</label>
<select class="form-control virtualserver_hostmessage_mode">
<option value="none">{{tr "No message" /}}</option>
<option value="log">{{tr "Show message in log" /}}</option>
<option value="modal">{{tr "Show message as modal" /}}</option>
<option value="modal_exit">{{tr "Show message as modal and disconnect the client" /}}</option>
</select>
</div>
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Host banner" /}}</div>
<div class="properties-hostbanner content">
<div class="form-row">
<div class="form-group">
<label>{{tr "URL:" /}}</label>
<input type="url" class="form-control virtualserver_hostbanner_url" value="{{>virtualserver_hostbanner_url}}"/>
</div>
<div class="form-group">
<label>{{tr "Banner Gfx URL:" /}}</label>
<input type="url" class="form-control virtualserver_hostbanner_gfx_url" value="{{>virtualserver_hostbanner_gfx_url}}"/>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>{{tr "Gfx Interval" /}}</label>
<input type="number" pattern="^(0|[0-9]+0)$" value="{{:virtualserver_hostbanner_gfx_interval}}" class="form-control virtualserver_hostbanner_gfx_interval">
</div>
<div class="form-group">
<label>{{tr "Resize" /}}</label>
<select class="form-control virtualserver_hostbanner_mode">
<option value="none">{{tr "Do not adjust" /}}</option>
<option value="ignore_ratio">{{tr "Adjust but ignore ratio aspect" /}}</option>
<option value="keep_ratio">{{tr "Adjust and keep ratio aspect" /}}</option>
</select>
</div>
</div>
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Host Button" /}}</div>
<div class="properties-hostbutton content">
<div class="form-group">
<label>{{tr "Tooltip:" /}}</label>
<input class="form-control virtualserver_hostbutton_tooltip" value="{{>virtualserver_hostbutton_tooltip}}"/>
</div>
<div class="form-row">
<div class="form-group">
<label>{{tr "URL:" /}}</label>
<input type="url" class="form-control virtualserver_hostbutton_url" value="{{>virtualserver_hostbutton_url}}"/>
</div>
<div class="form-group">
<label>{{tr "Icon URL:" /}}</label>
<input type="url" class="form-control virtualserver_hostbutton_gfx_url" value="{{>virtualserver_hostbutton_gfx_url}}"/>
</div>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Transfers" /}}</x-tag>
<x-content>
<div class="container-server-settings-file-transfer properties_transfer">
<div class="group_box">
<div class="header">{{tr "Upload" /}}</div>
<div class="content">
<div class="form-group">
<label>{{tr "Bandwidth Limit (Bytes/s):" /}}</label>
<input type="number" class="form-control virtualserver_max_upload_total_bandwidth" value="{{>virtualserver_max_upload_total_bandwidth}}"/>
</div>
<div class="form-group">
<label>{{tr "Upload Quota (MiB):"/}}</label>
<input type="number" class="form-control virtualserver_upload_quota" value="{{>virtualserver_upload_quota}}"/>
</div>
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Download" /}}</div>
<div class="content">
<div class="form-group">
<label>{{tr "Bandwidth Limit:"/}}</label>
<input type="number" class="form-control virtualserver_max_download_total_bandwidth" value="{{>virtualserver_max_download_total_bandwidth}}"/>
</div>
<div class="form-group">
<label>{{tr "Download Quota:"/}}</label>
<input type="number" class="form-control virtualserver_download_quota" value="{{>virtualserver_download_quota}}"/>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Anti-Flood" /}}</x-tag>
<x-content>
<div class="container-server-settings-anti-flood properties_flood">
<div class="form-group">
<label>{{tr "Reduced points per tick:" /}}</label>
<input type="number" min="1" max="65536" class="form-control virtualserver_antiflood_points_tick_reduce" value="{{>virtualserver_antiflood_points_tick_reduce}}"/>
</div>
<div class="form-group">
<label>{{tr "Points needed to block commands:" /}}</label>
<input type="number" min="1" max="65536" class="form-control virtualserver_antiflood_points_needed_command_block" value="{{>virtualserver_antiflood_points_needed_command_block}}"/>
</div>
<div class="form-group">
<label>{{tr "Points needed to block IP:" /}}</label>
<input type="number" min="1" max="65536" class="form-control virtualserver_antiflood_points_needed_ip_block" value="{{>virtualserver_antiflood_points_needed_ip_block}}"/>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Security" /}}</x-tag>
<x-content>
<div class="container-server-settings-security properties_security">
<div class="form-group">
<label>{{tr "Needed Security Level:" /}}</label>
<input type="number" min="1" max="64" value="{{:virtualserver_needed_identity_security_level}}" class="form-control virtualserver_needed_identity_security_level">
</div>
<div class="form-group">
<label>{{tr "Channel voice data encryption:" /}}</label>
<select class="form-control virtualserver_codec_encryption_mode">
<option value="unset">{{tr "Edit per channel individually" /}}</option>
<option value="off">{{tr "Globally disabled" /}}</option>
<option value="on">{{tr "Globally enabled (recommended)" /}}</option>
</select>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Misc" /}}</x-tag>
<x-content>
<div class="container-server-settings-misc properties_misc">
<div class="group_box">
<div class="header">{{tr "Default groups" /}}</div>
<div class="content">
<div class="form-group">
<label>{{tr "Server group" /}}</label>
<select class="form-control default_server_group"></select>
</div>
<div class="form-group">
<label>{{tr "Music bot group" /}}</label>
<select class="form-control default_music_group"></select>
</div>
<div class="form-group">
<label>{{tr "Channel group" /}}</label>
<select class="form-control default_channel_group"></select>
</div>
<div class="form-group">
<label>{{tr "Channel Admin group" /}}</label>
<select class="form-control default_channel_admin_group"></select>
</div>
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Complain" /}}</div>
<div class="content container-complains">
<div class="form-group">
<label>{{tr "Autoban Count" /}}</label>
<input type="number" min="1" max="65536" value="{{:virtualserver_complain_autoban_count}}" class="form-control virtualserver_complain_autoban_count">
</div>
<div class="form-group">
<label>{{tr "Autoban Time" /}}</label>
<input type="number" min="1" max="65536" value="{{:virtualserver_complain_autoban_time}}" class="form-control virtualserver_complain_autoban_time">
</div>
<div class="form-group">
<label>{{tr "Remove Time" /}}</label>
<input type="number" min="1" max="65536" value="{{:virtualserver_complain_remove_time}}" class="form-control virtualserver_complain_remove_time">
</div>
</div>
</div>
<div class="container-general">
<div class="form-group">
<label>{{tr "Minimum clients is channel before silence:" /}}</label>
<input type="number" min="1" max="65536" value="{{:virtualserver_min_clients_in_channel_before_forced_silence}}" class="form-control virtualserver_min_clients_in_channel_before_forced_silence">
</div>
<div class="form-group">
<label>{{tr "Priority speaker dim modificator:" /}}</label>
<input type="number" min="-100" max="0" value="{{:virtualserver_priority_speaker_dimm_modificator}}" class="form-control virtualserver_priority_speaker_dimm_modificator">
</div>
<div class="form-group">
<label>{{tr "Delete delay for temporary channels" /}}</label>
<input type="number" min="1" max="65536" value="{{:virtualserver_channel_temp_delete_delay_default}}" class="form-control virtualserver_channel_temp_delete_delay_default">
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Server list" /}}</div>
<div class="content">
<div class="switch">
<label>
<input type="checkbox" class="virtualserver_weblist_enabled" checked="{{:virtualserver_weblist_enabled}}">
{{tr "Enable reporting to the TeamSpeak server list" /}}
</label>
</div>
<div class="switch">
<label>
<input type="checkbox" disabled>
{{tr "<del>Enable reporting to the TeaSpeak server list</del> (TeaSpeak does not support this setting)" /}}
</label>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
<!-- TeaSpeak don't have any configurable log section
<x-entry>
<x-tag>Log</x-tag>
<x-content>TODO!</x-content>
</x-entry>
-->
<x-entry>
<x-tag>{{tr "Messages" /}}</x-tag>
<x-content>
<div class="container-server-settings-messages properties_messages">
<div class="group_box">
<div class="header">{{tr "Channel" /}}</div>
<div class="content">
<div class="form-group">
<label>{{tr "Default Topic:" /}}</label>
<textarea class="form-control virtualserver_default_channel_topic">{{>virtualserver_default_channel_topic}}</textarea>
</div>
<div class="form-group">
<label>{{tr "Default Description" /}}</label>
<textarea class="form-control virtualserver_default_channel_description">{{>virtualserver_default_channel_description}}</textarea>
</div>
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Client" /}}</div>
<div class="content">
<div class="form-group">
<label>{{tr "Default Description" /}}</label>
<textarea class="form-control virtualserver_default_client_description">{{>virtualserver_default_client_description}}</textarea>
</div>
</div>
</div>
{{tr "Note: These settings require a virtual server restart to take effect!" /}}
</div>
</x-content>
</x-entry>
</x-tab>
</modal-body>
<modal-footer>
<button class="btn btn-danger button_cancel">{{tr "Cancel" /}}</button>
<button class="btn btn-raised btn-success button_ok">{{tr "Save" /}}</button>
</modal-footer>
</modal>
</script>
<!-- Template for the settings -->
<script class="jsrender-template" id="tmpl_settings" type="text/html">
<x-tab>
<x-entry>
<x-tag>{{tr "General"/}}</x-tag>
<x-content>
<div class="settings-general">
<div class="group_box">
<div class="header">{{tr "TeaSpeak Forum Connection" /}}</div>
<div class="content settings-teaspeak-forum">
<div class="not-connected">
<div>{{tr "You're currently not connected with your TeaSpeak Forum account" /}}</div>
<button class="btn btn-primary btn-raised button-login">{{tr "login" /}}</button>
</div>
<!-- TODO new style! -->
<div class="connected">
<div class="connected-info">{{tr "You're connected via TeaSpeak forum" /}}</div>
<div class="container-info-action">
<div class="container-info">
<div class="property username">
<div class="key">{{tr "Username:" /}}</div>
<div class="value">WolverinDEV</div>
</div>
<div class="property premium">
<div class="key">{{tr "Premium:" /}}</div>
<div class="value">YES</div>
</div>
</div>
<div class="divider"></div>
<div class="container-actions">
<button class="button-logout">logout</button>
</div>
</div>
<!--
<div class="property synchronized">
<div class="key">{{tr "Synchronized:" /}}</div>
<div class="value">NO <button class="button-enable-disable-sync">{{tr "enable synchronization" /}}</button></div>
</div>
-->
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Audio" /}}</x-tag>
<x-content>
<div class="settings_audio">
<div class="settings-device-error alert alert-warning alert-dismissible fade show" role="alert">
<div class="message"></div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="group_box">
<div class="header">{{tr "Microphone" /}}</div>
<div class="content settings-microphone {{if !voice_available}}disabled{{/if}}">
{{if voice_available}}
<div class="form-row settings-device settings-device-microphone">
<div class="form-group settings-device-select">
<label for="select-settings-microphone-device" class="bmd-label-static">{{tr "Device:" /}}</label>
<select id="select-settings-microphone-device" class="form-control audio-select-microphone"></select>
</div>
<div class="form-group bmd-form-group">
<button class="btn btn-secondary button-device-update">update</button>
</div>
</div>
<div class="settings-vad-container">
<div class="group_box">
<div class="header">{{tr "Voice Activity Detection"/}}</div>
<div class="content">
<fieldset>
<div class="custom-control custom-radio">
<input type="radio" id="select-settings-vad-type-1" value="pt" name="vad_type" class="custom-control-input">
<label class="custom-control-label" for="select-settings-vad-type-1">{{tr "Always active" /}}</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="select-settings-vad-type-2" value="vad" name="vad_type" class="custom-control-input">
<label class="custom-control-label" for="select-settings-vad-type-2">{{tr "Voice activity detection"/}}</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="select-settings-vad-type-3" value="ppt" name="vad_type" class="custom-control-input">
<label class="custom-control-label" for="select-settings-vad-type-3">{{tr "Push to talk"/}}</label>
</div>
</fieldset>
</div>
</div>
<div class="settings-vad-impl">
<div class="settings-vad-impl-entry setting-vad-pt">
{{tr "There are no setting entries for an <b>always</b> online voice detection."/}}
</div>
<div class="settings-vad-impl-entry setting-vad-ppt">
<div class="property ppt-key">
<div class="key">{{tr "Push to talk key:"/}}</div>
<div class="value">
<button type="button" class="btn btn-raised btn-primary vat_ppt_key">{{tr "Uninitialised"/}}</button>
</div>
</div>
<div class="form-group ppt-delay">
<label for="input-settings-ppt-delay" class="bmd-label-static">{{tr "Key release delay:" /}}</label>
<input id="input-settings-ppt-delay" class="form-control value" type="number" min="0" max="5000"/>
</div>
</div>
<div class="settings-vad-impl-entry setting-vad-vad">
<div>{{tr "Voice activity threshold (<a class='vad_vad_slider_value'>20</a>%)"/}}</div>
<div class="vad_vad_threshold_selector">
<div class="vad_vad_bar">
<div class="container-hider">
<div class="hider vad_vad_bar_filler"></div>
</div>
<input type="range" min="0" max="100" value="50" class="vad_vad_slider">
</div>
</div>
</div>
</div>
</div>
{{else}}
<div>{{tr "Voice had been disabled" /}}</div>
{{/if}}
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Speaker" /}}</div>
<div class="content settings-speaker">
<div class="settings-device settings-device-speaker">
<div class="form-group settings-device-select">
<label for="select-settings-speaker-device" class="bmd-label-static">{{tr "Device:" /}}</label>
<select id="select-settings-speaker-device" class="form-control audio-select-speaker"></select>
</div>
<div class="form-group bmd-form-group">
<button class="btn btn-secondary button-device-update">update</button>
</div>
</div>
</div>
</div>
<hr>
<div class="group_box sound">
<div class="header">{{tr "Sound Settings" /}}</div>
<div class="content">
<div class="sound-settings">
<div class="property">
<div class="key">Master volume:</div>
<div class="value master-volume">
<input type="range" min="0" max="100" value="100">
<a>(66%)</a>
</div>
</div>
<div class="property">
<div class="key">
{{tr "Overlap same sounds:" /}}
</div>
<div class="value overlap-sounds">
<div class="switch">
<label>
<input type="checkbox" checked>
<div class="help-tip-container"> <!-- lets be absolute -->
<div class="help-tip tip-right tip-small">
<p>
{{tr "This options deferments if a sound overlaps itself when played twice.<br>" +
"An example would be when you move multiple clients, you hear that sound n-times.<br>" +
"If this option is disabled, you hear that sound just once."
/}}
</p>
</div>
</div>
</label>
</div>
</div>
</div>
<div class="property">
<div class="key muted-sounds">
Mute sounds when output is muted:
</div>
<div class="value muted-sounds">
<div class="switch">
<label>
<input type="checkbox" checked>
<div class="help-tip-container"> <!-- lets be absolute -->
<div class="help-tip tip-right tip-small">
<p>
{{tr "Mute all system sounds, when you've muted your output.<br>If this option isn't disabled you'll still receive system sounds like 'user joined your channel'."/}}
</p>
</div>
</div>
</label>
</div>
</div>
</div>
<div class="sound-list">
<div class="sound-list-header">
<div class="column sound-name">{{tr "Name" /}}</div>
<div class="column sound-activated">{{tr "Activated" /}}</div>
</div>
<div class="sound-list-entries-container">
<div class="sound-list-entries">
</div>
</div>
</div>
<div class="form-group sound-list-filter">
<label for="input-settings-sounds-filter" class="bmd-label-floating">{{tr "Filter" /}}</label>
<input id="input-settings-sounds-filter" class="form-control" type="text"/>
</div>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>
<div class="container-tabname-translations">{{tr "Translations" /}} <div class="country flag-en"></div></div>
</x-tag>
<x-content>
<div class="settings-translations">
<div class="group_box">
<div class="header">{{tr "Available translations" /}}</div>
<div class="content">
<div class="setting-list">
<div class="list">
</div>
<div class="management">
<div class="loading">Loading...</div>
<div class="space"></div>
<button class="btn btn-secondary button-add-repository">{{tr "Add repository" /}}</button>
</div>
<div class="restart-note">
<p>
{{tr "Attention: These settings get only affected after a restart or reload!" /}}
</p>
<button class="button-reload">{{tr "reload now" /}}</button>
</div>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag class="tab-profiles">
{{tr "Profiles" /}}
</x-tag>
<x-content>
<div class="settings-profiles">
<div class="group_box">
<div class="header">{{tr "Available profiles" /}}</div>
<div class="content">
<div class="profile-list">
<div class="list">
</div>
<div class="management">
<button class="btn btn-primary button-set-default">{{tr "Set selected as default" /}}</button>
<button class="btn btn-danger button-delete">{{tr "Delete selected" /}}</button>
<div class="space"></div>
<button class="btn btn-success button-add-profile">{{tr "Create profile" /}}</button>
</div>
</div>
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Profile settings" /}}</div>
<div class="content">
<div class="profile-settings">
<div class="general-settings">
<div class="form-group">
<label for="input-settings-profile-name" class="bmd-label-static">{{tr "Profile name:" /}}</label>
<input id="input-settings-profile-name" class="form-control setting-name">
</div>
<div class="form-group">
<label for="input-settings-profile-default-name" class="bmd-label-static">{{tr "Default nickname:" /}}</label>
<input id="input-settings-profile-default-name" class="form-control setting-default-nickname">
</div>
<div class="form-group">
<!-- TODO use random ids -->
<label for="input-settings-profile-default-password" class="bmd-label-floating">{{tr "Default server password" /}}</label>
<input type="password" id="input-settings-profile-default-password" class="form-control setting-default-password">
</div>
<div class="form-group select-container">
<label for="input-settings-profile-identity-type" class="bmd-label-static">{{tr "Identify Type:" /}}</label>
<select id="input-settings-profile-identity-type" class="form-control">
<option name="identity-type" value="teaforo">{{tr "Forum Account" /}}</option>
<option name="identity-type" value="teamspeak">{{tr "TeamSpeak" /}}</option>
<option name="identity-type" value="nickname">{{tr "Nickname (Debug purposes only!)" /}}</option> <!-- Only available on localhost for debug -->
</select>
</div>
</div>
<hr>
<div class="identity-settings identity-settings-teamspeak">
<!--
<div class="import">
{{tr "Please enter your exported TS3 Identity string bellow or select your exported Identity"/}}<br>
<div style="width: 100%; display: flex; justify-content: stretch; flex-direction: row">
<input placeholder="Identity string" style="min-width: 60%; flex-shrink: 1; flex-grow: 2; margin: 5px;" class="identity_string">
<div style="max-width: 200px; flex-grow: 1; flex-shrink: 4; margin: 5px"><input style="display: flex; width: 100%;" class="identity_file" type="file"></div>
</div>
</div>
-->
<div class="identity-info" style="display: none">
<div class="form-group unique-id">
<label>{{tr "UniqueID:" /}}</label>
<input class="form-control" type="text" value="xxjnc14LmvTk+Lyrm8OOeo4tOqw=" readonly/>
</div>
<div class="form-row level">
<div class="form-group container-input">
<label>{{tr "Level:" /}}</label>
<input class="form-control" type="text" value="39" readonly/>
</div>
<div class="form-group bmd-form-group">
<button class="btn btn-raised button-improve">{{tr "Improve" /}}</button>
</div>
</div>
</div>
<div class="identity-undefined">
<div>{{tr "You have'nt generated/imported an identity.<br>Generate a new one or import one." /}}</div>
</div>
<div class="manage">
<button class="btn btn-primary button-generate">{{tr "Generate new" /}}</button>
<div class="export-import">
<button class="btn btn-secondary button-import">{{tr "Import identity" /}}</button>
<button class="btn btn-primary button-export">{{tr "Export identity" /}}</button>
</div>
</div>
</div>
<div class="identity-settings identity-settings-teaforo">
<div class="connected">
{{tr "You're using your forum account as verification"/}}
</div>
<div class="disconnected">
<!-- TODO tr -->
<!-- <a href="#" class="native-teaforo-login">here</a> -->
<div class="error-forum-not-connected alert alert-warning fade show" role="alert">
You cant use your TeaSpeak forum account. You're not connected with your forum Account!<br>
Setup your connection <a class="forum-setup" href="#">here</a>.
</div>
</div>
</div>
<div class="identity-settings identity-settings-nickname">
<a>
{{tr "This is just for debug and uses the name as unique identifier" /}}
</a>
<div class="form-group">
<label for="input-settings-profile-name-name" class="bmd-label-floating">{{tr "Username" /}}</label>
<input id="input-settings-profile-name-name" class="form-control setting-name">
</div>
</div>
<div class="settings-profile-error alert alert-warning fade show" role="alert">
<div class="message"></div>
</div>
</div>
</div>
</div>
</div>
</x-content>
</x-entry>
</x-tab>
</script>
<script class="jsrender-template" id="tmpl_settings-sound_entry" type="text/html">
<div class="entry">
<div class="column sound-name"><div class="icon client-play button-playback"></div> {{>name}}</div>
<div class="column sound-activated">
<div class="switch">
<label>
<input type="checkbox" {{if activated}}checked{{/if}}>
</label>
</div>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_settings-teamspeak_import" type="text/html">
<div class="container-teamspeak-import">
<div class="error">{{tr "Failed to import identity (my little error)" /}}</div>
<div class="load-data">
<div>{{tr "Import an identity from TeamSpeak or an exported identity" /}}</div>
<div class="buttons">
<button class="button-load-text">{{tr "Load from text" /}}</button>
<button class="button-load-file">{{tr "Load from file" /}}</button>
<input class="input-file" type="file">
</div>
</div>
<div class="success">
{{tr "Identity successfully loaded. Ready to import" /}}
</div>
<div class="footer">
<button class="button-import">{{tr "Import" /}}</button>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_settings-teamspeak_improve" type="text/html">
<div class="container-teamspeak-improve">
<div class="form-group identity-unique-id">
<label>{{tr "Identity:" /}}</label>
<input class="form-control" value="" readonly>
</div>
<div class="form-group identity-level">
<label>{{tr "Current level: " /}}</label>
<input class="form-control" value="loading" readonly>
</div>
<div class="form-group identity-target-level">
<div class="bmd-label-static">
<div class="help-tagged">{{tr "Target level: " /}}</div>
<div class="help-tip-container"> <!-- lets be absolute -->
<div class="help-tip tip-right tip-small">
<p>
{{tr "A value of zero means unlimited. Improve until you abort"/}}
</p>
</div>
</div>
</div>
<input class="form-control" value="0" type="number" min="0" max="160">
</div>
<div class="form-group threads">
<div class="bmd-label-static">
<div class="help-tagged">{{tr "Threads: " /}}</div>
<div class="help-tip-container"> <!-- lets be absolute -->
<div class="help-tip tip-right tip-small">
<p>
{{tr "The number of threads used to improve your identity<br>The optimal value is equal to the amount of kernal threads."/}}
</p>
</div>
</div>
</div>
<input class="form-control" value="2" type="number" min="1" max="32">
</div>
<hr>
<div class="form-row">
<div class="form-group hash-rate">
<label>{{tr "Hashes/second:" /}}</label>
<input class="form-control" value="0" readonly>
</div>
<div class="form-group time-elapsed">
<label>{{tr "Elapsed time:" /}}</label>
<input class="form-control" value="00:00" readonly>
</div>
</div>
<div class="buttons">
<button class="btn btn-secondary btn-raised button-close">{{tr "Close" /}}</button>
<button class="btn btn-success btn-raised button-start-stop">{{tr "Start" /}}</button>
</div>
</div>
</script>
<script class="jsrender-template" id="settings-profile-list-entry" type="text/html">
<div class="entry profile {{if id == 'default'}}default{{/if}}">
<div class="name">{{>profile_name}}</div>
<!-- <div class="button button-delete"><div class="icon client-delete"></div></div> -->
<div title="{{tr 'Profile is valid' /}}" class="icon client-delete status status-invalid"></div>
<div title="{{tr 'Profile is invalid' /}}" class="icon client-apply status status-valid"></div>
</div>
</script>
<script class="jsrender-template" id="settings-translations-list-entry" type="text/html">
{{if type == "repository" }}
<div class="entry repository" repository="{{:id}}">
<div class="name">{{> name}}</div>
<div class="button button-delete"><div class="icon client-delete"></div></div>
<div class="button button-info"><div class="icon client-about"></div></div>
</div>
{{else type == "default" }}
<div class="entry default {{if selected}}selected{{/if}}">
<div class="country flag-gb" title="{{*:i18n.country_name('gb')}}"></div>
<div class="name">{{tr "English (Default / Fallback)" /}}</div>
</div>
{{else}}
<div class="entry translation {{if selected}}selected{{/if}}" parent-repository="{{:id}}">
<div class="country flag-{{:country_code}}" title="{{*:i18n.country_name(data.country_code || 'XX')}}"></div>
<div class="name">{{> name}}</div>
<div class="button button-info"><div class="icon client-about"></div></div>
</div>
{{/if}}
</script>
<script class="jsrender-template" id="settings-translations-list-entry-info" type="text/html">
<div class="entry-info-container">
{{if type == "repository" }}
<!--
unique_id: string;
url: string;
name?: string;
contact?: string;
translations?: RepositoryTranslation[];
load_timestamp?: number;
-->
<div class="property property-name"><div class="key">Name:</div><div class="value">{{>name}}</div></div>
<div class="property property-url"><div class="key">URL:</div><div class="value">{{>url}}</div></div>
<div class="property property-contact"><div class="key">Contact:</div><div class="value">{{>contact}}</div></div>
<div class="property property-translations"><div class="key">Translations:</div><div class="value">{{:translations.length}}</div></div>
{{else}}
<!--
name: string;
contributors: Contributor[];
-->
<div class="property property-name"><div class="key">Name:</div><div class="value">{{>name}}</div></div>
<div class="property property-url"><div class="key">URL:</div><div class="value">{{>url}}</div></div>
<div class="property property-repository">
<div class="key">Repository:</div>
<div class="value">
<p>{{>repository_name}}</p>
<div class="button button-info"><div class="icon client-about"></div></div>
</div>
</div>
{{if !contributors }}
{{else contributors.length == 1}}
<div class="property property-contributor">
<div class="key">Contributor:</div>
<div class="value">
{{>contributors[0].name}}
{{if contributors[0].email}}
&nbsp&lt;{{>contributors[0].email}}&gt;
{{/if}}
</div>
</div>
{{else}}
<div class="property property-contributors">
<div class="key">Contributors:</div>
<div class="value">
{{for contributors}}
<div class="contributor">
{{>name}}
{{if email}}
&nbsp&lt;{{>email}}&gt;
{{/if}}
</div>
{{/for}}
</div>
</div>
{{/if}}
{{/if}}
</div>
</script>
<script class="jsrender-template" id="tmpl_change_volume" type="text/html">
<div style="display: flex; justify-content: center; vertical-align: center">
<input type="range" min="0" max="{{>max_volume}}" value="100" class="volume_slider" style="width: 100%">
<div class="display_volume" style="width: 60px; align-self: center; text-align: center">&plusmn;0 %</div>
</div>
</script>
<!-- Permission overview -->
<script class="jsrender-template" id="tmpl_server_permissions" type="text/html">
<x-tab>
<x-entry>
<x-tag>{{tr "Server Groups" /}}</x-tag>
<x-content class="tab-group-server">
<div class="layout-group-server">
<div class="list-group-server">
<div class="entries"></div>
</div>
<div class="horizontal-stretch">
<permission-editor class="group-server" />
</div>
<div class="list-group-server-clients"></div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Channel Groups" /}}</x-tag>
<x-content class="tab-group-channel">
<div class="layout-group-channel">
<div class="list-group-channel">
<div class="entries"></div>
</div>
<div class="horizontal-stretch">
<permission-editor class="group-channel" />
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Channel permissions" /}}</x-tag>
<x-content class="tab-channel">
<div class="layout-channel">
<div class="list-channel">
<div class="entries"></div>
</div>
<div class="horizontal-stretch">
<permission-editor class="channel" />
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Client permissions"/}}</x-tag>
<x-content class="tab-client">
<div class="layout-client">
<div class="client-info">
<div class="client-select form-group">
<label class="bmd-label-floating">{{tr "Client unique ID"/}}</label>
<input type="text" class="form-control client-select-uid">
<div class="invalid-feedback">{{tr "Invalid unique id" /}}</div>
</div>
<hr>
<div class="client-info">
<div class="form-group">
<label>{{tr "Nickname:" /}}</label>
<input class="form-control client-name">
</div>
<div class="form-group">
<label>{{tr "Unique ID:" /}}</label>
<input class="form-control client-uid">
</div>
<div class="form-group">
<label>{{tr "Client database ID:" /}}</label>
<input class="form-control client-dbid">
</div>
</div>
</div>
<div class="horizontal-stretch">
<permission-editor class="client" />
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Client channel permissions" /}}</x-tag>
<x-content class="tab-client-channel">
<div class="layout-client-channel">
<div class="container-client-channel">
<div class="client-info">
<div class="client-select form-group">
<label class="bmd-label-floating">{{tr "Client unique ID"/}}</label>
<input type="text" class="form-control client-select-uid">
<div class="invalid-feedback">{{tr "Invalid unique id" /}}</div>
</div>
<hr>
<div class="client-info">
<div class="form-group">
<label>{{tr "Nickname:" /}}</label>
<input class="form-control client-name">
</div>
<div class="form-group">
<label>{{tr "Unique ID:" /}}</label>
<input class="form-control client-uid">
</div>
<div class="form-group">
<label>{{tr "Client database ID:" /}}</label>
<input class="form-control client-dbid">
</div>
</div>
</div>
<hr>
<div class="list-channel">
<div class="entries"></div>
</div>
</div>
<div class="horizontal-stretch">
<permission-editor class="client-channel" />
</div>
</div>
</x-content>
</x-entry>
</x-tab>
</script>
<script class="jsrender-template" id="tmpl_server_group_assignment" type="text/html">
<div class="group-assignment-list">
<a>{{tr "Changing groups of" /}} <b>{{>client_name}}</b></a>
<div class="group-list">
{{for groups}}
<div class="group-entry">
<label class="checkbox {{if disabled}}disabled{{/if}}">
<input type="checkbox" group-id="{{>id}}" {{if assigned}}checked{{/if}}>
<span class="checkmark"></span>
</label>
<node key="icon_{{>id}}"></node>
<a>{{>name}} ({{>id}})</a>
</div>
{{/for}}
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_permission_entry" type="text/html">
{{if type == "permission"}}
<div class="entry permission">
<div class="column-name">{{>permission_name}}</div>
{{if permission_name.startsWith("b_") }}
<div class="column-value">
<label class="checkbox">
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
{{else}}
<div class="column-value form-group">
<input class="form-control" type="number" min-value="-1" max-value="9999999999" />
</div>
{{/if}}
<div class="column-skip">
<label class="checkbox">
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="column-negate">
<label class="checkbox">
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="column-granted form-group">
<input class="form-control" type="number" min-value="-1" max-value="9999999999" />
</div>
</div>
{{else}}
<div class="entry group tab-show-partitional">
<div class="title"><div class="arrow down"></div><a>{{>name}}</a></div>
<div class="group-entries">
{{for entries tmpl="tmpl_permission_entry"/}}
</div>
</div>
{{/if}}
</script>
<script class="jsrender-template" id="tmpl_permission_editor" type="text/html">
<div class="container-permissions">
<div class="permission-explorer">
<div class="container-filter">
<div class="form-group container-input">
<label class="bmd-label-floating">{{tr "filter permissions" /}}</label>
<input type="text" class="form-control filter-input"/>
<!-- <small class="form-text text-muted">{{tr "Filter permissions by permission name" /}}</small> -->
</div>
<div class="form-group bmd-form-group">
<div class="switch">
<label>
<input type="checkbox" value="" class="filter-granted">
{{tr "Show granted permissions only" /}}
</label>
</div>
</div>
</div>
<div class="container-mode container-mode-permissions">
<div class="container-permission-list">
<div class="entry header">
<div class="column-name">{{tr "Permission Name" /}}</div>
<div class="column-value">{{tr "Value" /}}</div>
<div class="column-skip">{{tr "Skip" /}}</div>
<div class="column-negate">{{tr "Negate" /}}</div>
<div class="column-granted">{{tr "Granted" /}}</div>
</div>
<div class="entry-editor-container"> </div>
</div>
</div>
<div class="container-mode container-mode-no-permissions">
<div class="container-text">
<a>{{tr "You dont have the permission to view this permissions" /}}</a>
</div>
</div>
<div class="container-mode container-mode-unset"> </div>
<div class="container-footer">
<button class="btn btn-secondary btn-raised button-update"><div class="icon client-check_update"></div> {{tr "Update" /}}</button>
</div>
</div>
</div>
<div class="container-error-permissions"></div>
</script>
<!-- General management templates -->
<script class="jsrender-template" id="tmpl_ban_list" type="text/html">
<div class="banlist">
<div class="frame-container">
<div class="top-menu">
<div class="form-group bmd-form-group manage-buttons">
<button class="btn btn-success button-add">{{tr "Add" /}}</button>
<button class="btn btn-primary button-edit">{{tr "Edit" /}}</button>
<button class="btn btn-danger button-remove">{{tr "Remove" /}}</button>
</div>
<div class="search form-group">
<label class="bmd-label-floating">{{tr "filter" /}}</label>
<input type="text" class="form-control entry-filter">
</div>
</div>
<div class="entry-container">
<div class="ban-entry header">
<div class="column column-keys">{{tr "Name/IP/UID/HWID"/}}</div>
<div class="column column-reason">{{tr "Reason"/}}</div>
<div class="column column-creator">{{tr "Creator"/}}</div>
<div class="column column-time">{{tr "Created / Expires"/}}</div>
</div>
<div class="entries"> </div>
</div>
<div class="bottom-menu">
<div class="left">
<button class="btn btn-primary button-refresh btn-raised">{{tr "Reload"/}}</button>
<div class="switch">
<label>
<input type="checkbox" class="filter-flag-force-own">
{{tr "Show only own bans" /}}
</label>
</div>
<div class="switch">
<label>
<input type="checkbox" class="filter-flag-highlight-own">
{{tr "Highlight own bans" /}}
</label>
</div>
</div>
<div class="right">
<a class="entry-count-info"></a>
<button class="btn btn-secondary btn-raised button-close">{{tr "Close" /}}</button>
</div>
</div>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_ban_entry" type="text/html">
<div class="ban-entry {{if server_id == 0}}ban-entry-global{{/if}} {{if flag_own}}ban-entry-own{{/if}}" ban-id={{>banid}} server-id={{>server_id}}>
<div class="column column-keys">
{{if name }}<a class="property property-name">name={{>name}}</a>{{/if}}
{{if ip }} <a class="property property-ip">ip={{>ip}}</a>{{/if}}
{{if unique_id }} <a class="property property-unique-id">uid={{>unique_id}}</a>{{/if}}
{{if hardware_id }}<a class="property property-hardware-id">hwid={{>hardware_id}}</a>{{/if}}
</div>
<div class="column column-reason">{{>reason}}</div>
<div class="column column-creator">{{>invoker_name}}</div>
<div class="column column-time">
<div class="timestamp-created"><a>{{tr "Created:" /}}</a> {{fmt_date timestamp_created "DD.MM.YYYY HH:mm" /}}</div>
<div class="timestamp-expire"><a>{{tr "Expire:" /}}</a> {{if (!timestamp_expire || timestamp_expire.getTime() == 0) }}never{{else}}{{fmt_date timestamp_expire "DD.MM.YYYY HH:mm" /}}{{/if}}</div>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_client_ban" type="text/html">
<div class="align_column">
<div class="align_column" style="margin: 5px">
<a>{{tr "Name:" /}}</a>
<input value="{{>client_name}}" readonly>
</div>
<div class="align_column" style="margin: 5px">
<a>{{tr "Reason:" /}}</a>
<textarea style="height: 32px; resize: vertical; max-height: 150px; min-height: 32px" maxlength="512" class="ban_reason"></textarea>
</div>
<div class="align_row" style="margin: 5px; justify-content: space-between">
<a>{{tr "Duration:" /}}</a>
<div class="align_row">
<input type="number" value="1" class="ban_duration" style="margin-right: 7px" min="1">
<select class="ban_duration_type">
<option value="sec">{{tr "seconds"/}}</option>
<option value="min">{{tr "minutes"/}}</option>
<option value="hours">{{tr "hours"/}}</option>
<option value="days">{{tr "days"/}}</option>
<option value="perm">{{tr "permanent"/}}</option>
</select>
</div>
</div>
<div class="group_box container-ban-type">
<div class="header">{{tr "Ban client by"/}}</div>
<div class="content ban-types">
<div>
<input type="checkbox" class="ban-type-nickname">
<a>{{tr "Nickname"/}}</a>
<div class="help-tip tip-right tip-small" checked>
<p>
{{tr "Bans the client by his current nickname.<br>" +
"The currently nickname cant be used until the ban expired"/}}
</p>
</div>
</div>
<div>
<input type="checkbox" class="ban-type-hardware-id" checked>
<a>{{tr "Hardware ID" /}}</a>
<div class="help-tip tip-right tip-small">
<p>
{{tr "Bans the client by his hardware id.<br>" +
"The hardware id has different meanings, depends on the users agent<br>" +
"TeaClient: The hardware id will be equal to the mac address<br>" +
"TeaWeb: The TeaSpeak web client hasn't a hardware id, it will be random<br>" +
"TeamSpeak 3 client: The hardware id will be a result of some hashes from hardware specific properties" /}}
</p>
</div>
</div>
<div>
<input type="checkbox" class="ban-type-ip" checked>
<a>{{tr "IP Address" /}}</a>
</div>
</div>
</div>
</div>
</script>
<!-- `hwid` VARCHAR(" CLIENT_UID_LENGTH "), `uid` VARCHAR(" CLIENT_UID_LENGTH "), `name` VARCHAR(" CLIENT_NAME_LENGTH "), `ip` VARCHAR(128) -->
<script class="jsrender-template" id="tmpl_ban_create" type="text/html">
<div class="bancreate">
<div class="frame-container">
<div class="form-group">
<label class="bmd-label-static">{{tr "IP:" /}}</label>
<input class="form-control input-ip" type="text" maxlength="128">
</div>
<div class="form-row">
<div class="form-group">
<label class="bmd-label-static">{{tr "Name:" /}}</label>
<input class="form-control input-name" type="text" maxlength="128">
</div>
<div class="form-group">
<label class="bmd-label-static">{{tr "Interpret IP/Name as:" /}}</label>
<select class="form-control input-name-type">
<option value="wildcard-4">{{tr "Wildcard IPv4" /}}</option>
<option value="wildcard-6">{{tr "Wildcard IPv6" /}}</option>
<option value="fixed" selected>{{tr "Fixed string" /}}</option>
<option value="regex">{{tr "Regular Expression" /}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="bmd-label-static">{{tr "Unique ID:" /}}</label>
<div><input class="form-control input-uid" type="text" maxlength="64"></div>
</div>
<div class="form-group">
<label class="bmd-label-static">{{tr "Hardware ID:" /}}</label>
<input class="form-control input-hwid" type="text" max="64">
</div>
<div class="form-group container-reason">
<label class="bmd-label-static">{{tr "Reason" /}}</label>
<textarea class="form-control input-reason"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label>{{tr "Duration:" /}}</label>
<input type="number" value="1" class="form-control input-time" style="margin-right: 7px" min="1">
</div>
<div class="form-group input-time-unit">
<select class="form-control input-time-unit">
<option value="sec">{{tr "seconds"/}}</option>
<option value="min">{{tr "minutes"/}}</option>
<option value="hours">{{tr "hours"/}}</option>
<option value="days">{{tr "days"/}}</option>
<option value="perm">{{tr "permanent"/}}</option>
</select>
</div>
</div>
<div class="footer">
<div class="switch">
<label>
<input type="checkbox" class="input-global">
{{tr "Use this ban as a global ban" /}}
<div class="help-tip tip-center tip-small">
<p>
{{tr "Global bans are bans which apply instance wide.<br>" +
"This means that (if this rule apply to a victim) cant join <b>any</b> virtual server!<br>" +
"Global bans are by default shown to every server admin group,<br>" +
"but could only be created with query rights"/}}
</p>
</div>
</label>
</div>
<div class="bmd-form-group">
<button class="btn btn-danger button-close">{{tr "Cancel"/}}</button>
<button class="btn btn-success btn-raised button-success">{{tr "OK"/}}</button>
</div>
</div>
</div>
</div>
</script>
<!-- Music interface -->
<script class="jsrender-template" id="tmpl_music_frame" type="text/html">
<!-- First we want to define some variables if not defined yet. -->
{{if !thumbnail}}
{{*
data.thumbnail = "img/music/no_thumbnail.svg";
}}
{{/if}}
{{*
if(!data.song_max_width) data.song_max_width = 300;
let width = calculate_width(data.song_name);
if(width > data.song_max_width)
data.song_use_scroller = true;
}}
<div class="music-wrapper">
<div class="container">
<div class="left">
<div class="static-card">
<img src="{{:thumbnail}}" alt="Thumbnail" class="thumbnail">
</div>
</div>
<div class="right">
<div class="controls hover">
<label class="btn-forward"><span></span></label>
<label class="btn-rewind"><span></span></label>
<label class="btn-settings"><span></span></label>
</div>
<div class="flip-card">
<img src="{{:thumbnail}}" alt="Thumbnail" class="thumbnail">
</div>
</div>
</div>
<div class="controls-overlay">
<div class="timer">
<div class="button-container">
<div class="container-play-pause">
<div class="button button_play">
<svg x="0px" y="0px" viewBox="0 0 4.5 6.9" style="enable-background:new 0 0 4.5 6.9;">
<defs>
<filter id="shadow_play" title="Start replaying">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
</defs>
<polyline style="filter:url(#shadow_play);" class="button" points="0.6,0.3 3.9,3.4 0.6,6.6 "></polyline>
</svg>
</div>
<div class="button button_pause" title="Pause the current song">
<svg x="0px" y="0px" viewBox="0 0 4.5 6.9" style="enable-background:new 0 0 4.5 6.9;">
<defs>
<filter id="shadow_pause">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
</defs>
<g style="filter:url(#shadow_pause);">
<line x1="0.4" y1="0.1" x2="0.4" y2="6.8"></line>
<line x1="4.1" y1="0.1" x2="4.1" y2="6.8"></line>
</g>
</svg>
</div>
</div>
<div>
<div class="button button_stop" title="Stop the music bot">
<svg x="0px" y="0px" viewBox="0 0 4.5 6.9" style="enable-background:new 0 0 4.5 6.9;">
<defs>
<filter id="shadow_stop">
<feDropShadow dx="4" dy="8" stdDeviation="4"/>
</filter>
</defs>
<g style="filter:url(#shadow_stop);">
<rect x="0.25" y="1.45" width="4" height="4" fill="black"></rect>
</g>
</svg>
</div>
</div>
</div>
<div class="timeline">
<div class="buffered"></div>
<div class="played"></div>
<div class="slider"></div>
</div>
<div class="time player_time">--:--</div>
</div>
<div class="song">
{{if song_use_scroller}}
<div class="scroll-left">
<p class="name">{{>song_name}}</p>
</div>
{{else}}
<div class="name" style="">{{>song_name}}</div>
{{/if}}
</div>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_music_frame_empty" type="text/html">
<div class="music-wrapper empty">
<img src="img/music/empty_disk.svg">
<a>{{tr "Not playing any music"/}}</a>
</div>
</script>
<script class="jsrender-template" id="tmpl_selected_client" type="text/html">
<table class="select_info_table">
<tr>
<td>{{tr "Name:" /}}</td>
<td style="display: flex; flex-direction: row">
<div style="margin-right: 3px" class="country flag-{{*:(data.property_client_country || 'xx').toLowerCase()}}" title="{{*:i18n.country_name(data.property_client_country || 'XX')}}"></div>
<node key="client_name"/>
</td>
</tr>
{{if property_client_description.length > 0}}
<tr>
<td>{{tr "Description:"/}}</td>
<td>{{>property_client_description}}</td>
</tr>
{{/if}}
{{if !client_is_query}}
<tr>
<td>{{tr "Version:"/}}</td>
<td>
<a title="{{>property_client_version}}">{{*: data.property_client_version.split(" ")[0]; }}</a>
{{if client_is_web && false}} <!-- we cant show any browser info because every browser claims to be any browser as well -->
<div class="icon client-message_info button-browser-info" title="{{tr 'Browser info' /}}"></div>
{{/if}}
on
<a>{{>property_client_platform}}</a>
</td>
</tr>
{{/if}}
<tr>
<td>{{tr "Online since:"/}}</td>
<td class="update_onlinetime">{{:client_onlinetime}}</td>
</tr>
{{if !client_is_query}}
<tr>
<td>{{tr "Volume:"/}}</td>
<td>{{:sound_volume}}%</td>
</tr>
{{/if}}
{{if client_teaforum_id > 0}}
<tr>
<td>{{tr "TeaSpeak Account:" /}}</td>
<td><a href="//forum.teaspeak.de/index.php?members/{{:property_client_teaforum_id}}" target="_blank">{{>property_client_teaforum_name}}</a></td>
</tr>
{{/if}}
</table>
<!-- Server groups -->
<div style="display: flex; flex-direction: column;">
<div style="display:flex;margin-top:5px;align-items:center">
<div class="icon client-permission_server_groups"></div>
<div style="margin-left:3px;font-weight:bold">{{tr "Server groups:"/}}</div>
</div>
{{for group_server}}
<div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
<node key="group_{{:group_id}}_icon"/>
<div style="margin-left: 3px">{{>group_name}}</div>
</div>
{{/for}}
</div>
<!-- Channel group -->
<div style="display: flex; flex-direction: column; margin-bottom: 20px">
<div style="display:flex;margin-top:10px;align-items:center">
<div class="icon client-permission_channel"></div>
<div style="margin-left:3px;font-weight:bold">{{tr "Channel group:"/}}</div>
</div>
<div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
<node key="group_{{:group_channel}}_icon"/>
<div style="margin-left: 3px">{{*: data["group_" + data.group_channel + "_name"]}}</div>
</div>
</div>
<!-- Costume tags/icons -->
<!-- Client is away -->
{{if property_client_away}}
<div style="display: inline-flex">
<div class="icon_x32 client-away" style="margin-right: 5px"></div>
<a style="align-self: center">{{tr "Away"/}}
{{if property_client_away_message && property_client_away_message.length > 0}}
({{>property_client_away_message}})
{{/if}}
</a>
</div>
{{/if}}
<!-- Speakers/Headphones disabled -->
{{if !property_client_output_hardware}}
<div style="display: inline-flex">
<div class="icon_x32 client-hardware_output_muted" style="margin-right: 5px"></div>
<a style="align-self: center">{{tr "Speakers/Headphones disabled"/}}</a>
</div>
{{/if}}
<!-- Microphone disabled -->
{{if !property_client_input_hardware}}
<div style="display: inline-flex">
<div class="icon_x32 client-hardware_input_muted" style="margin-right: 5px"></div>
<a style="align-self: center">{{tr "Microphone disabled"/}}</a>
</div>
{{/if}}
<!-- Speakers/Headphones Muted -->
{{if property_client_output_muted}}
<div style="display: inline-flex">
<div class="icon_x32 client-output_muted" style="margin-right: 5px"></div>
<a style="align-self: center">{{tr "Speakers/Headphones Muted"/}}</a>
</div>
{{/if}}
<!-- Microphone Muted -->
{{if property_client_input_muted}}
<div style="display: inline-flex">
<div class="icon_x32 client-input_muted" style="margin-right: 5px"></div>
<a style="align-self: center">{{tr "Microphone Muted"/}}</a>
</div>
{{/if}}
{{if property_client_flag_avatar && property_client_flag_avatar.length > 0}}
<div style="margin-top: 10px;" class="client-avatar">
<node key="client_avatar"/>
</div>
{{/if}}
</script>
<script class="jsrender-template" id="tmpl_selected_music" type="text/html">
<table class="select_info_table">
<tr>
<td>{{tr "Name:"/}}</td>
<td><node key="client_name"/></td>
</tr>
{{if property_client_description.length > 0}}
<tr>
<td>{{tr "Description:"/}}</td>
<td>{{>property_client_description}}</td>
</tr>
{{/if}}
{{if property_client_uptime_mode == 0}}
<tr>
<td>{{tr "Livetime:"/}}</td>
<td class="update_onlinetime">{{:client_onlinetime}}</td>
</tr>
{{else}}
<tr>
<td>{{tr "Online since" /}}</td>
<td>{{tr "Server start" /}}</td>
</tr>
{{/if}}
<!-- player_volume -->
<tr>
<td>{{tr "Remote Volume:"/}}</td>
<td class="property-volume-remote">{{*: Math.floor(data.property_player_volume * 100) }}%</td>
</tr>
<tr>
<td>{{tr "Local Volume:"/}}</td>
<td class="property-volume-local">{{>sound_volume}}%</td>
</tr>
{{if song_url}}
<tr>
<td>{{tr "Currently replaying:"/}}</td>
<td><node key="song_url"></node></td>
</tr>
{{/if}}
<!-- TODO: Created by -->
</table>
<!-- Server groups -->
<div style="display: flex; flex-direction: column;">
<div style="display:flex;margin-top:5px;align-items:center">
<div class="icon client-permission_server_groups"></div>
<div style="margin-left:3px;font-weight:bold">{{tr "Server groups:"/}}</div>
</div>
{{for group_server}}
<div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
<node key="group_{{:group_id}}_icon"/>
<div style="margin-left: 3px">{{:group_name}}</div>
</div>
{{/for}}
</div>
<!-- Channel group -->
<div style="display: flex; flex-direction: column; margin-bottom: 20px">
<div style="display:flex;margin-top:10px;align-items:center">
<div class="icon client-permission_channel"></div>
<div style="margin-left:3px;font-weight:bold">{{tr "Channel group:"/}}</div>
</div>
<div style="display: flex; margin-top: 1px; margin-left: 10px; align-items: center;">
<node key="group_{{:group_channel}}_icon"/>
<div style="margin-left: 3px">{{*: data["group_" + data.group_channel + "_name"]}}</div>
</div>
</div>
<div>
<node key="music_player"/>
</div>
</script>
<script class="jsrender-template" id="tmpl_selected_hostbanner" type="text/html">
<div class="hostbanner" x-divider-require-resize="1">
<img class="meta-image hostbanner-image" src="{{:hostbanner_gfx_url}}"/>
<a class="image-container"
{{if property_virtualserver_hostbanner_url}}
href="{{:property_virtualserver_hostbanner_url}}"
{{/if}}
target="_blank">
<div
style="background: center no-repeat url({{:hostbanner_gfx_url}})"
alt="{{tr 'Host banner'/}}"
class="hostbanner-image hostbanner-mode-{{:property_virtualserver_hostbanner_mode}}"
></div>
</a>
</div>
</script>
<script class="jsrender-template" id="tmpl_selected_server" type="text/html">
<div class="select_server">
<div class="container">
<!--
virtualserver_hostbanner_url: string = "";
virtualserver_hostbanner_gfx_url: string = "";
virtualserver_hostbanner_gfx_interval: number = 0;
virtualserver_hostbanner_mode: number = 0;
-->
<table class="select_info_table">
<tr>
<td>{{tr "Name:" /}}</td>
<td><node key="server_name"/></td>
</tr>
<tr>
<td>{{tr "Address:" /}}</td>
<td>{{>server_address}}</td>
</tr>
<!--
<tr>
<td>{{tr "Type:"/}}</td>
<td>TeaSpeak</td>
</tr>
-->
<tr>
<td>{{tr "Version:"/}}</td>
<td><a title="{{>property_virtualserver_version}}">{{*: data.property_virtualserver_version.split(" ")[0]; }}</a> on {{>property_virtualserver_platform}}</td>
</tr>
<tr>
<td>{{tr "Uptime:"/}}</td>
<td class="update_onlinetime">{{:server_onlinetime}}</td>
</tr>
<tr>
<td>{{tr "Current Channels:"/}}</td>
<td>{{:property_virtualserver_channelsonline}}</td>
</tr>
<tr>
<td>{{tr "Current Clients:"/}}</td>
<td>
{{:property_virtualserver_clientsonline}}/{{:property_virtualserver_maxclients}}
{{if property_virtualserver_reserved_slots > 0}}
(<div class="reserved-slots">-{{:property_virtualserver_reserved_slots}} {{tr "Slots reserved" /}}</div>)
{{/if}}
{{if hidden_clients > 0}}
({{:hidden_clients}} {{tr "clients hidden" /}})
{{/if}}
</td>
</tr>
<tr>
<td>{{tr "Current Queries:"/}}</td>
<td>{{:property_virtualserver_queryclientsonline}}</td>
</tr>
</table>
</div>
<button class="button-update btn btn-success">{{tr "Update info"/}}</button>
</div>
</script>
<script class="jsrender-template" id="tmpl_selected_channel" type="text/html">
<table class="select_info_table">
<tr>
<td>{{tr "Name:" /}}</td>
<td><node key="channel_name"/></td>
</tr>
{{if property_channel_topic}}
<tr>
<td>{{tr "Topic:"/}}</td>
<td>{{>property_channel_topic}}</td>
</tr>
{{/if}}
<tr>
<td>{{tr "Codec:"/}}</td>
<td>{{>property_channel_codec}}</td>
</tr>
<tr>
<td>{{tr "Codec Quality:"/}}</td>
<td>{{>property_channel_codec_quality}}</td>
</tr>
<tr>
<td>{{tr "Type:"/}}</td>
<td>{{>channel_type}}</td>
</tr>
<tr>
<td>{{tr "Current clients:"/}}</td>
<td>
{{>channel_clients}} /
{{if property_channel_maxclients == -1}}
{{tr "Unlimited"/}}
{{else}}
{{>property_channel_maxclients}}
{{/if}}
</td>
</tr>
<tr>
<td>{{tr "Subscription Status:"/}}</td>
<td>
{{if channel_subscribed}}
{{tr "Subscribed"/}}
{{else}}
{{tr "Unsubscribed"/}}
{{/if}}
</td>
</tr>
<tr>
<td>{{tr "Voice Data Encryption:" /}}</td>
<td>
{{if property_channel_codec_is_unencrypted}}
{{tr "Unencrypted"/}}
{{else}}
{{tr "Encrypted"/}}
{{/if}}
{{if server_encryption == 2}}
{{tr "(Overridden by the server with Encrypted)" /}}
{{/if}}
{{if server_encryption == 1}}
{{tr "(Overridden by the server with Unencrypted)"/}}
{{/if}}
</td>
</tr>
</table>
<div style="margin-top: 10px; flex-shrink: 1; flex-direction: column; display: flex; flex-grow: 1;">
<b style="margin-bottom: 2px">{{tr "Description"/}}</b>
<node key="bbcode_channel_description"></node>
</div>
</script>
<script class="jsrender-template" id="tmpl_poke_popup" type="text/html">
<div class="container-poke">
<div class="container-information">
<a>{{tr "You have been poked by"/}} </a><node key="invoker"></node><a>:</a>
</div>
<div class="container-message">
<a class="message">{{>message}}</a>
</div>
<button class="button-close">{{tr "Close" /}}</button>
</div>
</script>
<script class="jsrender-template" id="tmpl_query_create" type="text/html">
<div class="query-create">
<a>{{tr "Set the login name for your Server Query account." /}}</a>
<a>{{tr "You'll receive your password within the next step." /}}</a>
<div class="form-group row-name">
<label>Name:</label>
<input type="text" maxlength="64" minlength="3" class="form-control input-name">
</div>
<div class="buttons">
<button class="btn btn-danger button-close">{{tr "Close" /}}</button>
<button class="btn btn-success btn-raised button-create">{{tr "Create" /}}</button>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_query_created" type="text/html">
<div class="query-created">
<a>{{tr "Your server query credentials:" /}}</a>
<div class="form-row">
<div class="form-group">
<label>{{tr "Name:" /}}</label>
<input class="form-control query_name" type="text" maxlength="64" minlength="3" value="{{>username}}">
</div>
<div class="btn_copy_name icon_x32 client-copy" title="{{tr 'Copy username' /}}"></div>
</div>
<div class="form-row">
<div class="form-group">
<label>{{tr "Password:" /}}</label>
<input class="form-control query_password" type="text" maxlength="64" minlength="3" value="{{>password}}">
</div>
<div class="btn_copy_password icon_x32 client-copy" title="{{tr 'Copy username' /}}"></div>
</div>
<div class="buttons">
<button class="btn btn-primary button-close">{{tr "Close" /}}</button>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_query_manager" type="text/html">
<div class="query-management">
<div class="header">
<div class="form-group bmd-form-group buttons">
<button class="btn btn-success button button-query-create">{{tr "Create account" /}}</button>
<button class="btn btn-danger button button-query-delete">{{tr "Delete account" /}}</button>
<button class="btn btn-primary button button-query-rename">{{tr "Rename account" /}}</button>
<button class="btn btn-primary button button-query-change-password">{{tr "Change password" /}}</button>
</div>
<div class="form-group search">
<label class="bmd-label-floating">{{tr "search" /}}</label>
<input class="form-control input input-search" type="text">
</div>
</div>
<div class="query-list">
<div class="query-list-header">
<div class="column column-username">{{tr "Username" /}}</div>
<div class="column column-unique-id">{{tr "Unique ID" /}}</div>
<div class="column column-bound-server">{{tr "Bounded Server" /}}</div>
</div>
<div class="query-list-entries-container">
<div class="query-list-entries">
</div>
</div>
</div>
<div class="footer">
<div class="info">
<a>{{tr "loading..." /}}</a>
</div>
<div class="buttons">
<button class="btn btn-primary button-refresh">{{tr "Refresh" /}}</button>
</div>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_query_manager-list_entry" type="text/html">
<div class="entry">
<div class="column column-username">{{>username}}</div>
<div class="column column-unique-id">{{>unique_id}}</div>
<div class="column column-bound-server">{{>bounded_server}}</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_playlist_list" type="text/html">
<div class="playlist-management">
<div class="header">
<div class="form-group bmd-form-group buttons">
<button class="btn btn-success button button-playlist-create">{{tr "Create playlist" /}}</button>
<button class="btn btn-danger button button-playlist-delete">{{tr "Delete playlist" /}}</button>
<button class="btn btn-primary button-playlist-edit">{{tr "Edit playlist" /}}</button>
</div>
<div class="form-group search">
<label class="bmd-label-floating">{{tr "search" /}}</label>
<input class="form-control input input-search" type="text">
</div>
</div>
<div class="playlist-list">
<div class="playlist-list-header">
<div class="column column-id">{{tr "ID" /}}</div>
<div class="column column-title">{{tr "Title" /}}</div>
<div class="column column-creator">{{tr "Creator" /}}</div>
<div class="column column-type">{{tr "Type" /}}</div>
<div class="column column-used">{{tr "Used" /}}</div>
</div>
<div class="playlist-list-entries-container">
<div class="playlist-list-entries">
</div>
</div>
</div>
<div class="footer">
<div class="info">
<a>{{tr "loading..." /}}</a>
</div>
<div class="buttons">
<div class="form-group highlight-own">
<div class="switch">
<label>
<input type="checkbox" class="button-highlight-own">
{{tr "Highlight own playlists" /}}
</label>
</div>
</div>
<div class="form-group bmd-form-group">
<button class="btn btn-secondary btn-raised button-refresh">{{tr "Refresh" /}}</button>
</div>
</div>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_playlist_list-list_entry" type="text/html">
<div class="entry" playlist-owner-dbid="{{>playlist_owner_dbid}}">
<div class="column column-id">{{>playlist_id}}</div>
<div class="column column-title">{{>playlist_title}}</div>
<div class="column column-creator">{{>playlist_owner_name}}</div>
<div class="column column-type">
{{if playlist_type == 0}}
bot bound
{{else playlist_type == 1}}
global
{{else}}
{{>playlist_type}}
{{/if}}
</div>
<div class="column column-used">
{{if playlist_bot_id > 0}}
<div title="{{tr 'Playlist is in use by bot ' /}}{{>playlist_bot_id}}" class="icon client-apply"></div>
{{else}}
<div title="{{tr 'Playlist isnt use' /}}" class="icon client-delete"></div>
{{/if}}
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_playlist_edit" type="text/html">
<div class="playlist-edit">
<div class="general-properties">
<div class="form-group property-owner">
<label>{{tr "Playlist owner:" /}}</label>
<input type="text" class="form-control value" readonly>
</div>
<div class="form-group property-title">
<label>{{tr "Title:" /}}</label>
<input type="text" class="form-control value">
</div>
<div class="form-group property-description">
<label>{{tr "Description:" /}}</label>
<textarea class="form-control value"></textarea>
</div>
<div class="form-group property-type">
<label>{{tr "Type:" /}}</label>
<select class="form-control">
<option value="0">{{tr "Bot bound" /}}</option>
<option value="1">{{tr "Global" /}}</option>
</select>
</div>
</div>
<x-tab>
<x-entry>
<x-tag>{{tr "Songs" /}}</x-tag>
<x-content>
<div class="container-songs">
<div class="song-list">
<div class="song-list-header">
<div class="column column-id">{{tr "ID" /}}</div>
<div class="column column-url">{{tr "Url" /}}</div>
<div class="column column-loaded">{{tr "loaded" /}}</div>
<div class="column column-buttons"></div>
</div>
<div class="song-list-entries-container">
<div class="song-list-entries">
</div>
</div>
</div>
<div class="footer">
<div class="buttons">
<button class="btn btn-success button-song-add">{{tr "Add song" /}}</button>
<button class="btn btn-secondary button-refresh">{{tr "Refresh" /}}</button>
</div>
<div class="info-message"></div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Playback settings"/}}</x-tag>
<x-content>
<div class="playback-properties">
<div class="form-group property-replay-mode">
<label>{{tr "Replay mode" /}}</label>
<select class="form-control value">
<option value="0">{{tr "Normal"/}}</option>
<option value="1">{{tr "Loop list"/}}</option>
<option value="2">{{tr "Loop single entry"/}}</option>
<option value="3">{{tr "Shuffle"/}}</option>
</select>
</div>
<div class="form-group property-flag-delete-played">
<div class="switch">
<label>
<input type="checkbox">
{{tr "Delete played song:" /}}
</label>
</div>
</div>
<div class="form-group property-current-song">
<label>{{tr "Current replaying song:" /}}</label>
<input type="text" class="form-control value"/>
</div>
<div class="form-group property-flag-finished">
<div class="switch">
<label>
{{tr "Playlist finished status" /}}
<input type="checkbox">
<!-- TODO add info text here -->
</label>
</div>
</div>
</div>
</x-content>
</x-entry>
<x-entry>
<x-tag>{{tr "Permissions" /}}</x-tag>
<x-content>
<div class="container-permissions">
<div class="group_box">
<div class="header">{{tr "Access/modify powers" /}}</div>
<div class="content permissions-list">
<div class="form-group permission" permission="i_playlist_needed_view_power">
<label>{{tr "View power" /}}</label>
<input type="number" min="0" value="0" class="form-control value">
</div>
<div class="form-group permission" permission="i_playlist_needed_modify_power">
<label>{{tr "Modify" /}}</label>
<input type="number" min="0" value="0" class="form-control value">
</div>
<div class="form-group permission" permission="i_playlist_needed_permission_modify_power">
<label>{{tr "Permission modify" /}}</label>
<input type="number" min="0" value="0" class="form-control value">
</div>
<div class="form-group permission" permission="i_playlist_needed_delete_power">
<label>{{tr "Delete" /}}</label>
<input type="number" min="0" value="0" class="form-control value">
</div>
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Song management powers" /}}</div>
<div class="content permissions-list">
<div class="form-group permission" permission="i_playlist_song_needed_add_power">
<label>{{tr "Song add" /}}</label>
<input type="number" min="0" value="0" class="form-control value">
</div>
<div class="form-group permission" permission="i_playlist_song_needed_move_power">
<label>{{tr "Song reorder" /}}</label>
<input type="number" min="0" value="0" class="form-control value">
</div>
<div class="form-group permission" permission="i_playlist_song_needed_remove_power">
<label>{{tr "Song delete" /}}</label>
<input type="number" min="0" value="0" class="form-control value">
</div>
</div>
</div>
</div>
<div class="container-no-permissions">
<div class="text">You dont have permissions to see playlist permissions!</div>
</div>
</x-content>
</x-entry>
</x-tab>
<div class="buttons">
<button class="btn btn-success button-save">{{tr "Save" /}}</button>
<button class="btn btn-secondary button-close">{{tr "Close" /}}</button>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_playlist_edit-song_entry" type="text/html">
<div class="entry">
<div class="column column-id">{{>song_id}}</div>
<div class="column column-url">{{>song_url}}</div>
<div class="column column-loaded">{{>song_loaded}}</div>
<div class="column column-buttons">
<div class="button button-delete"><div class="icon client-delete"></div></div>
<div class="button button-info"><div class="icon client-about"></div></div>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_playlist_edit-song_info" type="text/html">
<div class="container-song-info">
<div class="properties">
<div class="property property-song-id">
<div class="key">{{tr "Song ID:" /}}</div>
<div class="value">{{>song_id}}</div>
</div>
<div class="property property-song-order">
<div class="key">{{tr "Song order:" /}}</div>
<div class="value">{{>song_previous_song_id}}</div>
</div>
<div class="property property-song-url">
<div class="key">{{tr "URL:" /}}</div>
<div class="value">{{>song_url}}</div>
</div>
<div class="property property-song-url-loader">
<div class="key">{{tr "URL resolver:"/}}</div>
<div class="value">{{if song_url_loader}}{{>song_url_loader}}{{else}}{{tr "unset" /}}{{/if}}</div>
</div>
<div class="property property-song-loaded">
<div class="key">{{tr "Song loaded:" /}}</div>
<div class="value">{{if song_loaded}}{{tr "yes" /}}{{else}}{{tr "no" /}}{{/if}}</div>
</div>
{{if song_loaded}}
{{if metadata && false}}
{{tr "Display metdata here!" /}}
{{else}}
<div class="property property-metadata-raw">
<div class="line">
<div class="key">{{tr "Metadata:" /}}</div>
<div class="value"><button class="toggle-metadata">show</button></div>
</div>
<textarea>{{>song_metadata}}</textarea>
</div>
{{/if}}
{{/if}}
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_playlist_edit-song_add" type="text/html">
<div class="container-song-add">
<div class="properties">
<div class="property property-url">
<div class="key">{{tr "URL:" /}}</div>
<input class="value" />
</div>
<div class="property property-loader">
<div class="key">{{tr "URL loader:" /}}</div>
<input class="value" type="text" list="song-loader-list" />
<datalist id="song-loader-list">
<option>YouTube</option>
<option>FFMpeg</option>
<!-- <option>ChannelProvider</option> --> <!-- requires a special url, may add a UI with file select? -->
</datalist>
</div>
</div>
<div class="container-buttons">
<button class="button-add">{{tr "Add URL" /}}</button>
<button class="button-cancel">{{tr "Cancel" /}}</button>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_manage_bookmarks" type="text/html">
<div class="modal-bookmarks">
<div class="group_box gb-list">
<div class="header">{{tr "Bookmarks" /}}</div>
<div class="content bookmark-list">
<div class="list">
<div class="entry bookmark">
<div class="name">TeaSpeak official</div>
</div>
</div>
</div>
</div>
<div class="buttons">
<button class="button-large btn btn-raised btn-secondary button-create">{{tr "Create new bookmark/directory" /}}</button>
<button class="button-large btn btn-danger button-delete">{{tr "Delete selected bookmark/directory" /}}</button>
<button class="button-small btn btn-raised btn-secondary button-create">{{tr "Create" /}}</button>
<button class="button-small btn btn-danger button-delete">{{tr "Delete" /}}</button>
</div>
<hr>
<div class="group_box gb-settings">
<div class="header">{{tr "Bookmark settings" /}}</div>
<div class="content">
<div class="bookmark-setting bookmark-setting-bookmark">
<div class="form-group">
<label for="input-bookmark-name" class="bmd-label-static">{{tr "Bookmark name:" /}}</label>
<input id="input-bookmark-name" class="form-control setting-bookmark-name">
</div>
<div class="form-group">
<label for="input-bookmark-profile" class="bmd-label-static">{{tr "Connect profile:" /}}</label>
<select id="input-bookmark-profile" class="form-control setting-bookmark-profile"></select>
</div>
<div class="group_box">
<div class="header">{{tr "Server Properties" /}}</div>
<div class="content">
<div class="form-group">
<label for="input-bookmark-server-host" class="bmd-label-static">{{tr "Server address:" /}}</label>
<input id="input-bookmark-server-host" class="form-control setting-server-host">
</div>
<div class="form-group">
<label for="input-bookmark-server-port" class="bmd-label-static">{{tr "Server port:" /}}</label>
<input type="number" min="1" max="65665" id="input-bookmark-server-port" class="form-control setting-server-port">
</div>
<div class="form-group">
<!-- TODO generated id because of password field (id="bookmark_server_password_{{rnd '0~13377331'/}}") -->
<label for="input-bookmark-server-password" class="bmd-label-floating">{{tr "Server password" /}}</label>
<input id="input-bookmark-server-password" class="form-control setting-server-password" autocomplete="nope" type="password">
</div>
</div>
</div>
<!--
<div class="group_box">
<div class="header">{{tr "Connect Properties (Not yet supported)" /}}</div>
<div class="content">
<div class="form-group">
<label for="input-bookmark-username" class="bmd-label-floating">{{tr "Default Username" /}}</label>
<input id="input-bookmark-username" class="form-control setting-username" disabled>
</div>
<div class="form-row container-default-channel-select">
<div class="form-group container-default-channel">
<label for="input-bookmark-channel" class="bmd-label-floating">{{tr "Default Channel" /}}</label>
<input id="input-bookmark-channel" class="form-control setting-channel" disabled>
</div>
<div class="form-group bmd-form-group">
<button class="btn btn-primary button-set-to-current" disabled>{{tr "Current Channel" /}}</button>
</div>
</div>
<div class="form-group">
<!- TODO generated id because of password field (id="bookmark_server_password_{{rnd '0~13377331'/}}") ->
<label for="input-bookmark-channel-password" class="bmd-label-floating">{{tr "Default channel password" /}}</label>
<input id="input-bookmark-channel-password" class="form-control setting-channel-password" type="password" disabled>
</div>
</div>
</div>
-->
</div>
<div class="bookmark-setting bookmark-setting-directory">
<div class="form-group">
<label for="input-bookmark-dirname" class="bmd-label-static">{{tr "Directory name:" /}}</label>
<input id="input-bookmark-dirname" class="form-control setting-bookmark-name">
</div>
</div>
</div>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_manage_bookmarks-list_entry" type="text/html">
{{if type == "bookmark" }}
<div class="entry bookmark">
<div class="name">{{>name}}</div>
</div>
{{else type == "directory" }}
<div class="entry directory">
<div class="name">{{>name}}</div>
<div class="members"> </div>
</div>
{{/if}}
</script>
<script class="jsrender-template" id="tmpl_manage_bookmarks-create" type="text/html">
<div class="modal-bookmark-create">
<div class="form-group">
<label class="bmd-label-floating">{{tr "Bookmark type:" /}}</label>
<select class="form-control bookmark-type">
<option value="bookmark">Bookmark</option>
<option value="directory">Directory</option>
</select>
</div>
<div class="form-group">
<label class="bmd-label-floating">{{tr "Parent directory:" /}}</label>
<select class="form-control bookmark-parent">
<option bookmark-uuid=""></option>
</select>
</div>
<div class="form-group">
<label class="bmd-label-floating">{{tr "Bookmark name" /}}</label>
<input class="form-control bookmark-name">
</div>
<div class="buttons">
<button class="btn btn-success button-create">Create</button>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_icon_select" type="text/html">
<div class="modal-icon-select">
<div class="container-icons">
<div class="group_box">
<div class="header">{{tr "Remote" /}}</div>
<div class="content">
<div class="container-icons-list">
<div class="container-icons-remote {{if enable_select}}icon-select{{/if}}"></div>
<div class="container-loading">
<a>{{tr "loading..." /}}</a>
</div>
<div class="container-no-permissions">
<a>{{tr "You dont have permissions the view the icons" /}}</a>
</div>
<div class="container-error">
<a class="error-message">{{ŧr "An error occured" /}}</a>
</div>
</div>
<!--
<div class="container-buttons">
<button class="btn btn-success button-upload">{{tr "Upload" /}}</button>
<button class="btn btn-danger button-upload">{{tr "Delete" /}}</button>
</div>
-->
</div>
</div>
<div class="group_box">
<div class="header">{{tr "Local" /}}</div>
<div class="content">
<div class="container-icons-list">
<div class="container-icons-local {{if enable_select}}icon-select{{/if}}"></div>
</div>
</div>
</div>
</div>
<div class="container-buttons">
<button class="btn btn-primary btn-raised button-reload">{{tr "Reload" /}}</button>
<div class="spacer"></div>
{{if enable_select}}
<button class="btn btn-success btn-raised button-select-no-icon">{{tr "Remove icon" /}}</button>
<button class="btn btn-success btn-raised button-select"><a>{{tr "Select " /}}</a><div class="selected-item-container"></div></button>
{{/if}}
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_avatar_list" type="text/html">
<div class="modal-avatar-list">
<div class="container-list">
<div class="list-header">
<div class="column column-username">{{tr "Username" /}}</div>
<div class="column column-unique-id">{{tr "Unique ID" /}}</div>
<div class="column column-size">{{tr "Size" /}}</div>
<div class="column column-timestamp">{{tr "Date" /}}</div>
</div>
<div class="list-entries-container">
<div class="list-entries">
</div>
</div>
</div>
<div class="container-info">
<div class="container-data">
<div class="form-group">
<label class="bmd-label-static">{{tr "Username" /}}</label>
<input class="form-control property-username" disabled>
</div>
<div class="form-group">
<label class="bmd-label-static">{{tr "Unique ID" /}}</label>
<input class="form-control property-unique-id" disabled>
</div>
<div class="form-group">
<label class="bmd-label-static">{{tr "Avatar ID" /}}</label>
<input class="form-control property-avatar-id" disabled>
</div>
</div>
<div class="container-preview">
<div class="container-image"></div>
<div class="container-image-data">
<a>{{tr "Image info:" /}}</a>
<div class="form-group">
<label class="bmd-label-static">{{tr "Bytes" /}}</label>
<input class="form-control property-image-size" disabled>
</div>
<div class="form-group">
<label class="bmd-label-static">{{tr "Width" /}}</label>
<input class="form-control property-image-width" disabled>
</div>
<div class="form-group">
<label class="bmd-label-static">{{tr "Height" /}}</label>
<input class="form-control property-image-height" disabled>
</div>
<div class="form-group">
<label class="bmd-label-static">{{tr "Type" /}}</label>
<input class="form-control property-image-type" disabled>
</div>
</div>
</div>
<div class="container-buttons">
<button class="btn btn-danger button-delete">{{tr "Delete" /}}</button>
<button class="btn btn-success button-download">{{tr "Download" /}}</button>
</div>
<div class="disabled-overlay">
<a>{{tr "Please select a user" /}}</a>
</div>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_avatar_list-list_entry" type="text/html">
<div class="entry">
<div class="column column-username">{{>username}}</div>
<div class="column column-unique-id">{{>unique_id}}</div>
<div class="column column-size">{{>size}}</div>
<div class="column column-timestamp">{{>timestamp}}</div>
</div>
</script>
</body>
</html>
<!--
<script class="jsrender-template" id="tmpl_query_manager-list_entry" type="text/html">
<div class="entry">
<div class="column column-username">{{>username}}</div>
<div class="column column-unique-id">{{>unique_id}}</div>
<div class="column column-bound-server">{{>bounded_server}}</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_playlist_list" type="text/html">
<div class="playlist-management">
<div class="header">
<div class="form-group bmd-form-group buttons">
<button class="btn btn-success button button-playlist-create">{{tr "Create playlist" /}}</button>
<button class="btn btn-danger button button-playlist-delete">{{tr "Delete playlist" /}}</button>
<button class="btn btn-primary button-playlist-edit">{{tr "Edit playlist" /}}</button>
</div>
<div class="form-group search">
<label class="bmd-label-floating">{{tr "search" /}}</label>
<input class="form-control input input-search" type="text">
</div>
</div>
<div class="playlist-list">
<div class="playlist-list-header">
<div class="column column-id">{{tr "ID" /}}</div>
<div class="column column-title">{{tr "Title" /}}</div>
<div class="column column-creator">{{tr "Creator" /}}</div>
<div class="column column-type">{{tr "Type" /}}</div>
<div class="column column-used">{{tr "Used" /}}</div>
</div>
<div class="playlist-list-entries-container">
<div class="playlist-list-entries">
</div>
</div>
</div>
<div class="footer">
<div class="info">
<a>{{tr "loading..." /}}</a>
</div>
<div class="buttons">
<div class="form-group highlight-own">
<div class="switch">
<label>
<input type="checkbox" class="button-highlight-own">
{{tr "Highlight own playlists" /}}
</label>
</div>
</div>
<div class="form-group bmd-form-group">
<button class="btn btn-secondary btn-raised button-refresh">{{tr "Refresh" /}}</button>
</div>
</div>
</div>
</div>
</script>