Alert Dialog

from starhtml import *

deletion_items = [
    "All source code and version history",
    "Issues, pull requests, and comments",
    "Wiki pages and project settings",
    "All collaborator associations"
]

danger_info = Div(
    P("Delete Repository", cls="font-medium"),
    P("Once deleted, it will be gone forever",
      cls="mt-1 text-sm text-muted-foreground"),
    cls="flex-1"
)

dialog_content = AlertDialogContent(
    AlertDialogHeader(
        AlertDialogTitle(
            Icon("lucide:alert-triangle", cls="mr-2 h-6 w-6 text-destructive"),
            "Delete Repository"
        ),
        AlertDialogDescription(
            "This action cannot be undone. This will permanently delete the repository and all of its contents."
        )
    ),
    Div(
        P("The following will be deleted:", cls="mb-2 text-sm font-medium"),
        Ul(
            *[Li(item, cls="text-sm text-muted-foreground") for item in deletion_items],
            cls="list-inside list-disc space-y-1"
        ),
        cls="py-4"
    ),
    AlertDialogFooter(
        AlertDialogCancel("Cancel"),
        AlertDialogAction("Delete Repository", variant="destructive")
    )
)

Card(
    CardHeader(
        CardTitle("Danger Zone"),
        CardDescription("Irreversible actions")
    ),
    CardContent(
        Div(
            danger_info,
            AlertDialog(
                AlertDialogTrigger(
                    Icon("lucide:trash-2", cls="mr-2 h-4 w-4"),
                    "Delete",
                    variant="destructive",
                    size="sm"
                ),
                dialog_content
            ),
            cls="flex items-end justify-between gap-6 rounded-lg border p-6"
        )
    ),
    cls="max-w-lg"
)

from starhtml import *

Card(
    (doc_title := Signal("doc_title", "My Document")),
    (doc_author := Signal("doc_author", "John Doe")),

    CardHeader(
        CardTitle("Document Editor"),
        CardDescription("Edit your document details")
    ),
    CardContent(
        Div(
            InputWithLabel(
                label="Document Title",
                value="My Document",
                signal=doc_title
            ),
            InputWithLabel(
                label="Author",
                value="John Doe",
                signal=doc_author,
                cls="mt-4"
            ),
            P("Make changes to the document fields above and try to save.",
              cls="mt-4 text-sm text-muted-foreground italic")
        ),
        Div(
            AlertDialog(
                AlertDialogTrigger("Save & Exit"),
                AlertDialogContent(
                    AlertDialogHeader(
                        AlertDialogTitle("Save changes?"),
                        AlertDialogDescription("You have unsaved changes. What would you like to do?")
                    ),
                    Div(
                        Div(
                            Icon("lucide:save", cls="mr-2 h-4 w-4 text-blue-500"),
                            P("Your changes:", cls="text-sm font-medium"),
                            cls="mb-2 flex items-center"
                        ),
                        Div(
                            P("Title: ", Span(data_text=doc_title, cls="font-mono"), cls="text-sm"),
                            P("Author: ", Span(data_text=doc_author, cls="font-mono"), cls="text-sm"),
                            cls="space-y-1 rounded-md bg-muted p-3"
                        ),
                        cls="py-6"
                    ),
                    AlertDialogFooter(
                        AlertDialogAction(
                            "Discard Changes",
                            variant="destructive",
                            action=[
                                doc_title.set("My Document"),
                                doc_author.set("John Doe")
                            ]
                        ),
                        AlertDialogCancel("Keep Editing"),
                        AlertDialogAction("Save & Exit")
                    )
                )
            ),
            cls="mt-4"
        )
    ),
    cls="max-w-md"
)

from starhtml import *

countdown = Signal("countdown", 10)
active = Signal("active", False)

timeout_dialog = AlertDialog(
    AlertDialogContent(
        AlertDialogHeader(
            AlertDialogTitle("Session Expiring"),
            AlertDialogDescription(
                "Your session expires in ",
                Span(data_text=countdown, cls="font-bold text-orange-500"),
                " seconds."
            )
        ),
        AlertDialogFooter(
            AlertDialogAction("Logout", variant="destructive", action=active.set(False)),
            AlertDialogAction("Stay Logged In", action=countdown.set(10))
        )
    ),
    signal="timeout_dialog"
)

timer = Div(data_effect=js("""
    if ($active) {
        const id = setInterval(() => {
            if (!$active) { clearInterval(id); return }
            $countdown--
            if ($countdown === 5) $timeout_dialog?.showModal()
            if ($countdown <= 0) { clearInterval(id); $active = false; $countdown = 10 }
        }, 1000)
        return () => clearInterval(id)
    }
"""))

Card(
    countdown, active,
    CardHeader(
        CardTitle("Session Demo"),
        CardDescription("Programmatic dialog open via signal prop")
    ),
    CardContent(
        Div(
            Button("Start Session", data_on_click=[active.set(True), countdown.set(10)]),
            data_show=~active
        ),
        Div(
            P("Session expires in: ",
              Span(data_text=countdown, cls="font-mono text-lg font-bold"), " seconds",
              cls="text-sm"),
            Button("Logout", data_on_click=active.set(False), variant="outline", size="sm", cls="mt-3"),
            data_show=active, cls="space-y-2"
        ),
        timer, timeout_dialog
    ),
    cls="max-w-md"
)

from starhtml import *

files = [
    {"name": "file1.txt", "checked": True},
    {"name": "file2.pdf", "checked": True},
    {"name": "file3.jpg", "checked": False},
    {"name": "file4.doc", "checked": True},
]

selected = Signal("batch_selected", [i for i, f in enumerate(files) if f["checked"]])
visible = Signal("batch_visible", list(range(len(files))))

file_checkboxes = [
    Div(
        CheckboxWithLabel(
            label=f["name"],
            checked=f["checked"],
            data_on_change=selected.toggle_in(i)
        ),
        data_show=visible.contains(i)
    )
    for i, f in enumerate(files)
]

dialog_items = [
    Li(f["name"], data_show=selected.contains(i), cls="text-sm text-muted-foreground")
    for i, f in enumerate(files)
]

delete_action = js("$batch_visible = $batch_visible.filter(v => !$batch_selected.includes(v)); $batch_selected = []")

selection_count = P(
    Span(data_text=selected.length, cls="font-bold"),
    " items selected",
    cls="text-sm text-muted-foreground"
)

delete_dialog = AlertDialog(
    AlertDialogTrigger(
        Icon("lucide:trash-2", cls="mr-2 h-4 w-4"),
        "Delete Selected",
        variant="destructive",
        data_attr_disabled=selected.length.eq(0)
    ),
    AlertDialogContent(
        AlertDialogHeader(
            AlertDialogTitle("Delete Multiple Items"),
            AlertDialogDescription(
                "You are about to delete ",
                Span(data_text=selected.length, cls="font-bold text-destructive"),
                " items. This action cannot be undone."
            )
        ),
        Div(
            P("The following items will be deleted:", cls="mb-2 text-sm font-medium"),
            Ul(*dialog_items, cls="list-inside list-disc space-y-1"),
            cls="py-4"
        ),
        AlertDialogFooter(
            AlertDialogCancel("Cancel"),
            AlertDialogAction(
                data_text="Delete " + selected.length + " Items",
                variant="destructive",
                action=delete_action
            )
        )
    )
)

Card(
    selected,
    visible,
    CardHeader(
        CardTitle("Batch Operations"),
        CardDescription("Confirm actions on multiple items")
    ),
    CardContent(
        Div(*file_checkboxes, cls="space-y-2"),
        Div(selection_count, delete_dialog, cls="mt-4 flex items-center gap-4")
    ),
    cls="max-w-md"
)