{% extends "layout.html" %}

{% block title %}Account linking for {{ g.user.nickname }} - DotaNoobs {% endblock %}

{% block content %}
<div class="uk-grid" data-uk-grid-margin>
    <div class="uk-width-2-3">
        <h2 class="uk-float-left"><img class="" src="{{ g.user.avatar }}" />&nbsp;{{ g.user.nickname }}'s Linked Accounts</h2>
    </div>
    <div class="uk-width-1-3 uk-text-center">
        <a href="{{ url_for('user_settings') }}" class="uk-button">Back to Settings <i class="uk-icon-star-o"></i></a>
    </div>
    <!--Main content area -->
    <div class="uk-width-1-1 uk-panel">
        <form class="uk-form uk-form-width-large" action="" method="post" name="enable_stats">
            {{ form.hidden_tag() }}
            <fieldset data-uk-margin>
                <div class="uk-form-row">
                    <h3 class="">Link Teamspeak Account</h3>
                    {% if g.user.teamspeak_id %} <span class="uk-text-success"><i class="uk-icon-check"></i> Already verified</span> {% endif %}
                </div>
                <div class="uk-form-row">
                    <label class="uk-form-label">Teamspeak ID: <a href="#tsid_modal" data-uk-modal> <i class="uk-icon-question-circle" data-uk-tooltip title="Click for help"></i> </a></label> <br/>
                    {{ form.teamspeak_id }}
                    <div id="tsid_modal" class="uk-modal">
                        <div class="uk-modal-dialog">
                            <a class="uk-modal-close uk-close"></a>
                            Enter your Teamspeak Unique Client ID into this field (note: this is NOT your Teamspeak name). You can access
                            your TSID as follows:
                            <br/>
                            <ol class="">
                                <li>Click on the "Settings" menu at the top of your Teamspeak client</li>
                                <li>Select "Identities" from the drop-down menu.</li>
                                <li>Copy your "Unique ID"</li>
                                <li>Close this modal-window with the little X (upper right)</li>
                                <li>Paste your "Unique ID" into the <em>Teamspeak ID</em> field</li>
                                <br /><br />
                                <img src="{{ url_for('static', filename='img/ts3-identities-menu.png') }}" />
                                <br />
                                <img src="{{ url_for('static', filename='img/ts3-identities-copy.png') }}" />
                            </ol>
                        </div>
                    </div>
                </div>
                <div class="uk-form-row">
                    <h3 class="">Link Forum Board Account</h3>
                    {% if g.user.forum_id %} <span class="uk-text-success"><i class="uk-icon-check"></i> Already verified</span> {% endif %}
                </div>
                <div class="uk-form-row">
                    <label class="uk-form-label">Forum Username:</label><br/>
                    {{ form.forum_username }}
                </div>
                <div class="uk-form-row">
                    <label class="uk-form-label">Forum Password:</label><br/>
                    {{ form.forum_password }}
                </div>
                <div class="uk-form-controls uk-margin-top">
                    <button class="uk-button uk-button-success" type="submit">Save</button>
                    <a class="uk-button" href="{{ url_for('user_profile', userid=g.user.id) }}">Cancel</a>
                </div>
            </fieldset>
        </form>
    </div>
</div>
{% endblock %}