{% set isMember = is_granted('ROLE_MEMBER') %}
<nav class="nav nav-tabs flex-column flex-sm-row" role="tablist">
<a class="flex-sm-fill text-sm-center rounded-0 border-bottom-0 bg-grey-10 nav-link {% if not isMember %}active {% endif %}px-0" href="#tab-aside-online" data-toggle="tab" role="tab" >Online</a>
{% if isMember %}
<a class="flex-sm-fill text-sm-center rounded-0 border-bottom-0 bg-grey-10 nav-link px-0 active" href="#tab-aside-activity" data-toggle="tab" role="tab">
<span id="js-sidebar-activity-label">{{ is_granted('ROLE_AMATEUR') ? 'Marketing' : 'Aktivitäten' }}</span>
</a>
<a class="flex-sm-fill text-sm-center rounded-0 border-bottom-0 bg-grey-10 nav-link px-0" href="#tab-aside-visitors" data-toggle="tab" role="tab">Besucher</a>
{% endif %}
</nav>
<div class="tab-content" id="tab-content-aside">
<div class="tab-pane {% if not isMember %}show active{% endif %}" id="tab-aside-online" role="tabpanel">
<ul class="chat list-unstyled mb-0 sidebar sidebar-full-height">
{% if not app.user %}
{% for htmlItem in femaleOnlineUsersSoftcore(false) %}
{{ htmlItem|raw }}
{% endfor %}
{% for htmlItem in maleOnlineUsersSoftcore(false) %}
{{ htmlItem|raw }}
{% endfor %}
{% endif %}
</ul>
<nav class="nav nav-tabs nav-tabs-dark flex-column flex-sm-row mb-0">
{% if not app.user %}
<li class="flex-sm-fill text-sm-center rounded-0 border-bottom-0 bg-grey-10 nav-link px-0 active" data-selection="2">Frauen</li>
<li class="flex-sm-fill text-sm-center rounded-0 border-bottom-0 bg-grey-10 nav-link px-0" data-selection="1">Männer</li>
{% else %}
{% if 'ROLE_AMATEUR' in app.user.roles %}
<li class="flex-sm-fill text-sm-center rounded-0 border-bottom-0 bg-grey-10 nav-link px-0 active" data-selection="1">Männer</li>
<li class="flex-sm-fill text-sm-center rounded-0 border-bottom-0 bg-grey-10 nav-link px-0" data-selection="2">Frauen</li>
{% else %}
<li class="flex-sm-fill text-sm-center rounded-0 border-bottom-0 bg-grey-10 nav-link px-0 active" data-selection="2">Frauen</li>
<li class="flex-sm-fill text-sm-center rounded-0 border-bottom-0 bg-grey-10 nav-link px-0" data-selection="1">Männer</li>
{% endif %}
{% endif %}
<li class="flex-sm-fill text-sm-center rounded-0 border-bottom-0 bg-grey-10 nav-link" data-selection="webcam">Livecams</li>
</nav>
</div>
{% if isMember %}{# Populated by HeaderApp & SidebarHandler class #}
<div class="tab-pane show active" id="tab-aside-activity" role="tabpanel">
<ul class="chat list-unstyled sidebar-full-height"></ul>
</div>
<div class="tab-pane" id="tab-aside-visitors" role="tabpanel">
<ul class="chat list-unstyled sidebar-full-height"></ul>
</div>
{% endif %}
</div>