<html>

<head>
    <link rel="stylesheet" href="./out/base.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
    <script src="./ipsum.js"></script>
    <script>
        const l = new LoremIpsum();
        window.prip = (i = 12) => window.document.write(l.paragraph(i));
        window.lo = (i = 32) => l.paragraph(i);
        const createStyle = (link) => {
            let e = document.createElement("link");
            e.type = "text/css";
            e.rel = "stylesheet";
            e.media = "screen,print";
            e.href = link;
            return e;
        }

        const light = "./out/light.css";
        const dark = "./out/dark.css"

        let active;

        function applyStyleSheet(d = false) {
            let n = createStyle(d ? dark : light);
            if (n === active)
                return;

            if (active)
                active.remove();

            document.head.appendChild(n);
            active = n;
        }

        applyStyleSheet(false);
        let isLight = true;

        function switchStyle() {
            applyStyleSheet(isLight);
            isLight = !isLight;
        }

        window.$ = document.querySelector.bind(document);

        let match = window.matchMedia("prefers-color-scheme: dark");
        match.addListener((ev) => {
            applyStyleSheet(ev.matches)
        })
    </script>
    <style>
        /* :root {
            --primary: blue;
            --on-primary: white;
        } */

        .parent {
            display: flex;
            flex-wrap: wrap;
        }

        .child {
            flex: 1 0 21%;
            margin: 20px;
            height: 100px;
        }

        .prev {
            margin-left: auto;
            margin-right: auto;
            max-width: 40rem;
        }

        .content {
            margin: 0 2rem;
        }
    </style>
</head>

<body>
    <button style="position: fixed; top: 10px; left: 10px; z-index: 100;" onclick="switchStyle()">Switch</button>
    <div class="content">
        <div class="margin prev">
            <div class="parent">
                <div class="child elv-1"></div>
                <div class="child elv-2"></div>
                <div class="child elv-3"></div>
                <div class="child elv-4"></div>
                <div class="child elv-6"></div>
                <div class="child elv-8"></div>
                <div class="child elv-9"></div>
                <div class="child elv-12"></div>
                <div class="child elv-16"></div>
                <div class="child elv-24"></div>
            </div>
        </div>

        <div class="margin prev">
            <button class="btn">Hallo Welt</button>
            <button class="btn btn-primary">Hallo Welt</button>

            <button class="btn fab">+</button>
        </div>

        <div class="margin prev">
            <button class="btn" onclick="$('#modal1').classList.toggle('modal-hidden')">Open Modal</button>

            <div id="modal1" class="modal modal-hidden">
                <div class="modal-title">Title</div>
                <div id="modal1_content" class="modal-content">
                    <script>
                        prip(80)
                    </script>
                </div>
                <div class="modal-action">
                    <button onclick="$('#modal1_content').innerHTML += lo(32)">Save</button>
                    <button id="modal1_close" onclick="$('#modal1').classList.toggle('modal-hidden')">Close</button>
                </div>
            </div>
        </div>


        <div class="margin prev">
            <form>
                <div class="input-group">
                    <label>Name</label>
                    <input type="text" placeholder="Name" />
                </div>

                <div class="input-group">
                    <label>Name</label>
                    <input type="text" placeholder="Name" />
                </div>

                <input class="inp" type="text" placeholder="Name" />
                <input class="inp" type="text" placeholder="Name2" value="Test01" />
                <input class="inp" type="text" placeholder="Name" disabled />

                <select class="inp">
                    <option>Opt1</option>
                    <option>Opt2</option>
                    <option>Opt3</option>
                    <option>Opt4</option>
                </select>
            </form>
        </div>

        <div class="margin prev">
            <button onclick="$('#ul1').classList.toggle('list-divider')">Toggle Divider</button>
            <ul id="ul1" class="list">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ul>
        </div>

        <div class="margin prev">
            <ul class="list list-divider list-clickable">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ul>
        </div>

        <div class="margin prev">
            <div class="header">
                <span>I1</span>
                <span>I2</span>
                <div class="header-icon-button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-trash-2">
                        <polyline points="3 6 5 6 21 6"></polyline>
                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                        <line x1="10" y1="11" x2="10" y2="17"></line>
                        <line x1="14" y1="11" x2="14" y2="17"></line>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</body>

</html>