<script context="module">
    let nextAvailableFormId = 0;
</script>
<script lang="ts">
    import CsrfTokenField from "./CsrfTokenField.svelte";
    import Icon from "./Icon.svelte";
    import {setContext} from "svelte";

    export let action: string;
    export let button: boolean = false;
    export let submitText: string;
    export let submitIcon: string;
    export let submitClass: string = undefined;
    export let confirm: string = undefined;

    const formId = nextAvailableFormId++;
    setContext('formId', formId);

    function handleSubmit(e) {
        if (confirm && !window.confirm(confirm)) {
            e.preventDefault();
        }
    }
</script>

<form {action} method="POST" id="{formId}-form" on:submit={handleSubmit}>
    <CsrfTokenField/>
    <slot/>
    <button type="submit" class={submitClass}>
        {#if submitIcon}
            <Icon name={submitIcon}/>
        {/if}
        {#if button}
            <span class="tip">{submitText}</span>
        {:else}
            {submitText}
        {/if}
    </button>
</form>
