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

<script type="text/x-template" id="tmpl-media-controls">
    <div class="controls">
        <div class="col-3 item-container">
            <div class="item-info">
                <span v-text="status.title || status.url"
                      @click="bus.$emit('info-load', status.url)"
                      v-if="status.title"></span>
            </div>
        </div>

        <div class="col-6 playback-controls">
            <div class="row buttons">
                <button v-if="status.state === 'pause'" @click="bus.$emit('pause')">
                    <i class="fa fa-play"></i>
                </button>
                <button v-if="status.state === 'play'" @click="bus.$emit('pause')">
                    <i class="fa fa-pause"></i>
                </button>
                <button v-if="status.state === 'play' || status.state === 'pause'" @click="bus.$emit('stop')">
                    <i class="fa fa-stop"></i>
                </button>
            </div>

            <div class="row position">
                <span class="elapsed-time" v-text="status.position ? convertTime(status.position) : '-:--'"></span>
                <input type="range"
                       v-model="status.position"
                       @input="bus.$emit('seek', $event.target.value)"
                       class="slider seek-slider"
                       :disabled="!status.seekable"
                       min="0"
                       :max="status.duration || 0">
                <span class="total-time" v-text="status.duration ? convertTime(status.duration) : '-:--'"></span>
            </div>
        </div>

        <div class="col-3 pull-right">
            <div class="row volume-container">
                <button disabled>
                    <i class="fa fa-volume-up"></i>
                </button>
                <input type="range"
                       v-model="status.volume"
                       @input="bus.$emit('volume', $event.target.value)"
                       class="slider volume-slider"
                       min="0"
                       :max="status.volume_max || 100">
            </div>
        </div>
    </div>
</script>

