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

{% load i18n %}
{% load sri %}

{% block details %}
    <div class="row">
        <div class="col-md-5 col-lg-4 mb-3">
            <div class="card position-sticky" style="top: 1rem;">

                <div class="card-body">
                    <h5 class="card-title">
                        {% translate "ESI OAuth2 Scopes" %} <small class="text-muted">{% translate "and what each scope unlocks" %}</small>
                    </h5>

                    <p>
                        {% blocktrans with openapi_url="https://esi.evetech.net/meta/openapi.json" compat_dates_url="https://esi.evetech.net/meta/compatibility-dates" %}
                            Parsed live from <a href="{{ openapi_url }}" target="_blank" rel="noopener">openapi.json</a>,
                            requested with an <code>X-Compatibility-Date</code> header (see <a href="{{ compat_dates_url }}" target="_blank" rel="noopener">compatibility dates</a>),
                            switch dates below to see how scopes and endpoints have changed over time.
                            <br>
                            Search for a scope name, an endpoint path, or a word from an endpoint's summary to find out which scope you need,
                            or expand a scope to see every endpoint it unlocks.
                        {% endblocktrans %}
                    </p>

                    <div id="scopes-status" class="alert alert-info" role="alert">{% translate "Loading scopes from ESI…" %}</div>

                    <div id="scopes-controls-wrap" class="d-none">
                        <form>
                            <div class="mb-3">
                                <label for="scopes-compat-date" class="form-label">{% translate "Compatibility date" %}</label>
                                <select id="scopes-compat-date" class="form-select" aria-label="{% translate 'Select a compatibility date' %}"></select>
                                <div class="form-text">{% translate "Select a compatibility date." %}</div>
                            </div>

                            <div class="mb-3">
                                <label for="scopes-search" class="form-label">{% translate "Search" %}</label>
                                <input
                                    type="text"
                                    id="scopes-search"
                                    class="form-control"
                                    placeholder='{% translate "Search…" %}'
                                    autocomplete="off"
                                >
                                <div class="form-text">{% translate 'Search scopes or endpoints (e.g. "assets", "mail", "GetCharactersCharacterIdAssets").' %}</div>
                            </div>
                        </form>

                        <p id="scopes-count" class="text-muted mt-3"></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-7 col-lg-8">
            <div id="scopes-list" class="accordion"></div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    {% comment %}Django translations for JavaScript are not available in the static files, so we need to pass them to the JS code here{% endcomment %}
    {% translate "No endpoints currently require this scope." as no_endpoints_message %}
    {% translate "%(current_scopes_length)s scopes covering %(total_endpoints)s endpoints, for compatibility date %(date)s" as scopes_count_message %}
    {% translate "Showing %(number)s of %(total)s scopes." as showing_scopes_message %}
    {% translate 'No scopes or endpoints match "%(query)s".' as no_match_message %}
    {% translate "Could not load the ESI OpenAPI specs (%(textstatus)s). Try reloading the page." as load_error_message %}
    {% translate "Loading scopes for compatibility date %(date)s…" as loading_scopes_message %}
    {% translate "Failed to load OpenAPI specs: %(status)s %(statustext)s" as failed_load_spec_message %}
    {% translate "Failed to load compatibility dates: %(status)s %(statustext)s" as failed_load_compatibility_dates_message %}
    {% translate "No compatibility dates returned!" as no_compatibility_dates_message %}
    {% translate "most recent" as most_recent_message %}
    {% translate "%(count)s endpoint" as endpoint_singular_message %}
    {% translate "%(count)s endpoints" as endpoint_plural_message %}

    <script>
        const aa_esi_oauth2_scopes_translations = {
            no_endpoints_message: "{{ no_endpoints_message|escapejs }}",
            scopes_count_message: "{{ scopes_count_message|escapejs }}",
            showing_scopes_message: "{{ showing_scopes_message|escapejs }}",
            no_match_message: "{{ no_match_message|escapejs }}",
            load_error_message: "{{ load_error_message|escapejs }}",
            loading_scopes_message: "{{ loading_scopes_message|escapejs }}",
            failed_load_spec_message: "{{ failed_load_spec_message|escapejs }}",
            failed_load_compatibility_dates_message: "{{ failed_load_compatibility_dates_message|escapejs }}",
            no_compatibility_dates_message: "{{ no_compatibility_dates_message|escapejs }}",
            most_recent_message: "{{ most_recent_message|escapejs }}",
            endpoint_message: {
                singular: "{{ endpoint_singular_message|escapejs }}",
                plural: "{{ endpoint_plural_message|escapejs }}"
            }
        };
    </script>

    {% sri_static 'aa_esi_oauth2_scopes/js/esi-scopes.min.js' %}
{% endblock %}