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

    let {
        open,
        busy,
        phpsessid = $bindable(''),
        result,
        onCancel,
        onSave
    }: {
        open: boolean;
        busy: boolean;
        phpsessid?: string;
        result: string | null;
        onCancel: () => void;
        onSave: () => void;
    } = $props();
</script>

<Modal {open} title="Manage crawler session" onClose={onCancel} size="md">
    {#snippet children()}
        <label for="phpsessid">PHPSESSID</label>
        <input id="phpsessid" type="password" bind:value={phpsessid} autocomplete="off" />
        <p class="hint">
            Saving rewrites the cookie everywhere, persists it, restarts the browser, and re-probes.
        </p>
        {#if result}
            <p class="sessionresult">{result}</p>
        {/if}
    {/snippet}
    {#snippet footer()}
        <button onclick={onCancel}>Cancel</button>
        <button class="primary" onclick={onSave} disabled={busy || phpsessid.trim() === ''}
            >Save &amp; validate</button
        >
    {/snippet}
</Modal>

<style>
    .hint {
        color: var(--text-muted);
        font-size: var(--font-sm);
    }
    .sessionresult {
        margin-top: var(--space-2);
        font-size: var(--font-sm);
    }
</style>
