<script type="application/javascript" src="{{ url_for('static', filename='js/plugins/music.mpd/utils.js') }}"></script>

{% include 'plugins/music.mpd/browser.html' %}
{% include 'plugins/music.mpd/playlist.html' %}
{% include 'plugins/music.mpd/search.html' %}

<script type="text/x-template" id="tmpl-music-mpd">
    <div class="row plugin music-mpd-container">
        <music-mpd-search ref="search" @info="info" :mpd="this">
        </music-mpd-search>

        <modal id="music-mpd-info" title="Info" v-model="modalVisible.info" ref="modal">
            <div class="info-container">
                <div class="row">
                    <div class="col-4 attr">File</div>
                    <div class="col-8 value" v-text="infoItem.file"></div>
                </div>

                <div class="row" v-if="infoItem.artist">
                    <div class="col-4 attr">Artist</div>
                    <div class="col-8 value" v-text="infoItem.artist"></div>
                </div>

                <div class="row" v-if="infoItem.title">
                    <div class="col-4 attr">Title</div>
                    <div class="col-8 value" v-text="infoItem.title"></div>
                </div>

                <div class="row" v-if="infoItem.album">
                    <div class="col-4 attr">Album</div>
                    <div class="col-8 value" v-text="infoItem.album"></div>
                </div>

                <div class="row" v-if="infoItem.year || infoItem.date">
                    <div class="col-4 attr">Date</div>
                    <div class="col-8 value" v-text="infoItem.year || infoItem.date"></div>
                </div>

                <div class="row" v-if="infoItem.disc">
                    <div class="col-4 attr">Disc</div>
                    <div class="col-8 value" v-text="infoItem.disc"></div>
                </div>

                <div class="row" v-if="infoItem.track">
                    <div class="col-4 attr">Track</div>
                    <div class="col-8 value" v-text="infoItem.track"></div>
                </div>

                <div class="row" v-if="infoItem.time && infoItem.time > 0">
                    <div class="col-4 attr">Time</div>
                    <div class="col-8 value" v-text="convertTime(infoItem.time)"></div>
                </div>
            </div>
        </modal>

        <modal id="music-mpd-playlist-add" title="Add to playlist" v-model="modalVisible.playlistAdd" ref="modalPlaylistAdd">
            <div class="playlist-add">
                <div class="playlist-add-controls">
                    <div class="row">
                        <div class="col-7 filter-container">
                            <i class="fa fa-filter input-icon"></i>
                            <input type="text" class="with-icon" v-model="playlistAddFilter">
                        </div>
                        <div class="col-5 pull-right">
                            <button class="btn-primary" type="button"
                                    @click="playlistadd"
                                    :disabled="Object.keys(selectedPlaylistAddItems).length === 0">
                                Add
                            </button>
                        </div>
                    </div>
                </div>

                <div class="playlists-container">
                    <div class="item"
                        :class="{selected: p.playlist in selectedPlaylistAddItems}"
                        v-for="p in playlists"
                        v-if="matchesPlaylistAddFilter(p)"
                        v-text="p.playlist"
                        @click="onPlaylistAddItemClick(p)">
                    </div>
                </div>
            </div>
        </modal>

        <modal id="music-mpd-playlist-edit" title="Edit/view playlist" v-model="modalVisible.editor" ref="modalEditor">
            <div class="editor">
                <div class="editor-controls">
                    <div class="row">
                        <div class="col-7 filter-container">
                            <i class="fa fa-filter input-icon"></i>
                            <input type="text" class="with-icon" v-model="editorFilter">
                        </div>
                        <div class="col-5 pull-right">
                            <button title="Add item" @click="addToPlaylistEditorPrompt">
                                <i class="fa fa-plus"></i>
                            </button>
                            <button title="Rename playlist" @click="rename">
                                <i class="fa fa-edit"></i>
                            </button>
                            <button :class="{enabled: selectionMode.editor}"
                                    :title="selectionMode.editor ? 'End selection' : 'Start selection'"
                                    @click="toggleEditorSelectionMode">
                                <i class="fa fa-check"></i>
                            </button>
                            <button title="Select all"
                                    @click="editorSelectAll">
                                <i class="fa fa-check-double"></i>
                            </button>
                            <button title="Clear playlist" @click="playlistclear">
                                <i class="fa fa-ban"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="editor-container">
                    <dropdown id="music-mpd-editor-dropdown"
                              v-if="selectedPlaylist.items"
                              ref="editorDropdown"
                              :items="editorDropdownItems">
                    </dropdown>

                    <music-mpd-playlist-item
                            v-for="item in selectedPlaylist.items"
                            v-if="matchesEditorFilter(item)"
                            :key="item.pos"
                            :track="item"
                            :selected="item.pos in selectedEditorItems"
                            :move="moveMode.editor"
                            @input="onEditorItemClick">
                    </music-mpd-playlist-item>
                </div>
            </div>
        </modal>

        <div class="row panels">
            <!-- Browser section -->
            <div class="s-hidden panel browser">
                <div class="browser-controls">
                    <div class="col-7 filter-container">
                        <i class="fa fa-filter input-icon"></i>
                        <input type="text" class="with-icon" v-model="browserFilter">
                    </div>
                    <div class="col-5 buttons pull-right">
                        <button :class="{enabled: selectionMode.browser}"
                                :title="selectionMode.browser ? 'End selection' : 'Start selection'"
                                @click="toggleBrowserSelectionMode">
                            <i class="fa fa-check"></i>
                        </button>
                        <button title="Select all"
                                @click="browserSelectAll">
                            <i class="fa fa-check-double"></i>
                        </button>
                    </div>
                </div>

                <div class="results">
                    <dropdown id="music-mpd-browser-dropdown"
                              v-if="browserItems.length > 0"
                              ref="browserDropdown"
                              :items="browserDropdownItems">
                    </dropdown>

                    <music-mpd-browser-item
                            v-if="browserPath.length > 0"
                            key=".."
                            id="directory:.."
                            type="directory"
                            name=".."
                            :selected="'directory:..' in selectedBrowserItems"
                            @input="onBrowserItemClick">
                    </music-mpd-browser-item>

                    <music-mpd-browser-item
                            v-for="item in browserItems"
                            v-if="matchesBrowserFilter(item)"
                            :key="item.id"
                            :id="item.id"
                            :type="item.type"
                            :name="item.name"
                            :file="item.file"
                            :time="item.time"
                            :artist="item.artist"
                            :title="item.title"
                            :date="item.date"
                            :track="item.track"
                            :genre="item.genre"
                            :lastModified="item['last-modified']"
                            :albumUri="item['x-albumuri']"
                            :selected="item.id in selectedBrowserItems"
                            @input="onBrowserItemClick">
                    </music-mpd-browser-item>
                </div>
            </div>

            <!-- Playlist section -->
            <div class="panel playlist">
                <div class="playlist-controls">
                    <div class="col-7 filter-container">
                        <i class="fa fa-filter input-icon"></i>
                        <input type="text" class="with-icon" v-model="playlistFilter">
                    </div>
                    <div class="col-5 buttons pull-right">
                        <button title="Search" @click="$refs.search.visible = true">
                            <i class="fa fa-search"></i>
                        </button>
                        <button title="Add item" @click="addToPlaylistPrompt">
                            <i class="fa fa-plus"></i>
                        </button>
                        <button title="Save playlist" v-if="playlist.length">
                            <i class="fa fa-save" @click="savePlaylistPrompt"></i>
                        </button>
                        <button title="Swap tracks"
                                v-if="selectionMode.playlist && playlist.length > 1"
                                :disabled="Object.keys(selectedPlaylistItems).length !== 2"
                                @click="swap">
                            <i class="fa fa-retweet"></i>
                        </button>
                        <button :class="{enabled: selectionMode.playlist}"
                                :title="selectionMode.playlist ? 'End selection' : 'Start selection'"
                                @click="togglePlaylistSelectionMode">
                            <i class="fa fa-check"></i>
                        </button>
                        <button title="Select all"
                                @click="playlistSelectAll">
                            <i class="fa fa-check-double"></i>
                        </button>
                        <button title="Clear playlist" @click="clear">
                            <i class="fa fa-ban"></i>
                        </button>
                    </div>
                </div>

                <div class="results">
                    <div class="row empty" v-if="playlist.length === 0">
                        <i class="fa fa-list"></i>
                    </div>

                    <dropdown id="music-mpd-playlist-dropdown"
                              v-if="playlist.length > 0"
                              ref="playlistDropdown"
                              :items="playlistDropdownItems">
                    </dropdown>

                    <music-mpd-playlist-item
                            v-for="item in playlist"
                            v-if="matchesPlaylistFilter(item)"
                            :key="item.pos"
                            :track="item"
                            :active="track.file && status.state !== 'stop' && item.file === track.file"
                            :selected="item.pos in selectedPlaylistItems"
                            :move="moveMode.playlist"
                            :ref="track.file && status.state !== 'stop' && item.file === track.file ? 'activePlaylistTrack' : undefined"
                            @input="onPlaylistItemClick">
                    </music-mpd-playlist-item>
                </div>
            </div>
        </div>

        <div class="row controls">
            <div class="col-3 track-container">
                <div class="track-info" v-if="status.state == 'play' || status.state == 'pause'">
                    <div class="row artist">
                        <a href="#" v-text="track.artist" @click="searchArtist(track)" v-if="track.artist"></a>
                        <span v-text="track.artist" v-else></span>
                    </div>
                    <div class="row title">
                        <a href="#" v-text="track.title" @click="searchAlbum(track)" v-if="track.album"></a>
                        <span v-text="track.title" v-else></span>
                    </div>
                </div>
            </div>

            <div class="col-6 playback-controls">
                <div class="row">
                    <button @click="previous" title="Play previous track">
                        <i class="fa fa-step-backward"></i>
                    </button>
                    <button @click="playPause" :title="status.state == 'play' ? 'Pause playback' : 'Start playback'">
                        <i class="fa fa-pause" v-if="status.state == 'play'"></i>
                        <i class="fa fa-play" v-else></i>
                    </button>
                    <button @click="stop" v-if="status.state != 'stop'" title="Stop playback">
                        <i class="fa fa-stop"></i>
                    </button>
                    <button @click="next" title="Play next track">
                        <i class="fa fa-step-forward"></i>
                    </button>
                </div>

                <div class="row">
                    <span class="elapsed-time" v-text="status.elapsed && status.state != 'stop' ? convertTime(status.elapsed) : '-:--'"></span>
                    <input type="range"
                           class="slider seek-slider"
                           v-model="status.elapsed"
                           min="0"
                           :max="track.time"
                           :disabled="!track.time || status.state == 'stop'"
                           @input="seek">
                    <span class="total-time" v-text="track.time && status.state != 'stop' ? convertTime(track.time) : '-:--'"></span>
                </div>
            </div>

            <div class="col-3 pull-right">
                <div class="row">
                    <button @click="single" :class="{enabled: status.single}" title="Toggle single mode">
                        <i class="fa fa-bullseye"></i>
                    </button>
                    <button @click="consume" :class="{enabled: status.consume}" title="Toggle consume mode">
                        <i class="fa fa-utensils"></i>
                    </button>
                    <button @click="random" :class="{enabled: status.random}" title="Toggle shuffle">
                        <i class="fa fa-random"></i>
                    </button>
                    <button @click="repeat" :class="{enabled: status.repeat}" title="Toggle repeat">
                        <i class="fa fa-redo"></i>
                    </button>
                </div>

                <div class="row volume-container">
                    <button disabled>
                        <i class="fa fa-volume-up"></i>
                    </button>
                    <input type="range"
                           class="slider volume-slider"
                           min="0"
                           max="100"
                           v-model="status.volume"
                           @input="volume">
                </div>
            </div>
        </div>
    </div>
</script>

