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

<script type="text/x-template" id="tmpl-music-mpd-search">
    <modal id="music-mpd-search-modal" title="Search" v-model="visible"
           :width="showResults ? '90vw' : 'initial'" ref="modal"
           @open="$refs.form.querySelector('input[type=text]:first-child').focus()">
        <div class="search">
            <form ref="form" @submit.prevent="search" :class="{hidden: showResults}">
                <div class="row">
                    <input type="text" v-model.lazy.trim="query.any" placeholder="Any field">
                </div>
                <div class="row">
                    <input type="text" v-model.lazy.trim="query.file" placeholder="Filename or URI">
                </div>
                <div class="row">
                    <input type="text" v-model.lazy.trim="query.artist" placeholder="Artist">
                </div>
                <div class="row">
                    <input type="text" v-model.lazy.trim="query.title" placeholder="Title">
                </div>
                <div class="row">
                    <input type="text" v-model.lazy.trim="query.album" placeholder="Album">
                </div>

                <div class="footer">
                    <div class="left col-6">
                        <button class="btn-default" type="button" v-if="results.length"
                                @click="$event.preventDefault(); showResults = true" title="Show results">
                            <i class="fa fa-list"></i>
                        </button>
                    </div>
                    <div class="pull-right" :class="{'col-6': results.length > 0, 'col-12': results.length == 0}">
                        <button class="btn-primary" type="submit">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>

            <div class="results-controls" :class="{hidden: !showResults}">
                <div class="col-6">
                    <i class="fa fa-filter input-icon"></i>
                    <input type="text" class="with-icon" v-model="filter">
                </div>
                <div class="col-6 pull-right">
                    <button :class="{enabled: selectionMode}"
                            :title="selectionMode ? 'End selection' : 'Start selection'"
                            v-if="results.length > 0"
                            @click="toggleSelectionMode">
                        <i class="fa fa-check"></i>
                    </button>
                    <button title="Select all"
                            v-if="results.length > 0"
                            @click="selectAll">
                        <i class="fa fa-check-double"></i>
                    </button>
                    <button class="btn-default" title="Show search form" @click="resetForm">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>

            <div class="results" :class="{hidden: !showResults}">
                <dropdown id="music-mpd-search-dropdown"
                          v-if="results.length > 0"
                          ref="dropdown"
                          :items="dropdownItems">
                </dropdown>

                <div class="no-results" v-if="results.length === 0">No results</div>
                <music-mpd-search-item
                        v-for="item in results"
                        v-if="matchesFilter(item)"
                        :key="item.file"
                        :item="item"
                        :selected="item.file in selectedItems"
                        @input="onItemClick">
                </music-mpd-search-item>
            </div>
        </div>
    </modal>
</script>

<script type="text/x-template" id="tmpl-music-mpd-search-item">
    <div class="row item search-item"
         :class="{selected: selected}"
         @click="$emit('input', item)">
        <div class="col-3 artist" v-text="item.artist" v-if="item.artist"></div>
        <div class="col-3 artist empty" v-else>[No Artist]</div>

        <div class="col-4 title" v-text="item.title || item.file"></div>

        <div class="col-3 album" v-text="item.album" v-if="item.album"></div>
        <div class="col-3 album empty" v-else>-</div>

        <div class="col-2 pull-right duration" v-text="item.time && item.time != 0 ? convertTime(item.time) : '-:--'"></div>
    </div>
</script>

