<!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>Card Debugging</title>

        <style>
            html,
            body {
                margin: 0;
                padding: 0;

                width: 100%;
                height: 100%;

                overflow: hidden;
            }

            body {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            #scatter-container-dom {
                background-color: red;
                width: 800px;
                height: 600px;
            }
        </style>
        <link rel="stylesheet" href="../../../css/bulma.css" />
        <link rel="stylesheet" href="./example/_theme/css/bundle.css" />
    </head>
    <body>
        <div class="rows">
            <div id="scatter-container-dom" class="row"></div>
            <div class="columns row">
                <div class="column">
                    <div id="add-button" class="button is-success">Add</div>
                </div>
                <div class="column">
                    <div id="delete-button" class="button is-danger">Delete</div>
                </div>
            </div>
        </div>

        <script src="../../../dist/iwmlib.3rdparty.js"></script>
        <script src="../../../dist/iwmlib.js"></script>

        <script>
            const domContainer = document.getElementById("scatter-container-dom")
            const scatterContainer = new DOMScatterContainer(domContainer)

            let addBtn = document.getElementById('add-button')
            let deleteBtn = document.getElementById('delete-button')

            addBtn.addEventListener('click', createCard)

            deleteBtn.addEventListener('click', () => {
                Array.from(domContainer.childNodes).forEach(child =>{
                    ScatterCard.close(child)
                })
            })

            createCard()

            function createCard() {
                const path = './example/01/index.html'

                let card = null
                ScatterCard.loadHTML(path).then(response => {
                    console.log("Nothing happening here")
                    card = document.createElement('div')

                    // // For debugging purpose to find the card fast with the debugging tools.
                    card.setAttribute('data-source', path)

                    scatterContainer.element.appendChild(card)
                    new DOMScatter(card, scatterContainer, {
                        width: 1400,
                        height: 1200,
                        scale: 0.5,
                        minScale: 0.2,
                        maxScale: 1
                    })

                    ScatterCard.setup(card, response, {
                        basePath: './example/THE_USELESS_PART'
                    })
                })
            }
        </script>
    </body>
</html>