{% extends '@mio/user/master.twig' %}
{% from '@mio/macros.twig' import navigation, link %}

{% set image = '/profile.php?u=' ~ profile.user_id ~ '&m=avatar' %}
{% set canonical_url = '/profile.php?u=' ~ profile.user_id %}
{% set title = 'Profile of ' ~ profile.username %}
{% set manage_link = '/manage/users.php?v=view&u=' ~ profile.user_id %}

{% set youtube_is_channel_id = profile.user_youtube|slice(0, 2) == 'UC' and profile.user_youtube|length == 24 %}

{% set profile_fields = {
    "twitter": {
        "title": "Twitter",
        "value": profile.user_twitter|escape,
        "link": "https://twitter.com/%s",
        "format": "@%s",
    },
    "osu": {
        "title": "osu!",
        "value": profile.user_osu|escape,
        "link": "https://osu.ppy.sh/users/%s",
    },
    "website": {
        "title": "Website",
        "value": profile.user_website|escape,
        "link": "%s",
    },
    "youtube": {
        "title": "Youtube",
        "value": profile.user_youtube|escape,
        "link": "https://youtube.com/" ~ (youtube_is_channel_id ? "channel/" : '') ~ "%s",
        "format": youtube_is_channel_id ? "Channel" : "%s",
    },
    "steam": {
        "title": "Steam",
        "value": profile.user_steam|escape,
        "link": "https://steamcommunity.com/id/%s",
    },
    "twitchtv": {
        "title": "Twitch.tv",
        "value": profile.user_twitchtv|escape,
        "link": "https://twitch.tv/%s",
    },
    "lastfm": {
        "title": "Last.fm",
        "value": profile.user_lastfm|escape,
        "link": "http://last.fm/user/%s",
    },
    "github": {
        "title": "Github",
        "value": profile.user_github|escape,
        "link": "https://github.com/%s",
    },
    "skype": {
        "title": "Skype",
        "value": profile.user_skype|escape,
        "link": "skype:%s?userinfo",
    },
    "discord": {
        "title": "Discord",
        "value": profile.user_discord|escape,
    },
} %}

{% block content %}
    {{ navigation(mio_navigation, false, true) }}

    <div class="profile">
        <div class="container profile__header">
            <div class="container__title">Profile of {{ profile.username }}</div>
            <div class="container__content profile__header__content">
                <div class="profile__info">
                    <div class="profile__info__section">
                        <div class="profile__info__block">
                            {% if profile.user_title is not empty %}
                            <div class="profile__info__row">
                                <div class="profile__info__column profile__info__column--user-title" style="color:{{ profile.display_colour|colour_get_css }}">
                                    {{ profile.user_title }}
                                </div>
                            </div>
                            {% endif %}

                            <div class="profile__info__row">
                                <div class="profile__info__column profile__info__column--icons">
                                    <img class="profile__icon" src="https://static.flash.moe/flags/fff/{{ profile.user_country|lower }}.png" alt="{{ profile.user_country }}">
                                </div>
                                <div class="profile__info__column profile__info__column--country">
                                    {{ profile.user_country|country_name }}
                                </div>
                            </div>
                        </div>

                        <div class="profile__info__block">
                            <div class="profile__info__row" title="{{ profile.created_at|date('r') }}">
                                <div class="profile__info__column profile__info__column--heading">
                                    Joined
                                </div>
                                <time class="profile__info__column" datetime="{{ profile.created_at|date('c') }}">
                                    {{ profile.created_at|time_diff }}
                                </time>
                            </div>

                            {% if profile.last_seen is not null %}
                                <div class="profile__info__row" title="{{ profile.last_seen|date('r') }}">
                                    <div class="profile__info__column profile__info__column--heading">
                                        Last Seen
                                    </div>
                                    <time class="profile__info__column" datetime="{{ profile.last_seen|date('c') }}">
                                        {{ profile.last_seen|date('U') + 10 >= ''|date('U') ? 'just now' : profile.last_seen|time_diff }}
                                    </time>
                                </div>
                            {% endif %}
                        </div>

                        <div class="profile__info__block">
                            <div class="profile__info__row">
                                <div class="profile__info__column profile__info__column--heading">
                                    Topics
                                </div>
                                <div class="profile__info__column profile__info__column--numeric">
                                    {{ profile.forum_topic_count }}
                                </div>
                            </div>

                            <div class="profile__info__row">
                                <div class="profile__info__column profile__info__column--heading">
                                    Posts
                                </div>
                                <div class="profile__info__column profile__info__column--numeric">
                                    {{ profile.forum_post_count }}
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if app.hasActiveSession %}
                    {% spaceless %}
                    <div class="profile__info__section">
                        <div class="profile__info__block profile__info__block--links">
                            {% for name, data in profile_fields %}
                                {% if (data.display is defined ? data.display : true) and data.value|length > 0 %}
                                    <div class="profile__info__row profile__info__row--field-{{ name }}">
                                        <div class="profile__info__column profile__info__column--heading">
                                            {{ data.title }}
                                        </div>
                                        <div class="profile__info__column">
                                            {% set profile_field_value = (data.format is defined ? data.format : '%s')|format(data.value) %}
                                            {% if data.link is defined %}
                                                {{ link(data.link|format(data.value), profile_field_value, 'profile__account-link') }}
                                            {% else %}
                                                {{ profile_field_value }}
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    {% endspaceless %}
                    {% endif %}
                </div>
                <div class="avatar profile__avatar" style="background-image:url('{{ image }}')"></div>
            </div>
        </div>
    </div>
{% endblock %}