{% extends 'base.html.twig' %}

{% set display_name = profile.displayName ?: profile.username %}
{% set tab_label = tab == 'followers' ? 'Abonnés' : 'Abonnements' %}

{% block title %}{{ tab_label }} de {{ display_name }} · LivreComment{% endblock %}

{% block body_class %}page-wide{% endblock %}

{% block body %}
    <header class="profile-subpage-header">
        <a href="{{ path('app_profile_show', { handle: profile.username }) }}" class="search-crumb">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polyline points="15 18 9 12 15 6"/>
            </svg>
            {{ display_name }}
        </a>
        <h1 class="search-page-title">{{ tab_label }}</h1>
    </header>

    <nav class="search-tabs" role="tablist" aria-label="Type">
        <a class="search-tab{{ tab == 'followers' ? ' search-tab--active' : '' }}"
           href="{{ path('app_follow_followers', { handle: profile.username }) }}"
           role="tab" aria-selected="{{ tab == 'followers' ? 'true' : 'false' }}">
            Abonnés · {{ followers_count }}
        </a>
        <a class="search-tab{{ tab == 'following' ? ' search-tab--active' : '' }}"
           href="{{ path('app_follow_following', { handle: profile.username }) }}"
           role="tab" aria-selected="{{ tab == 'following' ? 'true' : 'false' }}">
            Abonnements · {{ following_count }}
        </a>
    </nav>

    {% if users|length > 0 %}
        <ul class="result-list">
            {% for u in users %}
                {% include 'search/_user_hit.html.twig' with {
                    profile: u,
                    is_self: app.user and app.user.id == u.id,
                    is_following: following_by_user_id[u.id]|default(false),
                } only %}
            {% endfor %}
        </ul>
    {% else %}
        <p class="muted" style="margin-top: var(--space-5);">
            {% if tab == 'followers' %}
                {% if is_own_profile|default(false) %}Personne ne te suit encore.{% else %}{{ display_name }} n'a pas encore d'abonnés.{% endif %}
            {% else %}
                {% if is_own_profile|default(false) %}Tu ne suis personne pour l'instant.{% else %}{{ display_name }} ne suit personne pour l'instant.{% endif %}
            {% endif %}
        </p>
    {% endif %}
{% endblock %}