{% extends "default.html" %}
{% block title %}
    {{ user.username }}
{% endblock %}
{% block breadcrumbs %}
    <li><a href="/{{ user.username }}">{{ user.username }}</a></li>
{% endblock %}
{% block seo %}
    <meta name="description" content="{{ user.bio }}">
{% endblock %}
{% block nav %}
    <ul id="repo-tabs">
        <li class="{% if active_page == 'profile' %}selected{% endif %}">
            <a href="?">
                {% trans %}Profile{% endtrans %}
            </a>
        </li>
        <li class="{% if active_page == 'repositories' %}selected{% endif %}">
            <a href="?action=repositories">
                {% trans %}Repositories{% endtrans %}
            </a>
        </li>
        <li class="{% if active_page == 'followers' %}selected{% endif %}">
            <a href="?action=followers">
                {% trans %}Followers{% endtrans %}
            </a>
        </li>
        <li class="{% if active_page == 'following' %}selected{% endif %}">
            <a href="?action=follows">
                {% trans %}Following{% endtrans %}
            </a>
        </li>
    </ul>

    <div class="flexible-space"></div>

    {% if logged_in_user and logged_in_user != user.username %}
        <form action="?action=follow" method="POST">
            <button type="submit">
                {% if relationship %}
                    {% trans %}Stop following{% endtrans %}
                {% else %}
                    {% trans %}Follow{% endtrans %}
                {% endif %}
            </button>
        </form>
    {% endif %}
{% endblock %}

{% block full %}
    <x-frame style="--width: 768px; --padding: 1em;">
        <x-vbox>
            <x-hbox style="align-items: center;" id="profile-header">
                <img src="/info/{{ user.username }}/avatar" class="avatar" id="profile-avatar">

                <x-vbox class="nopad">
                    {% if user.display_name and user.display_name != user.username %}
                        <hgroup id="username">
                            <h1>{{ user.display_name }}</h1>
                            <p>{{ user.username }}</p>
                        </hgroup>
                    {% else %}
                        <h1 class="headline">{{ user.username }}</h1>
                    {% endif %}
                </x-vbox>
                <div class="flexible-space"></div>
                <ul class="noindent" style="list-style: none; text-align: end;">
                    {% if user.URL %}
                        <li><a href="{{ user.URL }}"><x-hbox><iconify-icon icon="ic:outline-web"></iconify-icon>{{ user.URL }}</x-hbox></a></li>
                    {% endif %}
                    {% if user.company_url %}
                        <li><a href="{{ user.company_url }}"><x-hbox><iconify-icon icon="ic:baseline-business-center"></iconify-icon>{{ user.company }}</x-hbox></a></li>
                    {% elif user.company %}
                        <li><x-hbox><iconify-icon icon="ic:baseline-business-center"></iconify-icon>{{ user.company }}</x-hbox></li>
                    {% endif %}
                    {% if user.location %}
                        <li><x-hbox><iconify-icon icon="mdi:map-marker-radius"></iconify-icon>{{ user.location }}</x-hbox></li>
                    {% endif %}
                    {% if user.show_mail %}
                        <li><a href="mailto:{{ user.email }}"><x-hbox><iconify-icon icon="mdi:email"></iconify-icon>{{ user.email }}</x-hbox></a></li>
                    {% endif %}
                </ul>
            </x-hbox>
            {% block content %}{% endblock %}
        </x-vbox>
    </x-frame>
{% endblock %}

{% block scripts %}
    <script src="/static/marquee.js"></script>
{% endblock %}