<template>
  <div class="flex flex-col bg-zinc-900 overflow-hidden h-screen">
    <NuxtErrorBoundary>
      <Header class="select-none" />
      <div class="relative grow overflow-y-auto">
        <slot />
      </div>
      <template #error="{ error }">
        <MiniHeader />
        <div class="relative grow overflow-y-auto bg-zinc-950">
          <div
            class="grid min-h-full grid-cols-1 grid-rows-[1fr,auto,1fr] lg:grid-cols-[max(50%,36rem),1fr]"
          >
            <header
              class="mx-auto w-full max-w-7xl px-6 pt-6 sm:pt-10 lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:px-8"
            >
              <Logo class="h-10 w-auto sm:h-12" />
            </header>
            <main
              class="mx-auto w-full max-w-7xl px-6 py-24 sm:py-32 lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:px-8"
            >
              <div class="max-w-lg">
                <h1
                  class="mt-4 text-3xl font-bold font-display tracking-tight text-zinc-100 sm:text-5xl"
                >
                  Unrecoverable error
                </h1>
                <p class="mt-6 text-base leading-7 text-zinc-400">
                  Drop encountered an error that it couldn't handle. Please
                  restart the application and file a bug report.
                </p>
                <p class="mt-3 text-sm font-monospace text-zinc-500">
                  Error: {{ error }}
                </p>
              </div>
            </main>
            <footer
              class="self-end lg:col-span-2 lg:col-start-1 lg:row-start-3"
            >
              <div class="border-t border-blue-600 bg-zinc-900 py-10">
                <nav
                  class="mx-auto flex w-full max-w-7xl items-center gap-x-4 px-6 text-sm leading-7 text-zinc-400 lg:px-8"
                >
                  <a href="#">Documentation</a>
                  <svg
                    viewBox="0 0 2 2"
                    aria-hidden="true"
                    class="h-0.5 w-0.5 fill-zinc-700"
                  >
                    <circle cx="1" cy="1" r="1" />
                  </svg>
                  <a href="#">Troubleshooting</a>
                  <svg
                    viewBox="0 0 2 2"
                    aria-hidden="true"
                    class="h-0.5 w-0.5 fill-zinc-700"
                  >
                    <circle cx="1" cy="1" r="1" />
                  </svg>
                  <NuxtLink to="/setup/server">Switch instance</NuxtLink>
                </nav>
              </div>
            </footer>
            <div
              class="hidden lg:relative lg:col-start-2 lg:row-start-1 lg:row-end-4 lg:block"
            >
              <img
                src="@/assets/wallpaper.jpg"
                alt=""
                class="absolute inset-0 h-full w-full object-cover"
              />
            </div>
          </div>
        </div>
      </template>
    </NuxtErrorBoundary>
  </div>
</template>

<script setup lang="ts">
const queueState = useQueueState();
</script>
