---
import Footer from '@components/Footer.astro'
import Navbar from '@components/Navbar.astro'
import BackToTop from '@components/control/BackToTop.astro'
import SideBar from '@components/widget/SideBar.astro'
import Layout from './Layout.astro'
import { Icon } from 'astro-icon/components';
import { siteConfig } from '../config';

interface Props {
  title?: string
  banner?: string
  description?: string
}

const { title, banner, description } = Astro.props
const hasBannerCredit = siteConfig.banner.enable && siteConfig.banner.credit.enable
const hasBannerLink = !!(siteConfig.banner.credit.url)
---

<Layout title={title} banner={banner} description={description}>
<slot slot="head" name="head"></slot>
<div class="max-w-[var(--page-width)] min-h-screen grid grid-cols-[17.5rem_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
    mx-auto gap-4 relative px-0 md:px-4"
>
    <div id="top-row" class="relative transition-all duration-700 col-span-2 grid-rows-1" class:list={[""]}>
        <Navbar></Navbar>

        <!-- Banner image credit -->
        {hasBannerCredit && <a href={siteConfig.banner.credit.url} id="banner-credit" target="_blank" rel="noopener" aria-label="Visit image source"
                class:list={["group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
                "px-3 right-0 bottom-0 bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}
        >
            <Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>
            <div class="text-white/75 text-xs">{siteConfig.banner.credit.text}</div>
            <Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-2 text-[1.25rem] opacity-0",
                {"group-hover:opacity-100": hasBannerLink}]}
                  name="material-symbols:chevron-right-rounded">
            </Icon>
        </a>}

    </div>
    <SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[17.5rem] onload-animation"></SideBar>

    <div id="content-wrapper" class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden onload-animation">
        <!-- the overflow-hidden here prevent long text break the layout-->
        <!-- make id different from windows.swup global property -->
        <main id="swup-container" class="transition-swup-fade">
            <slot></slot>
        </main>

    </div>

    <div id="footer" class="grid-rows-3 col-span-2 mt-4 onload-animation">
        <Footer></Footer>
    </div>
    <BackToTop></BackToTop>
</div>
</Layout>