---
import favicon from '../assets/favicon.svg';
import countryCodes from "country-codes-list";

// import bootstrapBundle from 'bootstrap/dist/css/bootstrap.min.css?url';
import bootstrapIcons from 'bootstrap-icons/font/bootstrap-icons.css?url';
import bootstrapReboot from 'bootstrap/dist/css/bootstrap-reboot.min.css?url';
import bootstrapGrid from 'bootstrap/dist/css/bootstrap-grid.min.css?url';

type Props = {
  title: string;
  description: string;
  path: string;
  prefetch?: boolean;
  noindex?: boolean;
  url?: string;
  image?: string;
  theme?: string;
};

const { title, description, path, prefetch = false, noindex, image, theme }: Props = Astro.props;
const gtm: string = import.meta.env.ASTRO_GTM;
const countryName = countryCodes.customList('countryCode', '{countryNameLocal}');
const full_title: string = title + ' | CodyOps ' + countryName[import.meta.env.ASTRO_COUNTRY.toUpperCase()];
---
<!doctype html>
<html lang={'es-' + import.meta.env.ASTRO_COUNTRY.toUpperCase()}>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="generator" content={Astro.generator} />
        <link rel="icon" type="image/svg+xml" href={favicon.src} />
        
        { prefetch
          ? <link rel="prefetch" href="/css/theme.css" as="style" />
            <link rel="prefetch" href={bootstrapIcons} as="style" />
            <link rel="stylesheet" href={bootstrapReboot} />
            <link rel="stylesheet" href={bootstrapGrid} />
          : <link rel="stylesheet" href="/css/theme.css" />
            <link rel="stylesheet" href={bootstrapIcons} />
        }
        
        { noindex
          ? <meta name="robots" content="noindex" />
          : <meta name="robots" content="all" />
        }
        
        { title && <meta property="og:title" content={full_title} />}
        <meta property="og:type" content="website" />
        { image && <meta property="og:image" content={image} />}
        { path && <meta property="og:url" content={import.meta.env.ASTRO_SITE+path} />}
        { description && <meta property="og:description" content={description} />}

        { !import.meta.env.DEV && 
			    <script is:inline async src={`https://www.googletagmanager.com/gtag/js?id=${gtm}`}></script>
			    <script is:inline async define:vars={{ gtm }}>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}  gtag('js', new Date());  gtag('config', gtm);</script>
		    }

        <link rel="alternate" href={`https://ar.codyops.com${path}`} hreflang="es-ar" />
        <link rel="alternate" href={`https://www.codyops.com.br${path}`} hreflang="es-br" />
        <link rel="alternate" href={`https://cl.codyops.com${path}`} hreflang="es-cl" />
        <link rel="alternate" href={`https://co.codyops.com${path}`} hreflang="es-co" />
        <link rel="alternate" href={`https://cr.codyops.com${path}`} hreflang="es-cr" />
        <link rel="alternate" href={`https://do.codyops.com${path}`} hreflang="es-do" />
        <link rel="alternate" href={`https://ec.codyops.com${path}`} hreflang="es-ec" />
        <link rel="alternate" href={`https://www.codyops.com.es${path}`} hreflang="es-es" />
        <link rel="alternate" href={`https://mx.codyops.com${path}`} hreflang="es-mx" />
        <link rel="alternate" href={`https://pa.codyops.com${path}`} hreflang="es-pa" />
        <link rel="alternate" href={`https://pe.codyops.com${path}`} hreflang="es-pe" />
        <link rel="alternate" href={`https://pr.codyops.com${path}`} hreflang="es-pr" />
        <link rel="alternate" href={`https://py.codyops.com${path}`} hreflang="es-py" />
        <link rel="alternate" href={`https://sv.codyops.com${path}`} hreflang="es-sv" />
        <link rel="alternate" href={`https://uy.codyops.com${path}`} hreflang="es-uy" />
		    <link rel="alternate" href={`https://www.codyops.com${path}`} hreflang="es-us" />

        <link rel="sitemap" href="/sitemap-index.xml" />
        <title>{full_title}</title>
        <meta name="description" content={description} />
    </head>
    <body data-bs-theme={theme}>
        <slot />
    </body>
</html>
