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

{block title}Аудиозаписи{/block}

{block header}
    Поиск
{/block}

{block content}

    {include "tabs.xml", mode => "search"}

    <div style="padding: 8px;">
        <form>
            <input n:attr="value => $q" name="q" type="text" placeholder="Поиск..." />
            <div style="display: flex; justify-content: space-between; padding: 8px 0;">
                <div><input n:attr="checked => $by_performer" type="checkbox" name="by_performer" /> исполнитель</div>
                <button class="button">Найти</button>
            </div>
        </form>

        <div n:if="$q && (count($audios) > 0 || count($playlists) > 0)">
            <style>
                .playlist-name {
                    max-width: 100px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
                    font-weight: 500;
                }

                .playlist-name:hover {  text-decoration: underline; }
            </style>
            <h4 style="padding: 8px;">Плейлисты</h4>
            <div style="padding: 8px;">
                <div n:if="count($playlists) <= 0">
                    {include "../components/nothing.xml"}
                </div>
                <div n:if="count($playlists) > 0" style="display: flex; gap: 8px; overflow-x: auto;">
                    <div n:foreach="$playlists as $playlist">
                        <div style="cursor: pointer;"
                             onClick="window.location.href = '/playlist{$playlist->getOwner()->getId()}_{$playlist->getId()}'">
                            <div>
                                <img src="{$playlist->getCoverURL()}" width="100" height="100"
                                     style="border-radius: 8px;"/>
                            </div>
                            <div class="playlist-name">{$playlist->getName()}</div>
                            <a href="{$playlist->getOwner()->getURL()}" class="playlist-name" style="font-weight: 400;">
                                {$playlist->getOwner()->getCanonicalName()}
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <h4 style="padding: 8px;">Треки</h4>
            <div n:if="count($audios) <= 0">
                {include "../components/nothing.xml"}
            </div>
            <div n:if="count($audios) > 0" n:foreach="$audios as $audio">
                {include "player.xml", audio => $audio, addOnClick => "addAudio({$audio->getId()})"}
                <br/>
            </div>

            <div n:if="count($audios) > 0">
                {script "js/node_modules/umbrellajs/umbrella.min.js"}
                {script "js/node_modules/dashjs/dist/dash.all.min.js"}

                {include "player.js.xml", audios => $audios}
            </div>
        </div>
        <div n:if="count($playlists) <= 0 && count($audios) <= 0">
            {include "../components/nothing.xml"}
        </div>
    </div>
{/block}