<script lang="ts">
	import type { AppointmentTimeRange } from "$lib/dbdata";

    export let timeRanges: AppointmentTimeRange[] = [];

    function addEntry() {
        timeRanges = [... timeRanges, {start: "", end: ""}];
    }

    function removeInput(indexToRemove: number) {
        // creatorInputs.splice(index, 1);
        timeRanges = timeRanges.filter((_, index) => index !== indexToRemove);
    }
</script>

<div class="">
    <button class="transparent circle large">
        <i>content_copy</i>
    </button>
    <button on:click={addEntry} class="transparent circle large">
        <i>add</i>
    </button>
</div>

{#each timeRanges as timeEntry, index} 
    <div class="field border row">
        <input bind:value={timeEntry.start} type="time">
        -
        <input bind:value={timeEntry.end} type="time">
        <button on:click={() => removeInput(index)} class="transparent circle large">
            <i>delete</i>
        </button>
    </div>
{/each}