<div class='verticalGrayTabsWrapper'>
    <div class="verticalGrayTabs">
        <div class='with_padding'>
            <a n:if="isset($thisUser)" n:attr="id => $mode === 'list' && $isMy ? 'used' : 'ki'" href="/audios{$thisUser->getId()}">{_my_music}</a>
            {* TODO: show upload link as and plusick (little plus) in button up*}
            <a n:if="isset($thisUser)" href="/player/upload{if $isMyClub}?gid={abs($ownerId)}{/if}">{_upload_audio}</a>
            <a n:if="isset($thisUser)" n:attr="id => $mode === 'new' ? 'used' : 'ki'" href="/search?section=audios">{_audio_new}</a>
            <a n:if="isset($thisUser)" n:attr="id => $mode === 'popular' ? 'used' : 'ki'" href="/search?section=audios&order=listens">{_audio_popular}</a>

            <hr n:if="isset($thisUser)">

            <a n:attr="id => $mode === 'playlists' && $ownerId == $thisUser->getId() ? 'used' : 'ki'" href="/playlists{$thisUser->getId()}" n:if="isset($thisUser)">{_my_playlists}</a>

            <a n:if="isset($thisUser)" href="/audios/newPlaylist">{_new_playlist}</a>

            {if !$isMy && $mode !== 'popular' && $mode !== 'new' && $mode != 'alone_audio'}
                <hr>
                
                <a n:if="!$isMy" n:attr="id => $mode === 'list' ? 'used' : 'ki'" href="/audios{$ownerId}">{if $ownerId > 0}{_music_user}{else}{_music_club}{/if}</a>
                <a href="/player/upload?gid={abs($ownerId)}" n:if="isset($thisUser) && isset($club) && $club->canUploadAudio($thisUser)">{_upload_audio}</a>
                <a n:attr="id => $mode === 'playlists' && $ownerId != $thisUser->getId() ? 'used' : 'ki'" class='noOverflow' href="/playlists{$ownerId}"  n:if="isset($thisUser) && isset($ownerId) && !$isMy">{if $ownerId > 0}{_playlists_user}{else}{_playlists_club}{/if}</a>
                <a href="/audios/newPlaylist{if $isMyClub}?gid={abs($ownerId)}{/if}" n:if="isset($thisUser) && $isMyClub">{_new_playlist}</a>
            {/if}
        </div>

        {if $friendsAudios}
            <div class="friendsAudiosList">
                <a href="/audios{$friend->getRealId()}" n:foreach="$friendsAudios as $friend">
                    <div class="elem">
                        <img src="{$friend->getAvatarURL()}" />

                        <div class="additionalInfo">
                            <span class="name noOverflow">{$friend->getCanonicalName()}</span>
                            <span class="desc">{$audioStatus ? $audioStatus->getName() : tr("audios_count", $friend->getAudiosCollectionSize())}</span>
                        </div>
                    </div>
                </a>
            </div>
        {/if}
    </div>
</div>
