{% extends 'charlink/base.html' %}
{% load i18n %}

{% block page_title %}{% translate "Charlink Imported Apps" %}{% endblock page_title %}

{% block charlink_page_header %}<h1 class="page-header text-center">{% translate "Imported Apps" %}</h1>{% endblock charlink_page_header %}

{% block charlink_content %}
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <button class="nav-link active" id="imported-tab" data-bs-toggle="tab" data-bs-target="#imported" type="button" role="tab" aria-controls="imported" aria-selected="true">
                        {% translate "Imported" %}
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="duplicated-tab" data-bs-toggle="tab" data-bs-target="#duplicatedApps" type="button" role="tab" aria-controls="duplicatedApps" aria-selected="false">
                        {% translate "Duplicated" %}
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="failed-tab" data-bs-toggle="tab" data-bs-target="#failedApps" type="button" role="tab" aria-controls="failedApps" aria-selected="false">
                        {% translate "Failed to import" %}
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="missing-tab" data-bs-toggle="tab" data-bs-target="#missingApps" type="button" role="tab" aria-controls="missingApps" aria-selected="false">
                        {% translate "Missing imports" %}
                    </button>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane fade text-center show active" id="imported" role="tabpanel" aria-labelledby="imported-tab" tabindex="0">
                    <div class="accordion" id="importedAccordion">
                        {% for app, import in imported_apps.items %}
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ app }}" aria-expanded="false" aria-controls="collapse{{ app }}">
                                        {{ app }}
                                    </button>
                                </h2>
                                <div id="collapse{{ app }}" class="accordion-collapse collapse" data-bs-parent="#importedAccordion">
                                    <div class="accordion-body">
                                        <div class="row justify-content-evenly">
                                            {% for login_import in import.imports %}
                                                <div class="col-md-6">
                                                    <div class="card">
                                                        <div class="card-header">{{ login_import.field_label }}</div>
                                                        <div class="card-body">
                                                            {% translate "Visible:" %}
                                                            <a href="{% url "charlink:toggle_app_visible" login_import.get_query_id %}" class="btn {% if login_import.is_ignored %}btn-danger{% else %}btn-success{% endif %} btn-sm ms-2">
                                                                {% if login_import.is_ignored %}
                                                                    <i class="fa-solid fa-eye-slash"></i>
                                                                {% else %}
                                                                    <i class="fa-solid fa-eye"></i>
                                                                {% endif %}
                                                            </a>
                                                        </div>
                                                        <div class="card-body">
                                                            {% translate "Default selection:" %}
                                                            <a href="{% url "charlink:toggle_app_default_selection" login_import.get_query_id %}" class="btn {% if login_import.default_selection %}btn-success{% else %}btn-danger{% endif %} btn-sm ms-2">
                                                                {% if login_import.default_selection %}
                                                                    <i class="fa-solid fa-check"></i>
                                                                {% else %}
                                                                    <i class="fa-solid fa-times"></i>
                                                                {% endif %}
                                                            </a>
                                                        </div>
                                                        <br>
                                                        <div class="card-body">
                                                            {% translate "Scopes required:" %}
                                                            {{ login_import.scopes|unordered_list|safe }}
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="tab-pane fade text-center" id="duplicatedApps" role="tabpanel" aria-labelledby="duplicated-tab" tabindex="0">
                    {% if duplicated_apps|length > 0 %}
                        <ul class="list-group">
                            {% for app in duplicated_apps %}
                                <li class="list-group-item">{{ app }}</li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="card-text">{% translate "No duplicated apps found." %}</p>
                    {% endif %}
                </div>
                <div class="tab-pane fade text-center" id="failedApps" role="tabpanel" aria-labelledby="failed-tab" tabindex="0">
                    {% if failed_to_import|length > 0 %}
                        <ul class="list-group">
                            {% for app, reason in failed_to_import.items %}
                                <li class="list-group-item">{{ app }}: {{ reason }}</li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="card-text">{% translate "All apps have been imported successfully." %}</p>
                    {% endif %}
                </div>
                <div class="tab-pane fade text-center" id="missingApps" role="tabpanel" aria-labelledby="missing-tab" tabindex="0">
                    {% if no_import|length > 0 %}
                        <ul class="list-group">
                            {% for app in no_import %}
                                <li class="list-group-item">{{ app }}</li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="card-text">{% translate "No missing imports found." %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock charlink_content %}