{% extends 'global/master.twig' %}

{% set profileHidden = profile.permission(constant('Sakura\\Perms\\Site::DEACTIVATED')) or (profile.permission(constant('Sakura\\Perms\\Site::RESTRICTED')) and (user.id != profile.id and not user.permission(constant('Sakura\\Perms\\Manage::USE_MANAGE'), constant('Sakura\\Perms::MANAGE')))) %}

{% set noUserpage = profile.userPage|length < 1 %}

{% set profileView = noUserpage and profileView == 'index' ? 'comments' : profileView %}

{% block title %}{% if profileHidden %}User not found!{% else %}Profile of {{ profile.username }}{% endif %}{% endblock %}

{% block js %}
    {% if not profileHidden %}
    <script type="text/javascript">
        window.addEventListener('load', function () {
            // Check if location.hash is set
            if (location.hash) {
                var open = location.hash.slice(2);

                // Check if the element exists
                if (document.getElementById('profile-mode-' + open)) {
                    profileMode(open);
                    return;
                }
            }

            var profileUserpage = document.getElementById('profile-mode-userpage');

            // Check if the user page has contents
            if (profileUserpage.children[0].innerHTML.trim().length) {
                profileMode('userpage');
            } else {
                profileMode('comments');
            }
        });

        // Switch to a different mode
        function profileMode(id) {
            // Get other active modes and fetch the new element
            var current = document.getElementsByClassName('profile-mode-current'),
                newMode = document.getElementById('profile-mode-' + id);

            // Check if the new mode exists
            if (typeof newMode == 'undefined') {
                return;
            }

            // Check if there's any active
            if (current) {
                // Hide them all
                for (i in current) {
                    current[i].className = 'hidden';
                }
            }

            // Set the new to active
            newMode.className = 'profile-mode-current';
        }
    </script>
    {% endif %}
{% endblock %}

{% block content %}
    {% if profileHidden %}
        <div class="content standalone">
            <div style="padding: 20px;">
                <h1>The requested user does not exist!</h1>
                There are a few possible reasons for this:
                <ul style="padding-left: 40px;">
                    <li>They changed their username.</li>
                    <li>They may have been restricted.</li>
                    <li>You made a typo.</li>
                    <li>They never existed.</li>
                </ul>
            </div>
        </div>
    {% else %}
        <div class="content new-profile">
            <div class="new-profile-container">
                <div class="new-profile-header" style="background-image: url({{ route('user.header', profile.id) }});">
                    <div class="new-profile-info">
                        <div class="default-avatar-setting new-profile-avatar" style="background-image: url({{ route('file.avatar', profile.id) }}); box-shadow: 0 0 5px #{% if profile.isOnline %}484{% else %}844{% endif %};"></div>
                        <div class="new-profile-username">
                            <h1 style="color: {{ profile.colour }}; text-shadow: 0 0 7px {% if profile.colour != 'inherit' %}{{ profile.colour }}{% else %}#222{% endif %}; padding: 0 0 2px;" {% if profile.getUsernameHistory %} title="Known as {{ profile.getUsernameHistory[0].username_old }} before {{ profile.getUsernameHistory[0].change_time|date(config('date_format')) }}." {% endif %}>{{ profile.username }}</h1>
                            {% if profile.isPremium %}<img src="{{ config('content_path') }}/images/tenshi.png" alt="Tenshi" style="vertical-align: middle;" /> {% endif %}<img src="{{ config('content_path') }}/images/flags/{{ profile.country|lower }}.png" alt="{{ profile.country }}" style="vertical-align: middle;" title="{{ profile.country(true) }}" /> <span style="font-size: .8em;">{{ profile.title }}</span>
                        </div>
                        <div class="new-profile-dates">
                            <b>Joined</b> <time datetime="{{ profile.registered|date('r') }}">{{ profile.registered|date(config('date_format')) }}</time>
                            <br />
                            {% if profile.lastOnline < 1 %}
                            <b>{{ profile.username }} hasn't logged in yet.</b>
                            {% else %}
                            <b>Last online</b> <time datetime="{{ profile.lastOnline|date('r') }}">{{ profile.lastOnline|date(config('date_format')) }}</time>
                            {% endif %}
                            {% if profile.birthday != '0000-00-00' and profile.birthday|split('-')[0] > 0 %}
                            <br /><b>Age</b> <span title="{{ profile.birthday }}">{{ profile.birthday(true) }} years old</span>&nbsp;
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="new-profile-interactions">
                    <div class="new-profile-navigation">
                        {% if not noUserpage %}
                        <a class="fa fa-file-text-o" title="View {{ profile.username }}'s user page" href="#_userpage" onclick="profileMode('userpage');"></a>
                        {% endif %}
                        {#<a class="fa fa-list" title="View {{ profile.username }}'s threads" href="#_threads" onclick="profileMode('threads');"></a>
                        <a class="fa fa-reply" title="View {{ profile.username }}'s posts" href="#_posts" onclick="profileMode('posts');"></a>#}
                        <a class="fa fa-star" title="View {{ profile.username }}'s friends" href="#_friends" onclick="profileMode('friends');"></a>
                        {#<a class="fa fa-users" title="View {{ profile.username }}'s groups" href="#_groups" onclick="profileMode('groups');"></a>#}
                        <a class="fa fa-comments-o" title="View {{ profile.username }}'s profile comments" href="#_comments" onclick="profileMode('comments');"></a>
                    </div>
                    {% if session.checkLogin %}
                    <div class="new-profile-actions">
                        {% if user.id == profile.id %}
                        <a class="fa fa-pencil-square-o" title="Edit your profile" href="{{ route('settings.general.profile') }}"></a>
                        {% else %}
                        {% if user.isFriends(profile.id) != 0 %}<a class="fa fa-{% if user.isFriends(profile.id) == 2 %}heart{% else %}star{% endif %}" title="You are friends"></a>{% endif %}
                        <a class="fa fa-user-{% if user.isFriends(profile.id) == 0 %}plus{% else %}times{% endif %}" title="{% if user.isFriends(profile.id) == 0 %}Add {{ profile.username }} as a friend{% else %}Remove friend{% endif %}" href="javascript:void(0);" onclick="{% if user.isFriends(profile.id) == 0 %}addFriend({{ profile.id }}){% else %}removeFriend({{ profile.id }}){% endif %}"></a>
                        <a class="fa fa-exclamation-circle" title="Report {{ profile.username }}" href="{{ route('user.report', profile.id) }}"></a>
                        {% endif %}
                        {% if user.permission(constant('Sakura\\Perms\\Manage::CAN_RESTRICT_USERS'), constant('Sakura\\Perms::MANAGE')) %}
                            <a class="fa fa-trash" title="Restrict {{ profile.username }}" href="?restrict={{ session_id() }}"></a>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
                <div class="new-profile-content">
                    <div class="new-profile-mode">
                        <noscript><h1 class="stylised" style="text-align: center;">Please enable Javascript!</h1></noscript>
                        <div id="profile-mode-userpage" class="hidden">
                            {% include 'profile/userpage.twig' %}
                        </div>
                        <div id="profile-mode-friends" class="hidden">
                            {% include 'profile/friends.twig' %}
                        </div>
                        <div id="profile-mode-groups" class="hidden">
                            {% include 'profile/groups.twig' %}
                        </div>
                        <div id="profile-mode-threads" class="hidden">
                            {% include 'profile/threads.twig' %}
                        </div>
                        <div id="profile-mode-posts" class="hidden">
                            {% include 'profile/posts.twig' %}
                        </div>
                        <div id="profile-mode-comments" class="hidden">
                            {% include 'profile/comments.twig' %}
                        </div>
                    </div>
                    <div class="new-profile-data">
                        <table style="width: 100%;">
                            <tr>
                                <td style="text-align: left; font-weight: bold;">Threads</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 class="default" />
                        {% if profile.profileFields or user.permission(constant('Sakura\\Perms\\Manage::USE_MANAGE'), constant('Sakura\\Perms::MANAGE')) %}
                            {% if session.checkLogin %}
                                <table style="width: 100%;">
                                {% for name,field in profile.profileFields %}
                                    <tr>
                                        <td style="text-align: left; font-weight: bold;">
                                            {{ field.name }}
                                        </td>
                                        <td style="text-align: right;">
                                            {% if name == 'youtube' %}
                                                <a href="https://youtube.com/{% if field.youtubetype == true %}channel{% else %}user{% endif %}/{{ field.value }}" class="default">{% if field.youtubetype == true %}{{ profile.username }}'s Channel{% else %}{{ field.value }}{% endif %}</a>
                                            {% else %}
                                                {% if field.islink %}
                                                    <a href="{{ field.link }}" class="default">
                                                {% endif %}
                                                {{ field.value }}
                                                {% if field.islink %}
                                                    </a>
                                                {% endif %}
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                                {% if user.permission(constant('Sakura\\Perms\\Manage::USE_MANAGE'), constant('Sakura\\Perms::MANAGE')) %}
                                    <tr>
                                        <td style="text-align: left; font-weight: bold;">E-mail address</td>
                                        <td style="text-align: right;"><a href="mailto:{{ profile.email }}" class="default">{{ profile.email }}</a></td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left; font-weight: bold;">Register IP</td>
                                        <td style="text-align: right;">{{ profile.registerIp }}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left; font-weight: bold;">Last IP</td>
                                        <td style="text-align: right;">{{ profile.lastIp }}</td>
                                    </tr>
                                {% endif %}
                                </table>
                            {% else %}
                                <b>Log in to view the full profile!</b>
                            {% endif %}
                        {% endif %}
                        <hr class="default" />
                        <b>Account Standing</b>
                        {% if profile.permission(constant('Sakura\\Perms\\Site::DEACTIVATED')) %}
                            <h2 style="color: #888; text-shadow: 0 0 7px #888; margin-top: 0;">Deactivated</h2>
                        {% elseif profile.permission(constant('Sakura\\Perms\\Site::RESTRICTED')) %}
                            <h2 style="color: #222; text-shadow: 0 0 7px #800; margin-top: 0;">Restricted</h2>
                        {% elseif profile.getWarnings %}
                            <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 %}
                        {% if profile.getWarnings %}
                            <table class="panelTable">
                                <tr>
                                    <th>Action</th>
                                    <th>Duration</th>
                                    <th>Reason</th>
                                </tr>
                                {% for warning in profile.getWarnings %}
                                <tr class="{{ warning.warning_action_text|lower }}">
                                    <td>{{ warning.warning_action_text }}</td>
                                    <td>{{ warning.warning_length }} minute{% if warning.warning_length != 1 %}s{% endif %}</td>
                                    <td>{{ warning.warning_reason }}</td>
                                </tr>
                                {% endfor %}
                            </table>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}