{% load i18n %}
{% load static %}
{% load aa_mumble_quick_connect %}

{% if channels_without_sections %}
    <div class="col-sm-6 col-lg-4 mb-3">
        <div id="section-uncategorized" class="card card-primary{% if section_highlight == 'uncategorized' %} border-success{% endif %}">
            <div class="card-header{% if section_highlight == 'uncategorized' %} bg-success{% endif %}">
                <div class="card-title">
                    <span>{% translate "Uncategorized" %}</span>
                    <span class="float-end">
                        <a href="{% url "aa_mumble_quick_connect:index" "uncategorized" %}">
                            <i class="fa-solid fa-link"></i>
                        </a>
                    </span>
                </div>
            </div>

            <div class="card-body">
                <ul class="list-group">
                    {% for channel in channels_without_sections %}
                        <li class="list-group-item">
                            <a class="btn btn-secondary w-100" href="{% aa_mumble_quick_connect_link channel.url request.user.mumble.username %}">
                                <img
                                    src="{% static 'aa_mumble_quick_connect/images/mumble-icon.png' %}"
                                    alt="Mumble"
                                    height="32"
                                    width="32"
                                    style="margin: 15px;"
                                >

                                <span>{{ channel.name }}</span>
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% endif %}
