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

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