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

{% block page_title %}Charlink App Audit{% endblock page_title %}

{% block extra_css %}
    <link rel="stylesheet" type="text/css" href="{% charlink_static 'charlink/css/added-icons.css' %}">
    {% include "bundles/datatables-css-bs5.html" %}
{% endblock extra_css %}

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

{% block charlink_content %}
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                {% for login_data in logins.keys %}
                    <li class="nav-item">
                        <button class="nav-link{% if forloop.first %} active{% endif %}" id="{{ login_data.app_label }}-{{ login_data.unique_id }}-tab" data-bs-toggle="tab" data-bs-target="#{{ login_data.app_label }}-{{ login_data.unique_id }}" type="button" role="tab" aria-controls="{{ login_data.app_label }}-{{ login_data.unique_id }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
                            {{ login_data.field_label }}
                        </button>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                {% for login_data, characters in logins.items %}
                    <div class="tab-pane fade{% if forloop.first %} show active{% endif %}" id="{{ login_data.app_label }}-{{ login_data.unique_id }}" role="tabpanel" aria-labelledby="{{ login_data.app_label }}-{{ login_data.unique_id }}-tab" tabindex="0">
                        <div class="table-reponsive">
                            <table class="table table-aa charlink-table text-center">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th class="text-center">Character</th>
                                        <th scope="col" class="text-center">{{ login_data.field_label }}</th>
                                        <th class="text-center">Main Character</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for char in characters %}
                                        <tr>
                                            <td><img src="{{ char.portrait_url }}" class="rounded" alt="{{ char }}"></td>
                                            <td>{{ char }}</td>
                                            {% with is_added=char|get_char_attr:login_data.get_query_id %}
                                                {% if is_added %}
                                                    <td><i class="fas fa-check fa-lg"><span class="d-none">A</span></td>
                                                {% else %}
                                                    <td><i class="fas fa-times fa-lg"><span class="d-none">B</span></td>
                                                {% endif %}
                                            {% endwith %}
                                            <td>
                                                <a href="{% url 'charlink:audit_user' char.character_ownership.user_id %}">{{ char.character_ownership.user.profile.main_character }} <i class="fas fa-external-link-alt fa-xs"></i></a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock charlink_content %}

{% block extra_javascript %}
    {% include "bundles/datatables-js-bs5.html" %}
{% endblock extra_javascript %}

{% block extra_script %}
    $(document).ready(function() {
        $('.charlink-table').DataTable({
            columnDefs: [
                { orderable: false, targets: 0 },
            ],
            order: [],
        });
    });
{% endblock extra_script %}