{extends "../@layout.xml"}

{block title}
    {if $mode == 'list'}
        {if $ownerId > 0}
            {_audios} {$owner->getMorphedName("genitive", false)}
        {else}
            {_audios_group}
        {/if}
    {elseif $mode == 'new'}
        {_audio_new}
    {elseif $mode == 'popular'}
        {_audio_popular}
    {else}
        {if $ownerId > 0}
            {_playlists} {$owner->getMorphedName("genitive", false)}
        {else}
            {_playlists_group}
        {/if}
    {/if}
{/block}

{block header}
    <div n:if="$mode == 'list'">
        <div n:if="$isMy">{_my_audios_small}</div>
        <div n:if="!$isMy">
            <a href="{$owner->getURL()}">{$owner->getCanonicalName()}</a>
            »
            {_audios}
        </div>
    </div>

    <div n:if="$mode == 'new'">
        {_audios}
        »
        {_audio_new}
    </div>

    <div n:if="$mode == 'popular'">
        {_audios}
        »
        {_audio_popular}
    </div>

    <div n:if="$mode == 'playlists'">
        {_audios}
        »
        {if $isMy}{_my_playlists}{else}{_playlists}{/if}
    </div>
{/block}

{block content}
    {* ref: https://archive.li/P32em *}
    
    {include "bigplayer.xml"}

    <input n:if="$mode == 'list'" type="hidden" name="bigplayer_context" data-type="entity_audios" data-entity="{$ownerId}" data-page="{$page}">
    <input n:if="$mode == 'new'" type="hidden" name="bigplayer_context" data-type="new_audios" data-entity="0" data-page="1">
    <input n:if="$mode == 'popular'" type="hidden" name="bigplayer_context" data-type="popular_audios" data-entity="0" data-page="1">
    <div class="bigPlayerDetector"></div>

    <div class="audiosDiv">
        <div style="width: 74%;" class="audiosContainer audiosPaddingContainer" n:if="$mode != 'playlists'">
            <div n:if="$audiosCount <= 0" style='height: 50%;'>
                {include "../components/content_error.xml", description => $ownerId > 0 ? ($ownerId == $thisUser->getId() ? tr("no_audios_thisuser") : tr("no_audios_user")) : tr("no_audios_club")}
            </div>
            <div n:if="$audiosCount > 0" class="scroll_container infContainer">
                <div class="scroll_node infObj" n:foreach="$audios as $audio">
                    {include "player.xml", audio => $audio, club => $club}
                </div>
            </div>

            <div n:if="$mode != 'new' && $mode != 'popular'">
                {include "../components/paginator.xml", conf => (object) [
                    "page"     => $page,
                    "count"    => $audiosCount,
                    "amount"   => sizeof($audios),
                    "perPage"  => $perPage ?? OPENVK_DEFAULT_PER_PAGE,
                    "atBottom" => true,
                ]}
            </div>
        </div>
        
        <div style="width: 71.8%;" class="audiosPaddingContainer audiosPaddingContainer" n:if="$mode == 'playlists'">
            <div n:if="$playlistsCount <= 0" style='height: 100%;'>
                {include "../components/content_error.xml", description => $ownerId > 0 ? ($ownerId == $thisUser->getId() ? tr("no_playlists_thisuser") : tr("no_playlists_user")) : tr("no_playlists_club")}
            </div>

            <div class="scroll_container infContainer playlistContainer" n:if="$playlistsCount > 0">
                <div class='scroll_node' n:foreach='$playlists as $playlist'>
                    {include 'playlistListView.xml', playlist => $playlist}
                </div>
            </div>

            <div>
                {include "../components/paginator.xml", conf => (object) [
                    "page"     => $page,
                    "count"    => $playlistsCount,
                    "amount"   => sizeof($playlists),
                    "perPage"  => $perPage ?? OPENVK_DEFAULT_PER_PAGE,
                    "atBottom" => true,
                ]}
            </div>
        </div>
        {include "tabs.xml"}
    </div>
{/block}