{% extends 'charlink/base.html' %}
{% load bootstrap %}
{% load charlinkutils %}

{% block page_title %}Charlink{% endblock page_title %}

{% block extra_css %}
    <style>
        .glyphicon-ok {
            color: green;
        }

        .glyphicon-remove {
            color: red;
        }
    </style>
{% endblock extra_css %}

{% block charlink_page_header %}<h1 class="page-header text-center">Character Linking</h1>{% endblock charlink_page_header %}

{% block charlink_content %}
    <ul class="nav nav-tabs">
        <li class="active">
            <a data-toggle="tab" href="#loginForm">
                Login Form
            </a>
        </li>
        <li>
            <a data-toggle="tab" href="#linkedCharacters">
                Linked Characters
            </a>
        </li>
    </ul>
    <div class="panel panel-default panel-tabs-aa">
        <div class="panel-body">
            <div class="tab-content">
                <div id="loginForm" class="tab-pane fade in active text-center">
                    <p>Select the apps you want to link from the list. You will be redirected to eveonline website to authenticate and provide the token with all the scopes needed.</p>
                    <br>
                    <form method="post">
                        {% csrf_token %}
                        {{ form|bootstrap }}
                        <button type="submit" class="btn btn-primary">Login</button>
                    </form>
                </div>
                <div id="linkedCharacters" class="tab-pane fade in text-center">
                    <table class="table table-aa">
                        <thead>
                            <th class="text-center">Character</th>
                            {% for app_imports in characters_added.apps.values %}
                                {% for login_import in app_imports.imports %}
                                    <th scope="row" class="text-center">{{ login_import.field_label }}</th>
                                {% endfor %}
                            {% endfor %}
                        </thead>
                        <tbody>
                            {% for char in characters_added.characters %}
                                <tr>
                                    <td>{{ char }}</td>
                                    {% for imports in characters_added.apps.values %}
                                        {% for login_data in imports.imports %}
                                            {% with is_added=char|get_char_attr:login_data.get_query_id %}
                                                {% if is_added %}
                                                    <td><span class="glyphicon glyphicon-ok"></span></td>
                                                {% else %}
                                                    <td><span class="glyphicon glyphicon-remove"></span></td>
                                                {% endif %}
                                            {% endwith %}
                                        {% endfor %}
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <ul class="nav nav-tabs">
        {% for import_data in characters_added.apps.values %}
            {% for login_data in import_data.imports %}
                <li{% if forloop.parentloop.first and forloop.first %} class="active"{% endif %}>
                    <a data-toggle="tab" href="#{{ import_data.app_label }}-{{ login_data.unique_id }}">
                        {{ login_data.field_label }}
                    </a>
                </li>
            {% endfor %}
        {% endfor %}
    </ul>
    <div class="panel panel-default panel-tabs-aa">
        <div class="panel-body">
            <div class="tab-content">
                {% for import_data in characters_added.apps.values %}
                    {% for login_data in import_data.imports %}
                        <div id="{{ import_data.app_label }}-{{ login_data.unique_id }}" class="tab-pane fade in{% if forloop.parentloop.first and forloop.first %} active{% endif %}">
                            Scopes required:
                            {{ login_data.scopes|unordered_list|safe }}
                        </div>
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock charlink_content %}