{% extends "default.html" %}
{% block title %}
    {{ user.username }}
{% endblock %}
{% block breadcrumbs %}
    <li><a href="/{{ user.username }}">{{ user.username }}</a></li>
{% endblock %}

{% block content %}
    <x-frame style="--width: 768px;">
        <x-vbox>
            <x-hbox style="align-items: center;">
                <img src="/info/{{ user.username }}/avatar" class="avatar" style="width: 128px; height: 128px;">

                <x-vbox class="nopad">
                    {% if user.displayName and user.displayName != user.username %}
                        <hgroup id="username">
                            <h1>{{ user.displayName }}</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.companyURL %}
                        <li><a href="{{ user.companyURL }}"><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.showMail %}
                        <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>
            <x-vbox>
                {% if user.bio %}
                    <article class="card" style="flex: 0 1 auto;">
                        <section class="card-main">
                            <p>
                                {{ user.bio }}
                            </p>
                        </section>
                    </article>
                {% endif %}
                <h2>Repositories</h2>
                <article class="card" style="flex: 0 1 auto;">
                    <section class="card-main">
                        <ul style="list-style: none;" class="noindent">
                            {% for repo in repos %}
                                <li>
                                    <article>
                                        <a href="{{ repo.route }}"><h3>{{ repo.name }}</h3></a>
                                        {% if repo.info %}
                                            <p>{{ repo.info }}</p>
                                        {% endif %}
                                    </article>
                                </li>
                            {% endfor %}
                        </ul>
                    </section>
                </article>
            </x-vbox>
        </x-vbox>
    </x-frame>
{% endblock %}