---
import '../style.css'

import Header from '../components/Header.astro'

const { title, courses, selectedCourseLabel } = Astro.props
---

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"
            integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+"
            crossorigin="anonymous"
        />
        <script
            defer
            src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"
            integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg"
            crossorigin="anonymous"></script>
        <script
            defer
            src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"
            integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk"
            crossorigin="anonymous"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // @ts-ignore
                renderMathInElement(document.body, {
                    // customised options
                    // • auto-render specific keys, e.g.:
                    delimiters: [
                        { left: '$$', right: '$$', display: true },
                        { left: '$', right: '$', display: false },
                        { left: '\\(', right: '\\)', display: false },
                        { left: '\\[', right: '\\]', display: true },
                    ],
                    // • rendering keys, e.g.:
                    throwOnError: false,
                })
            })
        </script>
        <title>{title}</title>
    </head>
    <body>
        <Header courses={courses} selectedCourseLabel={selectedCourseLabel} />
        <main>
            <slot />
        </main>
        <footer>
            <p>
                Creata con <code>&lt;3</code> dal
                <a class="logo" href="https://poisson.phc.dm.unipi.it/">
                    <img src="/logo-phc.svg" alt="PHC" srcset="" />
                </a>
            </p>
        </footer>
    </body>
</html>
