<template>
<div>

    <h1 class='pb-2'>Downloads</h1>

    <v-card v-if='$root.download' max-width='100%'>
        
        <v-list-item three-line>
            <v-list-item-avatar>
                <v-img :src='$root.download.track.albumArt.thumb'></v-img>
            </v-list-item-avatar>
            <v-list-item-content>
                <v-list-item-title>{{$root.download.track.title}}</v-list-item-title>
                <v-list-item-subtitle>
                    Downloaded: {{$filesize($root.download.downloaded)}} / {{$filesize($root.download.size)}}<br>
                    Path: {{$root.download.path}}
                </v-list-item-subtitle>
            </v-list-item-content>
        </v-list-item>
    </v-card>

    <h1 class='pb-2'>Queue:</h1>
    <div class='text-h6 pb-2 d-flex'>Total: {{$root.downloads.length}}
        <v-btn @click='$root.toggleDownload' class='ml-2' color='primary'>
            <div v-if='$root.downloading'>
                <v-icon>mdi-stop</v-icon>
                Stop
            </div>
            <div v-if='!$root.downloading'>
                <v-icon>mdi-download</v-icon>
                Start
            </div>
        </v-btn>
        <!-- Open dir -->
        <v-btn @click='openDir' class='ml-2' v-if='$root.settings.electron'>
            <v-icon>mdi-folder</v-icon>
            Show folder
        </v-btn>
    </div>

    <!-- Downloads -->
    <v-list dense>
        <div v-for='download in $root.downloads' :key='download.id'>
            <v-list-item dense>
                <v-list-item-avatar>
                    <v-img :src='download.track.albumArt.thumb'></v-img>
                </v-list-item-avatar>
                <v-list-item-content>
                    <v-list-item-title>{{download.track.title}}</v-list-item-title>
                    <v-list-item-subtitle>{{download.track.artistString}}</v-list-item-subtitle>
                </v-list-item-content>
            </v-list-item>
        </div>
    </v-list>

</div>
</template>

<script>

export default {
    name: 'DownloadsPage',
    methods: {
        //Open downloads directory using electron
        openDir() {
            const {ipcRenderer} = window.require('electron');
            ipcRenderer.send('openDownloadsDir');
        }
    }
}
</script>