{% if contacts %}
    <li class="subheader">
        <div>
            <p>{{ __('page.contacts') }}</p>
        </div>
    </li>
    {% for value in contacts %}
        <li
            id="{{ value.jid|cleanupId }}"
            title="{{ value.jid }}"
            name="{{ value.jid|cleanupId }}-{{ value.truename|cleanupId }}-{% if value.groups %}{{ value.groups[0]|cleanupId }}{% endif %}{% if value.presence %}-{{ value.presence|cleanupId }}{% endif %}"
            class="{% if not value.presence %}faded{% endif %}"
        >
            <span class="primary icon bubble active {% if not value.presence %}faded{% else %}status {{ value.presence }}{% endif %}"
                onclick="ChatActions_ajaxGetContact('{{ value.jid|echapJS }}'); Drawer.clear();">
                <a href="#" onclick="listIconClick(event)">
                    <img loading="lazy" src="{{ value.picture }}">
                </a>
            </span>

            {% if value.call_audio %}
                <span title="{{ __('button.audio_call') }}" class="control icon active gray"
                    onclick="Visio_ajaxGetLobby('{{ value.call_audio|echapJS }}', true); Drawer.clear();">
                    <a href="#" onclick="listIconClick(event)">
                        <i class="material-symbols">phone</i>
                    </a>
                </span>
            {% endif %}
            {% if value.call_video %}
                <span title="{{ __('button.video_call') }}" class="control icon active gray"
                    onclick="Visio_ajaxGetLobby('{{ value.call_video|echapJS }}', true, true); Drawer.clear();">
                    <a href="#" onclick="listIconClick(event)">
                        <i class="material-symbols">videocam</i>
                    </a>
                </span>
            {% endif %}

            <span class="control icon active gray divided" onclick="Search.chat('{{ value.jid|echapJS }}', false)">
                <a href="#" onclick="listIconClick(event)">
                    <i class="material-symbols">comment</i>
                </a>
            </span>
            <div>
                <p class="line">
                    {{ value.truename }}
                    {% for g in value.groups %}
                        <span class="tag color {{ g|stringToColor }}">
                            {{ g }}
                        </span>
                    {% endfor %}
                    {% if value.subscription and value.subscription != 'both' %}
                        <span class="second">
                            {% if value.subscription == 'to' %}
                                <i class="material-symbols">arrow_upward</i>
                            {% elif value.subscription == 'from' %}
                                <i class="material-symbols">arrow_downward</i>
                            {% else %}
                                <i class="material-symbols">block</i>
                            {% endif %}
                        </span>
                    {% endif %}
                </p>
                {% if value.status %}
                    <p>{{ value.status }}</p>
                {% elif value.presence_text %}
                    <p>{{ value.presence_text }}</p>
                {% endif %}
            </div>
        </li>
    {% endfor %}

    {% if contacts|length > 7 %}
        <li class="showall active" onclick="Search.showCompleteRoster(this)">
            <span class="primary icon gray">
                <i class="material-symbols">expand_more</i>
            </span>
            <div>
                <p class="line">
                    {{ __('search.show_complete_roster') }}
                    <span class="second">{{ contacts|length }} <i class="material-symbols">people</i></span>
                </p>
            </div>
        </li>
    {% endif %}
{% else %}
    <ul class="list thick">
        <li>
            <span class="primary icon blue">
                <i class="material-symbols">help</i>
            </span>
            <div>
                <p>{{ __('search.no_contacts_title') }}</p>
                <p>{{ __('search.no_contacts_text') }}</p>
            </div>
        </li>
    </ul>
{% endif %}