<script type="text/x-template" id="cider-app-sidebar">
    <div id="app-sidebar">
        <template v-if="$root.getThemeDirective('windowLayout') != 'twopanel'">
            <div class="app-sidebar-header">
                <div class="search-input-container">
                    <div class="search-input--icon"></div>
                    <input
                            type="search"
                            spellcheck="false"
                            @click="$root.showSearch()"
                            @focus="$root.search.showHints = true"
                            @blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)"
                            v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false"
                            @change="$root.showSearch();"
                            @input="$root.getSearchHints()"
                            :placeholder="$root.getLz('term.search') + '...'"
                            v-model="$root.search.term"
                            ref="searchInput"
                            class="search-input"
                    />

                    <div
                            class="search-hints-container"
                            v-if="$root.search.showHints && $root.search.hints.length != 0"
                    >
                        <div class="search-hints">
                            <button
                                    class="search-hint text-overflow-elipsis"
                                    v-for="hint in $root.search.hints"
                                    @click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint)"
                            >
                                {{ hint }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <div class="app-sidebar-content" scrollaxis="y">
            <!-- AM Navigation -->
            <div v-show="$root.getThemeDirective('windowLayout') != 'twopanel'" class="sidebarCatalogSection">
                <div
                        class="app-sidebar-header-text"
                        @click="$root.cfg.general.sidebarCollapsed.cider = !$root.cfg.general.sidebarCollapsed.cider"
                        :class="{collapsed: $root.cfg.general.sidebarCollapsed.cider}"
                >
                    {{ $root.getLz("app.name") }}
                </div>
                <template v-if="!$root.cfg.general.sidebarCollapsed.cider">
                    <sidebar-library-item
                            :name="$root.getLz('home.title')"
                            svg-icon="./assets/feather/home.svg"
                            svg-icon-name="home"
                            page="home"
                    >
                    </sidebar-library-item>
                </template>

                <div
                        class="app-sidebar-header-text"
                        @click="$root.cfg.general.sidebarCollapsed.applemusic = !$root.cfg.general.sidebarCollapsed.applemusic"
                        :class="{collapsed: $root.cfg.general.sidebarCollapsed.applemusic}"
                >
                    {{ $root.getLz("term.appleMusic") }}
                </div>
                <template v-if="!$root.cfg.general.sidebarCollapsed.applemusic">
                    <sidebar-library-item
                            :name="$root.getLz('term.listenNow')"
                            svg-icon="./assets/feather/play-circle.svg"
                            svg-icon-name="listenNow"
                            page="listen_now"
                    ></sidebar-library-item>
                    <sidebar-library-item
                            :name="$root.getLz('term.browse')"
                            svg-icon="./assets/feather/globe.svg"
                            svg-icon-name="browse"
                            page="browse"
                    >
                    </sidebar-library-item>
                    <sidebar-library-item
                            :name="$root.getLz('term.radio')"
                            svg-icon="./assets/feather/radio.svg"
                            svg-icon-name="radio"
                            page="radio"
                    ></sidebar-library-item>
                </template>
            </div>

            <div
                    class="app-sidebar-header-text"
                    @click="$root.cfg.general.sidebarCollapsed.library = !$root.cfg.general.sidebarCollapsed.library"
                    :class="{collapsed: $root.cfg.general.sidebarCollapsed.library}"
            >
                {{ $root.getLz("term.library") }}
            </div>
            <template v-if="!$root.cfg.general.sidebarCollapsed.library">
                <sidebar-library-item
                        :name="$root.getLz('term.recentlyAdded')"
                        svg-icon="./assets/feather/plus-circle.svg"
                        svg-icon-name="recentlyAdded"
                        v-if="$root.cfg.general.sidebarItems.recentlyAdded"
                        page="library-recentlyadded"
                ></sidebar-library-item>
                <sidebar-library-item
                        :name="$root.getLz('term.songs')"
                        svg-icon="./assets/feather/music.svg"
                        svg-icon-name="songs"
                        v-if="$root.cfg.general.sidebarItems.songs"
                        page="library-songs"
                ></sidebar-library-item>
                <sidebar-library-item
                        :name="$root.getLz('term.albums')"
                        svg-icon="./assets/feather/disc.svg"
                        svg-icon-name="albums"
                        v-if="$root.cfg.general.sidebarItems.albums"
                        page="library-albums"
                ></sidebar-library-item>
                <sidebar-library-item
                        :name="$root.getLz('term.artists')"
                        svg-icon="./assets/feather/user.svg"
                        svg-icon-name="artists"
                        v-if="$root.cfg.general.sidebarItems.artists"
                        page="library-artists"
                ></sidebar-library-item>
                <sidebar-library-item
                        :name="$root.getLz('term.videos')"
                        svg-icon="./assets/feather/video.svg"
                        svg-icon-name="videos"
                        v-if="$root.cfg.general.sidebarItems.videos"
                        page="library-videos"
                ></sidebar-library-item>
                <sidebar-library-item
                        :name="$root.getLz('term.podcasts')"
                        svg-icon="./assets/feather/mic.svg"
                        svg-icon-name="podcasts"
                        v-if="$root.cfg.general.sidebarItems.podcasts"
                        page="podcasts"
                >
                </sidebar-library-item>
            </template>
            <template v-if="$root.cfg.libraryPrefs.localPaths.length != 0 && $root.cfg.advanced.experiments.includes('localLibrary')">
                <div class="app-sidebar-header-text"
                  @click="$root.cfg.general.sidebarCollapsed.localLibrary = !$root.cfg.general.sidebarCollapsed.localLibrary"
                  :class="{collapsed: $root.cfg.general.sidebarCollapsed.localLibrary}">
                  Local Library
                </div>
                <template v-if="!$root.cfg.general.sidebarCollapsed.localLibrary">
                  <sidebar-playlist :item="{attributes: { name:'Songs'} , id:'ciderlocal'}"></sidebar-playlist>
                </template>
            </template>
            <template v-if="$root.getPlaylistFolderChildren('p.applemusic').length != 0">
                <div
                        class="app-sidebar-header-text"
                        @click="$root.cfg.general.sidebarCollapsed.amplaylists = !$root.cfg.general.sidebarCollapsed.amplaylists"
                        @contextmenu="$root.playlistHeaderContextMenu"
                        :class="{collapsed: $root.cfg.general.sidebarCollapsed.amplaylists}"
                >
                    {{ $root.getLz("term.appleMusic") }}
                    {{ $root.getLz("term.playlists") }}
                </div>
                <template v-if="!$root.cfg.general.sidebarCollapsed.amplaylists">
                    <sidebar-playlist
                            v-for="item in $root.getPlaylistFolderChildren('p.applemusic')"
                            :item="item"
                    >
                    </sidebar-playlist>
                </template>
            </template>
            <div
                    class="app-sidebar-header-text"
                    @click="$root.cfg.general.sidebarCollapsed.playlists = !$root.cfg.general.sidebarCollapsed.playlists"
                    @contextmenu="$root.playlistHeaderContextMenu"
                    :class="{collapsed: $root.cfg.general.sidebarCollapsed.playlists}"
            >
                {{ $root.getLz("term.playlists") }}
            </div>
            <template v-if="!$root.cfg.general.sidebarCollapsed.playlists">
                <button class="app-sidebar-item" @click="$root.playlistHeaderContextMenu">
                    <svg-icon url="./assets/feather/plus.svg"></svg-icon>
                    <div class="sidebar-item-text">
                        {{ $root.getLz("action.createNew") }}
                    </div>
                </button>
                <sidebar-playlist
                        v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')"
                        :item="item"
                >
                </sidebar-playlist>
            </template>
        </div>
        <div class="app-sidebar-footer display--small app-sidebar-footer--controls">
            <div
                    class="app-playback-controls"
                    v-if="$root.mkReady()"
                    @contextmenu="$root.nowPlayingContextMenu"
            >
                <div class="control-buttons">
                    <div class="app-chrome-item">
                        <button
                                class="playback-button--small shuffle"
                                v-if="$root.mk.shuffleMode == 0"
                                @click="$root.mk.shuffleMode = 1"
                                :title="$root.getLz('term.enableShuffle')"
                                :class="$root.isDisabled() && 'disabled'"
                                v-b-tooltip.hover.righttop
                        ></button>
                        <button
                                class="playback-button--small shuffle active"
                                v-else
                                @click="$root.mk.shuffleMode = 0"
                                :title="$root.getLz('term.disableShuffle')"
                                :class="$root.isDisabled() && 'disabled'"
                                v-b-tooltip.hover.righttop
                        ></button>
                    </div>
                    <div class="app-chrome-item">
                        <button
                                class="playback-button previous"
                                @click="$root.prevButton()"
                                :class="$root.isPrevDisabled() && 'disabled'"
                                :title="$root.getLz('term.previous')"
                                v-b-tooltip.hover
                        ></button>
                    </div>
                    <div class="app-chrome-item">
                        <button class="playback-button stop" @click="$root.mk.stop()"
                                v-if="$root.mk.isPlaying && $root.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
                                :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
                        <button class="playback-button pause" @click="$root.mk.pause()"
                                v-else-if="$root.mk.isPlaying"
                                :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
                        <button class="playback-button play" @click="$root.mk.play()" v-else
                                :title="$root.getLz('term.play')"
                                v-b-tooltip.hover></button>
                    </div>
                    <div class="app-chrome-item">
                        <button
                                class="playback-button next"
                                @click="$root.skipToNextItem()"
                                :title="$root.getLz('term.next')"
                                :class="$root.isNextDisabled() && 'disabled'"
                                v-b-tooltip.hover
                        ></button>
                    </div>
                    <div class="app-chrome-item">
                        <button
                                class="playback-button--small repeat"
                                v-if="$root.mk.repeatMode == 0"
                                @click="$root.mk.repeatMode = 1"
                                :class="$root.isDisabled() && 'disabled'"
                                :title="$root.getLz('term.enableRepeatOne')"
                                v-b-tooltip.hover
                        ></button>
                        <button
                                class="playback-button--small repeat repeatOne"
                                @click="$root.mk.repeatMode = 2"
                                v-else-if="$root.mk.repeatMode == 1"
                                :title="$root.getLz('term.disableRepeatOne')"
                                :class="$root.isDisabled() && 'disabled'"
                                v-b-tooltip.hover
                        ></button>
                        <button
                                class="playback-button--small repeat active"
                                @click="$root.mk.repeatMode = 0"
                                v-else-if="$root.mk.repeatMode == 2"
                                :title="$root.getLz('term.disableRepeat')"
                                :class="$root.isDisabled() && 'disabled'"
                                v-b-tooltip.hover
                        ></button>
                    </div>
                </div>
                <div class="app-chrome-item volume">
                    <div class="input-container">
                        <button
                                class="volume-button--small volume"
                                @click="$root.muteButtonPressed()"
                                :class="{'active': $root.cfg.audio.volume == 0}"
                                :title="$root.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
                                v-b-tooltip.hover
                        ></button>
                        <input
                                type="range"
                                class=""
                                @wheel="$root.volumeWheel"
                                :step="$root.cfg.audio.volumeStep"
                                min="0"
                                :max="$root.cfg.audio.maxVolume"
                                v-model="$root.mk.volume"
                                v-if="typeof $root.mk.volume != 'undefined'"
                                @change="$root.checkMuteChange()"
                                v-b-tooltip.hover
                                :title="$root.formatVolumeTooltip()"
                        />
                    </div>
                </div>
            </div>
        </div>
        <div
                class="app-sidebar-notification backgroundNotification"
                v-if="$root.library.backgroundNotification.show"
        >
            <div class="message">
                {{ $root.library.backgroundNotification.message }} ({{
                $root.library.backgroundNotification.progress
                }}
                / {{ $root.library.backgroundNotification.total }})
            </div>
        </div>
    </div>
</script>

<script>
    Vue.component("cider-app-sidebar", {
        template: "#cider-app-sidebar"
    })
</script>