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

{block title}{_audios}{/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>
{/block}

{block content}
    {* ref: https://archive.li/P32em *}
    <div class="bigPlayer">
        <div class="paddingLayer">
            <div class="playButtons">
                <div class="playButton musicIcon"></div>
                
                <div class="arrowsButtons">
                    <div class="nextButton musicIcon"></div>
                    <div class="backButton musicIcon"></div>
                </div>
            </div>

            <div class="trackPanel">
                <div class="trackInfo">
                    <b>{_track_unknown}</b> —
                    <span>{_track_noname}</span>

                    <span class="time">00:00</span>
                </div>

                <div class="selectableTrack">
                    <div>&nbsp;
                        <div class="slider"></div>
                    </div>
                </div>
            </div>

            <div class="volumePanel">
                <div class="selectableTrack">
                    <div>&nbsp;
                        <div class="slider"></div>
                    </div>
                </div>
            </div>

            <div class="additionalButtons">
                <div class="repeatButton musicIcon"></div>
                <div class="shuffleButton musicIcon"></div>
                <div class="deviceButton musicIcon"></div>
            </div>
        </div>
    </div>

    <div style="width: 100%;display: flex;margin-bottom: -10px;">
        <div style="width: 74%;">
            <div style="padding: 8px;">
                <div n:if="$audiosCount <= 0">
                    {include "../components/nothing.xml"}
                </div>
                <div n:if="$audiosCount > 0" class="infContainer">
                    <div class="infObj" n:foreach="$audios as $audio">
                        {include "player.xml", audio => $audio}
                    </div>
                </div>

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