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

<div class="profile__header" style="background-image: url({{ route('user.header', profile.id) }});">
    <div class="profile__info">
        {% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeHeader) or user.perms.manageProfileImages %}
            {{ profile_image_changer(route('user.header', profile.id), '.profile__header') }}
        {% endif %}
        <div class="avatar avatar--border profile__avatar" style="background-image: url({{ route('user.avatar', profile.id) }}); box-shadow: 0 0 5px #{% if profile.isOnline %}484{% else %}844{% endif %};">
            {% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeAvatar) or user.perms.manageProfileImages %}
                {{ profile_image_changer(route('user.avatar', profile.id), '.avatar') }}
            {% endif %}
        </div>
        <div class="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('general.date_format')) }}." {% endif %}>{{ profile.username }}</h1>
            {% if profile.isPremium %}<img src="/images/tenshi.png" alt="Tenshi" style="vertical-align: middle;"> {% endif %}<img src="/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="profile__dates">
            {% spaceless %}
                <div class="profile__date">
                    <b>Joined</b>&nbsp;<time class="time-ago" datetime="{{ profile.registered|date('r') }}">{{ profile.registered|date(config('general.date_format')) }}</time>
                </div>
                <div class="profile__date">
                    {% if profile.lastOnline < 1 %}
                        <b>{{ profile.username }} hasn't logged in yet.</b>
                    {% else %}
                        <b>Last online</b>&nbsp;<time class="time-ago" datetime="{{ profile.lastOnline|date('r') }}">{{ profile.lastOnline|date(config('general.date_format')) }}</time>
                    {% endif %}
                </div>
                {% if profile.birthday != '0000-00-00' and profile.birthday|split('-')[0] > 0 %}
                    <div class="profile__date">
                        <b>Age</b>&nbsp;<span title="{{ profile.birthday }}">{{ profile.birthday(true) }} years old</span>
                    </div>
                {% endif %}
            {% endspaceless %}
        </div>
    </div>
</div>
<div class="profile__interactions">
    <div class="profile__navigation">
        {% for name, data in sections %}
            {% if data.display %}
                <a class="profile__interactions-item fa {{ data.icon }}" title="{{ data.title }}" href="#{{ name }}"></a>
            {% endif %}
        {% endfor %}
    </div>
    {% if user.isActive %}
    <div class="profile__actions">
        {% if user.id == profile.id %}
        <a class="profile__interactions-item fa fa-pencil-square-o" title="Edit your profile" href="{{ route('settings.account.profile') }}"></a>
        {% else %}
        {% if user.isFriends(profile.id) != 0 %}<a class="profile__interactions-item fa fa-{% if user.isFriends(profile.id) == 2 %}heart{% else %}star{% endif %}" title="You are friends"></a>{% endif %}
        <a class="profile__interactions-item 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="Sakura.Friend.{% if user.isFriends(profile.id) == 0 %}Add({{ profile.id }}){% else %}Remove({{ profile.id }}){% endif %}"></a>
        <a class="profile__interactions-item fa fa-exclamation-circle" title="Report {{ profile.username }}" href="{{ route('user.report', profile.id) }}"></a>
        {% endif %}
        {% if user.perms.canRestrict %}
            <a class="profile__interactions-item fa fa-trash" title="Restrict {{ profile.username }}" href="?restrict={{ session_id() }}"></a>
        {% endif %}
    </div>
    {% endif %}
</div>