{% include 'plugins/media/search.html' %}
{% include 'plugins/media/controls.html' %}
{% include 'plugins/media/results.html' %}
{% include 'plugins/media/item.html' %}
{% include 'plugins/media/info.html' %}
{% include 'plugins/media/subs.html' %}
{% include 'plugins/media/torrents.html' %}

<script type="application/javascript" src="{{ url_for('static', filename='js/plugins/media/handlers/base.js') }}"></script>

{% for script in utils.search_directory(static_folder + '/js/plugins/media/handlers', 'js', recursive=True) %}
    {% if script != 'base.js' %}
<script type="application/javascript" src="{{ url_for('static', filename='js/plugins/media/handlers/' + script) }}"></script>
    {% endif %}
{% endfor %}

<link rel="stylesheet" href="https://raw.githubusercontent.com/BlackLight/flag-icon-css/master/css/flag-icon.css"
   integrity="sha384-mPYV5+yeuQTJewx1+Wrw69srZ+G3vhAUzyFk0FStD8ndXBy3bJcrc15p9XJr7OBn" crossorigin="anonymous">

<script type="text/x-template" id="tmpl-media">
    <div class="plugin media-plugin">
        <div class="search">
            <div class="col-10">
                <media-search :bus="bus"
                              :supportedTypes="types">
                </media-search>
            </div>

            <div class="col-2 top-buttons">
                <button type="button"
                        @click="torrentModal.visible = !torrentModal.visible"
                        title="Show torrents progress">
                    <i class="fa fa-download"></i>
                </button>

                <media-devices :bus="bus"
                               :localPlayer="player">
                </media-devices>
            </div>
        </div>

        <media-results :bus="bus"
                       :status="selectedDevice && status[selectedDevice.type] && status[selectedDevice.type][selectedDevice.name] ? status[selectedDevice.type][selectedDevice.name] : {}"
                       :searching="loading.results"
                       :loading="loading.media"
                       :resize="selectedDevice && status[selectedDevice.type] && status[selectedDevice.type][selectedDevice.name] && (status[selectedDevice.type][selectedDevice.name].state === 'play' || status[selectedDevice.type][selectedDevice.name].state === 'pause')"
                       :results="results">
        </media-results>

        <media-controls :bus="bus"
                        :status="selectedDevice && status[selectedDevice.type] && status[selectedDevice.type][selectedDevice.name] ? status[selectedDevice.type][selectedDevice.name] : {}"
                        v-if="selectedDevice && status[selectedDevice.type] && status[selectedDevice.type][selectedDevice.name] && (status[selectedDevice.type][selectedDevice.name].state === 'play' || status[selectedDevice.type][selectedDevice.name].state === 'pause')">
        </media-controls>

        <modal id="media-info" title="Media info" v-model="infoModal.visible">
            <div class="loading" v-if="infoModal.loading">Loading</div>
            <media-info :bus="bus" :item="infoModal.item" v-else></media-info>
        </modal>

        <modal id="media-subs" title="Subtitles" v-model="subsModal.visible">
            <media-subs :bus="bus"
                        :subFormats="selectedDevice ? selectedDevice.subFormats : []"
                        ref="subs">
            </media-subs>
        </modal>

        <modal id="media-torrents" title="Torrents progress" v-model="torrentModal.visible">
            <media-torrents :bus="bus"
                            :torrents="torrentModal.items"
                            ref="torrents">
            </media-torrents>
        </modal>
    </div>
</script>