{% extends 'user/master.twig' %}
{% from 'macros.twig' import navigation %}

{% 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',
        'tooltip': '%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({
        (profile.username): 'profile',
        'Comments': 'comments',
    }, 'profile', true, '#%s') #}

    <div class="profile" id="profile">
        <div class="container profile__header">
            <div class="container__title">Profile of {{ profile.username }}</div>
            <div class="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="{{ profile.user_colour|html_colour }}">
                                    {{ profile.user_title }}
                                </div>
                            </div>
                            {% endif %}

                            <div class="profile__info__row">
                                <div class="profile__info__column profile__info__column--icons">
                                    <div class="flag flag--{{ profile.user_country|lower }} profile__icon">{{ profile.user_country }}</div>
                                </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|number_format }}
                                </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|number_format }}
                                </div>
                            </div>
                        </div>

                        {% if profile.comments_count > 0 %}
                            <div class="profile__info__block">
                                <div class="profile__info__row">
                                    <div class="profile__info__column profile__info__column--heading">
                                        Comments
                                    </div>
                                    <div class="profile__info__column profile__info__column--numeric">
                                        {{ profile.comments_count|number_format }}
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                        {% if profile.changelog_count > 0 %}
                            <div class="profile__info__block">
                                <a class="profile__info__row profile__info__row--link" href="/changelog.php?u={{ profile.user_id }}">
                                    <div class="profile__info__column profile__info__column--heading">
                                        Changes
                                    </div>
                                    <div class="profile__info__column profile__info__column--numeric">
                                        {{ profile.changelog_count|number_format }}
                                    </div>
                                </a>
                            </div>
                        {% endif %}
                    </div>

                    {% if app.hasActiveSession %}
                    {% spaceless %}
                    <div class="profile__info__section">
                        <div class="profile__info__block profile__info__block--links">
                            {% autoescape false %}
                            {% 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"
                                            {% if data.tooltip is defined %}title="{{ data.tooltip|format(data.value)|raw }}"{% endif %}>
                                            {% set profile_field_value = (data.format is defined ? data.format : '%s')|format(data.value) %}
                                            {% if data.link is defined %}
                                                {{ data.link|format(data.value)|html_link(profile_field_value, 'profile__account-link') }}
                                            {% else %}
                                                {{ profile_field_value }}
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                            {% endautoescape %}
                        </div>
                    </div>
                    {% endspaceless %}
                    {% endif %}
                </div>
                <div class="avatar profile__avatar" style="background-image:url('{{ image }}')"></div>
            </div>
        </div>
    </div>
{% endblock %}