<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script class="jsrender-template" id="tmpl_connect" type="text/html">
            <div style="margin-top: 5px;">
                <div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between">
                    <div style="width: 68%; margin-bottom: 5px">
                        <div>{{tr "Remote address and port:" /}}</div>
                        <input type="text" style="width: 100%" class="connect_address" value="unknown">
                    </div>
                    <div style="width: 20%">
                        <div>{{tr "Server password:" /}}</div>
                        <form name="server_password_form" onsubmit="return false;">
                            <input type="password" id="connect_server_password_{{rnd '0~13377331'/}}" autocomplete="off" style="width: 100%" class="connect_password">
                        </form>
                    </div>
                </div>
                <div>
                    <div>{{tr "Nickname:" /}}</div>
                    <input type="text" style="width: 100%" class="connect_nickname" value="">
                </div>
                <hr>
                <div class="group_box">
                    <div style="display: flex; justify-content: space-between;">
                        <div style="text-align: right;">{{tr "Identity Settings" /}}</div>
                        <select class="identity_select">
                            <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>
                    <hr>
                    <div class="identity_config_TEAMSPEAK identity_config">
                        {{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_config_TEAFORO identity_config">
                        <div class="connected">
                            {{tr "You're using your forum account as verification"/}}
                        </div>
                        <div class="disconnected">
                            <!-- TODO tr -->
                            You cant use your TeaSpeak forum account.<br>
                            You're not connected!<br>
                            Click {{if !client}}<a href="{{:forum_path}}login.php">here</a>{{else}}<a href="#" class="native-teaforo-login">here</a>{{/if}} to login via the TeaSpeak forum.
                        </div>
                    </div>
                    <div class="identity_config_NICKNAME identity_config">
                        {{tr "This is just for debug and uses the name as unique identifier" /}}
                        {{tr "This is just for debug and uses the name as unique identifier" + "Hello World :D" /}}
                        {{tr "This is just for debug and uses the name as unique identifier" + `Hello World :D 2` /}}
                    </div>

                    <div style="background-color: red; border-radius: 1px; display: none" class="error_message"></div>
                </div> <!-- <a href="<?php echo authPath() . "login.php"; ?>">Login</a> via the TeaSpeak forum. -->
            </div>
        </script>
    </body>
</html>