---
import Lightbox from "../components/Lightbox.astro";
import Sidebar from "../components/Sidebar.astro";
import pb from "../lib/pb";
import c from "../lib/config";


export const prerender = false;

const avatarRec = await pb
  .collection("images")
  .getFirstListItem("useAsAvatar=true").catch(() => null);
const backgroundRec = await pb
  .collection("images")
  .getFirstListItem("useAsBackground=true").catch(() => null);

const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file) : null;
const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgroundRec.file) : null;
const socials = await pb.collection("socials").getFullList();

const config = {
  icon,
  socials,
  background,
  title: c.TITLE,
  description: c.DESCRIPTION,
};
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{config.title}</title>
  </head>
  <body>
    <Lightbox />
    <div
      class="xl:fixed xl:left-0 xl:top-0 w-full xl:w-96 bg-[#11111156] backdrop-blur-md  h-full pt-4  box-border text-center"
    >
      <Sidebar />
    </div>
    <div
      class="container float-none xl:float-right xl:box-border transition-all"
    >
      <slot />
    </div>
  </body>
</html>

<style define:vars={{ background: `url(${config.background})` }}>
  @media screen(xl) {
    .container {
      width: calc(100% - 25rem);
    }
  }

  body {
    font-family: system-ui, sans-serif;
    background: var(--background);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    color: whitesmoke;
  }
</style>
