<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 isBoldSubmit: boolean = true;
    export let resetButton: boolean = false;
    export let confirm: string = undefined;

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

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

<style lang="scss">
    .form-controls {
        display: flex;
        justify-content: space-between;

        > :last-child:not(* + :last-child) {
            margin-left: auto;
            margin-right: auto;
        }
    }
</style>

<form {action} method="POST" id="{formId}-form" on:submit={handleSubmit}>
    <CsrfTokenField/>
    <slot/>
    <div class="form-controls">
        {#if resetButton}
            <button type="reset"><Icon name="trash"/>Reset</button>
        {/if}

        <button type="submit" class={submitClass} class:bold={isBoldSubmit}>
            {#if submitIcon}
                <Icon name={submitIcon}/>
            {/if}
            {#if button}
                <span class="tip">{submitText}</span>
            {:else}
                {submitText}
            {/if}
        </button>
    </div>
</form>
