{% import "./widgets/jumbotron.njk" as jumbotron %}
{% import "./widgets/title.njk" as title %}

<!DOCTYPE html>
<html lang="de">

<head>
    <title>Shell Script Hub</title>
    {% include "./components/meta.njk" %}
    <style>
        * {
            box-sizing: border-box;
        }
    </style>
    <script>
        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark')
        }
    </script>
</head>

<body class="bg-gray-100 dark:bg-gray-800 dark:text-white">
    <div id="app" class="w-full flex flex-col gap-12">
        {% include "./components/navbar.njk" %}
        <div class="container mx-auto relative grid grid-cols-5 gap-4">
            <div class="col-span-full row-span-1 border border-gray-500 rounded">{{ jumbotron.createWidget("MTitle", "Message", { center: false }) }}</div>
            <div class="col-span-1 row-span-2 border border-gray-500 rounded">2</div>
            <div class="col-span-full row-span-1 border border-gray-500 rounded">{{ title.alignLeft("MTitle") }}</div>
            <div class="col-span-1 row-span-1 border border-gray-500 rounded">4</div>
            <div class="col-span-1 row-span-1 border border-gray-500 rounded">5</div>
            <div class="col-span-1 row-span-2 border border-gray-500 rounded">6</div>
            <div class="col-span-1 row-span-1 border border-gray-500 rounded">7</div>
            <div class="col-span-1 row-span-1 border border-gray-500 rounded">8</div>
            <div class="col-span-1 row-span-1 border border-gray-500 rounded">9</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
</body>

</html>