<script setup lang="ts">
import { Outline } from '@/components/ui/outline';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { Download, Play } from 'lucide-vue-next';
import UploadEntry from '~/components/internal/import/uploadentry/UploadEntry.vue';
</script>

<template>
    <div class="flex-1">
        <NuxtLayout name="default">
            <template #header>
                <Outline side="bottom" padding="dense" class="w-full">
                    <div class="flex gap-8 w-full items-center">
                        <SidebarTrigger :size="5" />
                        <h2 class="scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
                            Import tracks
                        </h2>
                    </div>
                </Outline>
            </template>
            <div class="w-full flex flex-col p-8">
                <Outline class="rounded-xl bg-muted flex flex-col items-center justify-center gap-1">
                    <Download />
                    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
                        Drag and drop your audio files
                    </h4>
                    <p class="text-sm text-muted-foreground">
                        or
                    </p>
                    <UiButton variant="destructive">
                        <Play />
                        From Youtube
                    </UiButton>
                </Outline>
                <div>
                    <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
                        Uploaded files
                    </h3>
                    <div class="space-y-2">
                        <UploadEntry title="Test" size="3.8 MB" format="mp4" />
                        <UploadEntry title="Test" :progress="78" />
                        <UploadEntry title="Test" error="Uploading failed, please check your internet" />
                    </div>
                </div>
            </div>
        </NuxtLayout>
    </div>
</template>
