<script setup>
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
import {Link} from '@inertiajs/vue3';
</script>

<template>
    <div class="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50">
        <div
            class="relative flex min-h-screen flex-col items-center justify-center selection:bg-[#FF2D20] selection:text-white"
        >
            <div class="relative flex-1 w-full max-w-2xl px-6 lg:max-w-7xl flex flex-col justify-start">
                <header
                    class="flex justify-end py-4"
                >
                    <nav class="-mx-3 flex flex-1 justify-end">
                        <Link
                            :href="route('index')"
                            class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
                        >
                            На главную
                        </Link>

                        <Link
                            v-if="$page.props.auth.user"
                            :href="route('logout')"
                            method="post"
                            as="button"
                            class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
                        >
                            Выход
                        </Link>

                        <template v-else>
                            <Link
                                v-if="$page.props.canLogin"
                                :href="route('login')"
                                class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
                            >
                                Вход
                            </Link>

                            <Link
                                v-if="$page.props.canRegister"
                                :href="route('register')"
                                class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
                            >
                                Регистрация
                            </Link>
                        </template>
                    </nav>
                </header>

                <main class="mt-6 flex-1 flex flex-col justify-center items-center">
                    <span class="w-full text-center font-bold text-6xl leading-tight">
                        Гараж 181
                    </span>
                    <div class="w-full sm:max-w-md sm:rounded-lg">
                        <slot/>
                    </div>
                </main>

                <footer class="py-4 text-center text-sm text-black dark:text-white/70">
                    Developed by NaggaDIM (Copyright ©️ 2024 - {{ $page.props.currentYear ?? 2024 }})
                </footer>
            </div>
        </div>
    </div>
</template>

<!--<template>-->
<!--    <div-->
<!--        class="flex min-h-screen flex-col items-center bg-gray-100 pt-6 sm:justify-center sm:pt-0 dark:bg-gray-900"-->
<!--    >-->
<!--        <div>-->
<!--            <Link href="/">-->
<!--                <ApplicationLogo class="h-20 w-20 fill-current text-gray-500" />-->
<!--            </Link>-->
<!--        </div>-->

<!--        <div-->
<!--            class="mt-6 w-full overflow-hidden bg-white px-6 py-4 shadow-md sm:max-w-md sm:rounded-lg dark:bg-gray-800"-->
<!--        >-->
<!--            <slot />-->
<!--        </div>-->
<!--    </div>-->
<!--</template>-->
