{% extends "user-profile.html" %}
{% block title %}
    {% trans %}{{ username }}'s followers{% endtrans %}
{% endblock %}
{% set active_page = "followers" %}

{% block content %}
    <x-hbox class="wrap homogenous">
        {% if user.followers | length %}
            {% for follower in user.followers %}
                <x-frame style="flex-basis: 128px; --width: 128px;">
                    <article class="card" style="flex: 0 1 auto;">
                        <section class="card-main">
                            <a href="/{{ follower.follower.username }}">
                                <img class="avatar" src="/info/{{ follower.follower.username }}/avatar" style="width: 100%;">
                                <div class="thumbnail-marquee">
                                    <span class="inner-thumbnail-marquee" style="animation-play-state: paused;">{{ follower.follower.username }}</span>
                                </div>
                            </a>
                        </section>
                    </article>
                </x-frame>
            {% endfor %}
        {% else %}
            <p>{% trans %}This user hasn't got any followers.{% endtrans %}</p>
        {% endif %}
    </x-hbox>
{% endblock %}