---
import Layout from "../layouts/Layout.astro";
---

<Layout>
    <main class="mx-auto flex min-h-screen max-w-6xl flex-col gap-6 px-4 py-8 md:px-6">
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
        <details is-="accordion">
            <summary>Summary title</summary>
            <p>Accordion content</p>
        </details>

        <dialog id="dialog" popover>
            <div box-="round" id="content">
                <p>Are you sure you want to delete this?</p>
                <div id="buttons">
                    <button box-="round">Cancel</button>
                    <button box-="round">Delete</button>
                </div>
            </div>
        </dialog>
        <button popovertarget="dialog">Open Dialog</button>

    </main>
</Layout>

<style>
    dialog::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }
    #content {
        display: flex;
        flex-direction: column;
        gap: 1lh;
        padding: 2lh 2ch 1lh 2ch;
        background-color: var(--background1);
    }
    #buttons {
        display: flex;
        gap: 1ch;
        justify-content: flex-end;
    }
</style>