---
import '../styles/global.css';
import Search from '../components/Search.astro';
import ThemeSwitcher from '../components/ThemeSwitcher.astro';
import ThemeSwitcher_CSSOnly from '../components/ThemeSwitcher@CSSOnly.astro';
import BackToTop from "../components/BackToTop.astro";
import Meta from "../components/helper/head/Meta.astro";

import { siteConfig } from "../config";
import Logo from '../assets/mercury.svg'

interface Props {
  title: string;
  description: string;
  author?: string;
  path?: string;
  ogImage?: string;
}

const noscript = siteConfig.noClientJavaScript

const defaultTitle = siteConfig.title
const formattedRootPath = defaultTitle.toLowerCase().replace(/\s+/g, '-');
const relativePath = Astro.url.pathname
const path = formattedRootPath + (relativePath === '/' ? '' : relativePath)

const pageTitle = (relativePath === '/' ? defaultTitle : `${Astro.props.title} - ${defaultTitle}`)

const navBarItems = siteConfig.navBarItems
const customFooter = siteConfig.customFooter
const nekoType = siteConfig.neko?.type

const { title = pageTitle, author = siteConfig.defaultAuthor.name,description = siteConfig.description, ogImage = "" } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <Meta title={pageTitle} author={author} description={description} ogImage={ogImage} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <main>
      {noscript && <div id="top" style="visibility: hidden">Back To Top</div>}
      <div class="container">
        <div class="terminal-path">
          {path}
        </div>
        
        <nav class="nav">
          <a href="/" class="home">~</a>
          <a href="/blog">Blog</a>
          {navBarItems.map((item) => <a href={item.link}>{item.text}</a>)}
        </nav>

        <Search />
        
        <div class="content-box">
          <slot />
        </div>
      </div>
    </main>
    
    <footer class="footer">
      <div class="floating">
        <BackToTop/>
        {noscript ? <ThemeSwitcher_CSSOnly/> : <ThemeSwitcher/>}
      </div>
      <div class="container">
        <Fragment set:html={customFooter} />
        <p>Powered by <a href="https://git.gb0.dev/gb/mercury" target="_blank"><Logo width={16} height={16} /> mercury</a></p>
      </div>
    </footer>
    { (siteConfig.neko.enabled && !noscript) &&
      <>
        <script is:inline define:vars={{ nekoType  }}>
          window.NekoType = nekoType;
        </script>
        <script is:inline src="https://webneko.net/n20171213.js"></script>
      </>
    }
  </body>
</html>