<script>
    import { invoke } from '@tauri-apps/api/core';
    import { appState } from '../../lib/state.js';

    import ErrorAlert from '../../ui/ErrorAlert.svelte';


    let modal;
    let alert;

    async function reset() {
        await invoke('reset_session');
        $appState.sessionStatus = 'empty';
    }


</script>


<button type="button" class="self-end text-sm text-secondary/75 hover:underline focus:ring-accent" on:click={modal.showModal()}>
    Reset passphrase
</button>

<dialog class="modal" bind:this={modal}>
    <div class="modal-box space-y-6">
        <ErrorAlert bind:this={alert} />
        <h3 class="text-lg font-bold">Delete all credentials?</h3>
        <div class="space-y-2">
            <p>Credentials are encrypted with your current passphrase and will be lost if the passphrase is reset.</p>
            <p>Are you sure you want to reset your passphrase and delete all saved credentials?</p>
        </div>
        <div class="modal-action">
            <form method="dialog" class="flex gap-x-4">
                <button autofocus class="btn btn-outline">Cancel</button>
                <button class="btn btn-error" on:click|preventDefault={() => alert.run(reset)}>
                    Reset
                </button>
            </form>
        </div>
    </div>
</dialog>
