Profile Header

{# @var profile_header ThemeViews\Organisms\profileHeader\ProfileHeaderViewModel #}
{% extends '@atoms/section/section.twig' %}
{% set className = "profile-header full" %}
{% set lang = getLang() %}
{% block content %}
    <div class="pics {% if profile_header.view_model.title_picture is not empty %}pb-5.5{% else %}mt-1 pb-1{% endif %}">
        {% if profile_header.view_model.title_picture is not empty %}
            <img src="{{ profile_header.view_model.title_picture.src|towebp }}" alt="{{ profile_header.view_model.name }}">
        {% endif %}
        {% if profile_header.view_model.profile_picture is not empty %}
            <img class="rounded-full border-4 border-white mx-auto{% if profile_header.view_model.title_picture is not empty %} absolute left-1/2 -translate-x-1/2 -translate-y-1/2{% endif %}"
                 src="{{ profile_header.view_model.profile_picture.src|towebp|resize(130,130) }}" alt="" width="130" height="130">
        {% else %}
            <div class="fallback-logo{% if profile_header.view_model.title_picture is not empty %} absolute left-1/2 -translate-x-1/2 -translate-y-1/2{% endif %}">
                {% include '@atoms/icon/icon.twig' with {
                    icon: 'member'
                } %}
            </div>
        {% endif %}
    </div>
    {% include '@atoms/headline/headline.twig' with {
        headline: profile_header.view_model.name,
        type: 'h1',
        ignoreTypeMap: true,
        className: 'headline--xl text-center mb-0.75'
    } %}
    {% if profile_header.member_status == 'footballr' %}
        {% set classes = 'bg-accent' %}
        {% set title = 'Footballr' %}
    {% else %}
        {% set classes = 'bg-accent' %}
        {% set title = 'Fan' %}
    {% endif %}
    <div class="flex justify-center mb-1">
        <div class="inline-block mx-auto py-0.25 px-1.5 font-teko-semibold {{ classes }} text-primary rounded-md uppercase">{{ title }}</div>
    </div>

    {% if profile_header.view_model.nickname is not empty %}
        {% include '@atoms/copy/copy.twig' with {
            text: t('Nickname: ') ~ profile_header.view_model.nickname,
            type: 'div',
            className: 'mb-1 text-center'
        } %}
    {% endif %}
    <div class="container">
        <div data-vue="member-actions"
             data-member-id="{{ profile_header.view_model.internal_id }}"
             data-member-slug="{{ profile_header.model.slug }}"
             data-profile-route="{{ route('member.showProfile.' ~ lang) }}"
             data-messages-route="{{ route('messages.' ~ lang) }}"
        ></div>
    </div>
{% endblock %}