<script lang="ts">
    import Modal from '$lib/components/Modal.svelte';

    let {
        open,
        busy,
        onCancel,
        onConfirm
    }: {
        open: boolean;
        busy: boolean;
        onCancel: () => void;
        onConfirm: () => void;
    } = $props();
</script>

<Modal {open} title="Restart browser" onClose={onCancel} size="sm">
    {#snippet children()}
        <p>This relaunches Chromium and re-injects the session cookie.</p>
        <ul class="coord">
            <li>In-flight jobs are allowed to finish (bounded), then forced.</li>
            <li>New jobs pause until the relaunch completes.</li>
            <li>The metadata pass yields at its next checkpoint.</li>
        </ul>
    {/snippet}
    {#snippet footer()}
        <!-- Cancel autofocused so an accidental Enter on the modal
             dismisses rather than triggering the destructive action. -->
        <!-- svelte-ignore a11y_autofocus -->
        <button autofocus onclick={onCancel}>Cancel</button>
        <button class="primary" onclick={onConfirm} disabled={busy}>Restart</button>
    {/snippet}
</Modal>

<style>
    .coord {
        margin: var(--space-2) 0;
        padding-left: var(--space-4);
        font-size: var(--font-sm);
        color: var(--text-muted);
    }
</style>
