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

{% set icon = '/profile.php?u=' ~ profile.user_id ~ '&m=avatar' %}
{% set title = 'Profile of ' ~ profile.username %}

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

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

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

    <div class="mio__profile">
        <div class="mio__container mio__profile__header">
            <div class="mio__container__title">Profile of {{ profile.username }}</div>
            <div class="mio__container__content mio__profile__header__content">
                <div class="mio__profile__info">
                    <div class="mio__profile__info__section">
                        <div class="mio__profile__info__block">
                            <div class="mio__profile__info__row">
                                <div class="mio__profile__info__column mio__profile__info__column--icons">
                                    <img class="mio__profile__icon" src="https://static.flash.moe/flags/fff/{{ profile.user_country|lower }}.png" alt="{{ profile.user_country }}">
                                </div>
                                <div class="mio__profile__info__column mio__profile__info__column--country">
                                    {{ profile.user_country|country_name }}
                                </div>
                            </div>
                        </div>

                        <div class="mio__profile__info__block">
                            <div class="mio__profile__info__row" title="{{ profile.created_at.format('r') }}">
                                <div class="mio__profile__info__column mio__profile__info__column--heading">
                                    Joined
                                </div>
                                <div class="mio__profile__info__column">
                                    {{ profile.created_at.diffForHumans }}
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if app.session != null %}
                    {% spaceless %}
                    <div class="mio__profile__info__section">
                        <div class="mio__profile__info__block mio__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="mio__profile__info__row mio__profile__info__row--field-{{ name }}">
                                        <div class="mio__profile__info__column mio__profile__info__column--heading">
                                            {{ data.title }}
                                        </div>
                                        <div class="mio__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, 'mio__profile__account-link') }}
                                            {% else %}
                                                {{ profile_field_value }}
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    {% endspaceless %}
                    {% endif %}
                </div>
                <div class="mio__avatar mio__profile__avatar" style="background-image:url('{{ icon }}');"></div>
            </div>
        </div>
    </div>
{% endblock %}