{% extends "allianceauth/base.html" %}

{% load bootstrap %}
{% load static %}
{% load i18n %}

{% block page_title %}{% translate "Verify Teamspeak" %}{% endblock page_title %}

{% block extra_css %}{% endblock extra_css %}

{% block content %}
    <div>
        <h1 class="page-header text-center">{% translate "Verify Teamspeak Identity" %}</h1>

        <div class="col-lg-12 container">
            <div class="col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title text-center">{% translate "If you are already connected to TS" %}</h3>
                    </div>

                    <div class="panel-body text-center">
                        <p>
                            {% translate "If you are already on the server use the following token:" %}<br><br>
                            <b>{{ authinfo.teamspeak3_perm_key }}</b>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">{% translate "You <b>DO NOT</b> have Teamspeak Open" %}</h3>
                    </div>

                    <div class="panel-body text-center">
                        <a href="ts3server://{{ public_url }}?token={{ authinfo.teamspeak3_perm_key }}&nickname={{ authinfo.teamspeak3_uid }}" class="btn btn-primary btn-block btn-lg" title="Join">{% translate "Join Server" %}</a>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title text-center">{% translate "Auth Teamspeak" %}</h3>
                    </div>

                    <div class="panel-body" style="min-height: 100px;">
                       <div class="panel-body text-center">
                           <p>Once connected click here</p>
                       </div>

                        <form class="form-signin" role="form" action="{% url 'teamspeak3:verify' %}" method="POST">
                            {% csrf_token %}
                            {{ form|bootstrap }}
                            <br/>
                            <button class="btn btn-lg btn-primary btn-block" type="submit">{% translate "Continue" %}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
