{% extends 'aa_mumble_quick_connect/base.html' %}

{% load i18n %}
{% load humanize %}

{% block aa_mumble_quick_connect_body %}
    {% if mumble_service_installed %}
        {% if request.user.mumble %}
            <div class="row mb-3" data-masonry='{"percentPosition": true }'>
                {% include "aa_mumble_quick_connect/partials/channels-in-sections.html" %}
                {% include "aa_mumble_quick_connect/partials/channels-without-sections.html" %}
            </div>
        {% else %}
            <div class="alert alert-warning">
                {% translate "You don't have your Mumble service set up. Please go to the services page and activate the Mumble service." %}
            </div>
        {% endif %}
    {% else %}
        <div class="alert alert-warning">
            {% translate "Mumble service is not installed!" %}
        </div>
    {% endif %}
{% endblock aa_mumble_quick_connect_body %}

{% block extra_javascript %}
    {% include "aa_mumble_quick_connect/bundles/masonry-layout-js.html" %}

    <script>
    $(document).ready(() => {
        // Scroll the highlighted element into view if needed …
        const element = document.getElementById('section-{{ section_highlight }}');

        if (element) {
            element.scrollIntoView({
                behavior: "smooth",
                block: "nearest",
                inline: "nearest"
            });
        }
    });
    </script>
{% endblock extra_javascript %}
