{% extends "user-profile.html" %}
{% set active_page = "followers" %}

{% block content %}
    <x-frame style="--width: 768px; --padding: 1em;">
        <x-hbox class="wrap homogenous">
            {% if user.followers | length %}
                {% for follower in user.followers %}
                    <x-frame style="flex-basis: 96px; --width: 96px;">
                        <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>
    </x-frame>
{% endblock %}