<script>
 import { goto } from '$app/navigation';

 import {
     Button,
     Container,
     Form,
     Icon,
     Input,
     ListGroup,
     ListGroupItem,
     Spinner,
 } from '@sveltestrap/sveltestrap';

 import { tracks } from '$lib/stores/tracks';
 import { uploadTrack } from '$lib/track';

 function submitTrack() {
     if (files.length == 0) {
         alert("Vous n'avez sélectionné aucun fichier !")
         return false;
     }

     uploadTrack(files).then((track) => {
         tracks.refresh();
         goto('musiks/tracks/' + track.id);
     })
 }

 export let files = [];
</script>

<Container>
    <h2>
        Nouvelle musique
    </h2>

    <form on:submit|preventDefault={submitTrack}>
        <Input type="file" bind:files />

        <Button type="submit" color="primary" class="mt-2" disabled={files.length == 0}>
            Ajouter cette musique
        </Button>
    </form>
</Container>
