<script setup lang="ts">
import { ref, onMounted } from "vue";
import { router, api, store } from "@";
import NavBar from "@/components/NavBar.vue";
import DocumentationIcon from "@/components/DocumentationIcon.vue";
import Player from "@/components/Player.vue";
import Error from "@/components/Error.vue";

</script>

<template>
    <div class="flex-grow">
        <NavBar>
            <template #left>
                <RouterLink class="link-button" to="/">Home</RouterLink>
            </template>

            <template #right>
                <RouterLink class="link-button" to="/auth/signin">Sign In</RouterLink>
            </template>
        </NavBar>

        <main class="w-full max-w-[1000px] mx-auto">
            <slot></slot>
        </main>
    </div>

    <Player />

    <footer class="flex justify-between pb-2 pt-2 pl-5 pr-5 bg-ctp-mantle">
        <a href="https://vcs.elnafo.ru/L-Nafaryus" class="text-ctp-peach">Made by L-Nafaryus, 2024</a>
        <div>

        </div>
        <a href="/api/docs" class="flex justify-center items-center space-x-1 text-ctp-peach">
            <DocumentationIcon />
            <span>API</span>
        </a>
    </footer>
</template>
