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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML Cards</title>


    <link rel="stylesheet" href="css/bulma.css">
    <link rel="stylesheet" href="css/card.css">
    <link rel="stylesheet" href="css/subcard.css">
    <link rel="stylesheet" href="css/highlight.css">
    <link rel="stylesheet" href="css/popup.css">

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            position: fixed;
            background-color: white;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <!-- 
    <h1>HTML Cards</h1>
    <p>Some Text on the page. Eiusmod nostrud laborum non nulla in sunt ex cillum quis. Nulla mollit minim Lorem in. Deserunt
        aliquip cillum dolor adipisicing.
    </p>
    <p>
        Ea velit consectetur est cillum consectetur adipisicing dolor sunt nostrud. Qui eu ut anim incididunt aute irure do occaecat
        reprehenderit ea irure ex. Ullamco cupidatat ut duis incididunt consectetur in cillum et Lorem. Ullamco voluptate
        laborum non consectetur non laborum voluptate minim. Non cillum do eiusmod magna consequat anim exercitation occaecat
        proident velit.
    </p>
    <p>
        Qui adipisicing dolor occaecat cupidatat dolore ipsum velit excepteur magna Lorem aliqua consectetur consectetur ipsum. Sunt
        tempor excepteur amet laborum id enim sunt aute dolor culpa dolor non. Eu anim veniam minim eu cupidatat enim culpa
        quis dolore. Amet consectetur anim et culpa aliquip consequat reprehenderit fugiat. Aute labore ullamco minim deserunt
        dolore quis ipsum magna consequat culpa do. Velit proident aliqua ipsum qui dolor veniam amet proident est veniam
        cillum.
    </p>
    <p>
        Cupidatat esse ut proident consectetur irure velit esse sint consectetur id est consectetur mollit. Nisi ullamco sunt deserunt
        consequat tempor adipisicing. Labore reprehenderit tempor aliquip veniam amet culpa excepteur dolore. Tempor aute
        dolor est sit. Duis laboris mollit est irure dolore pariatur deserunt velit velit elit sit. Labore laborum officia
        officia anim ipsum officia anim nostrud cillum est anim qui. Dolore non minim eu eiusmod amet in deserunt exercitation
        anim consectetur commodo occaecat.</p> -->

    <script src="../../../../../lib/3rdparty/all.js"></script>
    <script src="../../../../../lib/bootstrap.js"></script>
    <script src="../../../../../lib/3rdparty/inobounce.js"></script>
    <script src="../../../../../lib/3rdparty/hammer.propagating.js"></script>
    <script src="./js/all.js"></script>
    <script src="./js/card.js"></script>
    <script src="./js/highlight.js"></script>
    <script src="../../../js/theme.js"></script>


    <script>
        setup()
        async function setup() {

            console.log("Setting up card ...")
            let config = await Theme.loadConfig()

            console.log("Config loaded ...")

            let scatterContainer = new DOMScatterContainer(document.body, {
                stopEvents: false,
                useCapture: false
            })

            Card.dynamicHeight = true

            function createScatterCard(id) {
                return ScatterCard.loadAndCreateScatterCard(scatterContainer, id, {
                    basePath: config.tueschDirectory,
                    modules: [
                        // new CardPlugin.LightBox("img-overlay"),
                        // new CardPlugin.EnlargeableThumbnail(".thumbnail-wrapper", ".img-overlay"),
                        // new CardPlugin.Ui("ui"),
                        // new CardPlugin.Speech(".ui", "speech")
                    ],
                    onCreated: () => {
                        console.log("Hello")
                    },
                    onClose: () => {
                        console.log("Tried to close the card. This is forbidden here! ;)")
                    }
                }).catch(e => console.error(e))
            }

            function enableDebug(element) {
                element.classList.add("debug")

            }
            const debug = true

            if (config.cards) {
                let promises = []
                config.cards.forEach(card => {
                    let promise = createScatterCard(card)
                    promise.then(el => {
                        if (debug)
                            enableDebug(el)
                    })
                });

                await Promise.all(promises)
            } else {
                element = await createScatterCard(config.card)
                if (debug) enableDebug(element)
            }



            console.log("Card loaded!")
        }


    </script>
</body>

</html>