{% extends 'master.twig' %}

{% from 'user/profile_macros.twig' import profile_image_changer %}

{% set title = 'Profile of ' ~ profile.username %}
{% set description = 'Everything you ever wanted to know about ' ~ profile.username ~ '!' %}
{% set icon = route('user.avatar', profile.id, true) %}
{% set youtubeIsChannelId = profile.youtube|slice(0, 2) == 'UC' and profile.youtube|length == 24 %}
{% set possessiveUsername = profile.username ~ "'" ~ (profile.username[-1:] == 's' ? '' : 's') %}

{% if user.perms.viewUserLinks or user.perms.viewUserDetails %}
    {% set fields = {
        "website": {
            "title": "Website",
            "value": profile.website,
            "link": "%s",
        },
        "twitter": {
            "title": "Twitter",
            "value": profile.twitter,
            "link": "https://twitter.com/%s",
            "disp": "@%s",
        },
        "github": {
            "title": "GitHub",
            "value": profile.github,
            "link": "https://github.com/%s",
        },
        "skype": {
            "title": "Skype",
            "value": profile.skype,
            "link": "skype:%s?userinfo",
        },
        "discord": {
            "title": "Discord",
            "value": profile.discord,
        },
        "youtube": {
            "title": "YouTube",
            "value": profile.youtube,
            "link": "https://youtube.com/" ~ (youtubeIsChannelId ? 'channel/' : '') ~ "%s",
            "disp": youtubeIsChannelId ? possessiveUsername ~ " channel" : "%s",
        },
        "steam": {
            "title": "Steam",
            "value": profile.steam,
            "link": "https://steamcommunity.com/id/%s",
        },
        "osu": {
            "title": "osu!",
            "value": profile.osu,
            "link": "https://osu.ppy.sh/u/%s",
        },
        "lastfm": {
            "title": "Last.fm",
            "value": profile.lastfm,
            "link": "http://last.fm/user/%s",
        },
        "email": {
            "title": "E-mail address",
            "value": user.perms.viewUserDetails ? profile.email : null,
            "link": "mailto:%s"
        },
        "registerip": {
            "title": "Register IP",
            "value": user.perms.viewUserDetails ? profile.registerIp : null,
        },
        "lastip": {
            "title": "Last IP",
            "value": user.perms.viewUserDetails ? profile.lastIp : null,
        },
    } %}
{% endif %}

{% set sections = {
    "userpage": {
        "icon": "fa-file-text-o",
        "title": possessiveUsername ~ " user page",
        "display": profile.userPage|length > 0
    },
    "friends": {
        "icon": "fa-list",
        "title": possessiveUsername ~ " topics",
        "display": true
    },
    "groups": {
        "icon": "fa-users",
        "title": "Groups " ~ profile.username ~ " is part of",
        "display": false
    },
    "topics": {
        "icon": "fa-reply",
        "title": possessiveUsername ~ " posts",
        "display": true
    },
    "posts": {
        "icon": "fa-star",
        "title": possessiveUsername ~ " friends",
        "display": true
    },
    "comments": {
        "icon": "fa-comments-o",
        "title": possessiveUsername ~ " profile comments",
        "display": true
    },
} %}

{% block js %}
    {% include 'user/profile_javascript.twig' %}
{% endblock %}

{% block content %}
    {% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeBackground) or user.perms.manageProfileImages %}
        {{ profile_image_changer(route('user.background', profile.id), '.container') }}
    {% endif %}

    <div class="content profile">
        <div class="profile__container">
            {% include 'user/profile_header.twig' %}
            <div class="profile__content">
                <div class="profile__mode">
                    {% if profile.lastfm %}
                        <div class="profile__now-playing">
                            <div class="np-icon">
                                <span class="fa fa-music"></span>
                            </div>
                            <div class="np-text">
                                <span class="fa fa-ellipsis-h" id="np-state"></span>
                                <a href="#" id="np-track" class="profile__now-playing-link"></a>
                                <span id="np-by" class="hidden">by</span>
                                <a href="#" id="np-artist" class="profile__now-playing-link"></a>
                            </div>
                        </div>
                    {% endif %}
                    <noscript><h1 style="text-align: center;">Please enable Javascript!</h1></noscript>
                    {% for name, data in sections %}
                        <div id="profile-mode-{{ name }}" class="hidden">
                            {% include 'profile/' ~ name ~ '.twig' %}
                        </div>
                    {% endfor %}
                </div>
                <div class="profile__data">
                    <table style="width: 100%;">
                        <tr>
                            <td style="text-align: left; font-weight: bold;">Topics</td>
                            <td style="text-align: right;">{{ profile.forumStats.topics }}</td>
                        </tr>
                        <tr>
                            <td style="text-align: left; font-weight: bold;">Posts</td>
                            <td style="text-align: right;">{{ profile.forumStats.posts }}</td>
                        </tr>
                        <tr>
                            <td style="text-align: left; font-weight: bold;">Friends</td>
                            <td style="text-align: right;">{{ profile.friends(2)|length }}</td>
                        </tr>
                    </table>
                    <hr>
                    {% if user.perms.viewUserLinks or user.perms.viewUserDetails %}
                        <table style="width: 100%;">
                        {% for id, data in fields %}
                            {% if data.value != null %}
                                <tr>
                                    <td style="text-align: left; font-weight: bold;">
                                        {{ data.title }}
                                    </td>
                                    <td style="text-align: right;">
                                        {% if data.link is defined %}
                                            <a href="{{ data.link|format(data.value) }}">{{ (data.disp is defined ? data.disp : '%s')|format(data.value) }}</a>
                                        {% else %}
                                            {{ (data.disp is defined ? data.disp : '%s')|format(data.value) }}
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endif %}
                        {% endfor %}
                        </table>
                    {% elseif user.id == 0 %}
                        <div><b>Log in to view the full profile!</b></div>
                    {% else %}
                        <div><b>You aren't allowed to view profile details!</b></div>
                    {% endif %}
                    <b>Account Standing</b>
                    {% if not profile.activated %}
                        <h2 style="color: #888; text-shadow: 0 0 7px #888; margin-top: 0;">Inactive</h2>
                    {% elseif profile.restricted %}
                        <h2 style="color: #222; text-shadow: 0 0 7px #800; margin-top: 0;">Restricted</h2>
                    {% elseif false %}
                        <h2 style="color: #A00; text-shadow: 0 0 7px #A00; margin-top: 0;">Bad</h2>
                    {% else %}
                        <h2 style="color: #080; text-shadow: 0 0 7px #080; margin-top: 0;">Good</h2>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}