<template>
  <div>
    <slot />
    <ToastContainer />
  </div>
</template>

<script setup>
import ToastContainer from '~/components/ToastContainer.client.vue'
useHead({
  title: 'RepoDructor - Music Player',
  meta: [
    { name: 'description', content: 'A beautiful glassmorphism music player for your local network' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { name: 'theme-color', content: '#8b5cf6' },
    { name: 'mobile-web-app-capable', content: 'yes' },
    { name: 'apple-mobile-web-app-capable', content: 'yes' },
    { name: 'apple-mobile-web-app-status-bar-style', content: 'default' },
    { name: 'apple-mobile-web-app-title', content: 'RepoDructor' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    { rel: 'icon', type: 'image/png', sizes: '192x192', href: '/logo-192.png' },
    { rel: 'apple-touch-icon', sizes: '192x192', href: '/logo-192.png' },
    { rel: 'apple-touch-icon', sizes: '512x512', href: '/logo-512.png' },
    { rel: 'manifest', href: '/manifest.webmanifest' }
  ]
})
</script>
