Dialogs Uikit

from fasthtml.common import H2, Button, Div, Form, Input, Link, Script, fast_app

app, rt = fast_app(
    hdrs=[
        Script(src="https://unpkg.com/hyperscript.org"),
        Link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.5.9/css/uikit-core.min.css"),
    ],
    pico=False,
)


@app.get
def page():
    return Div()(
        Button(
            "Open Modal",
            hx_get=modal,
            hx_target="#modals-here",
            _="on htmx:afterOnLoad wait 10ms then add .uk-open to #modal",
        ),
        Div(id="modals-here"),
    )


@app.get
def modal():
    return Div(id="modal", cls="uk-modal", style="display:block;")(
        Div(cls="uk-modal-dialog uk-modal-body")(
            H2("Modal Dialog", cls="uk-modal-title"),
            Form(
                Div(cls="uk-margin")(Input(cls="uk-input", placeholder="What is Your Name?")),
                Button(
                    "Save Changes",
                    cls="uk-button uk-button-primary",
                    type="button",
                ),
                Button(
                    "Close",
                    id="cancelButton",
                    cls="uk-button uk-button-default",
                    type="button",
                    _="on click take .uk-open from #modal wait 200ms then remove #modal",
                ),
            ),
        )
    )

Server Calls