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

    export let topic: string;
    export let location: string;
    export let selectedWeek: number;
    export let duration: number;
    export let description: string;
    export let dueDate: string;
    export let weeks: WeekSelection[];

    export let changeWeek = function a(){};

    // TODO auto gen weeks
</script>

<div class="field border">
    <input bind:value={topic} id="topic" placeholder="Thema">
    <label for="topic">Thema</label>
</div>

<div class="field textarea border">
    <textarea id="description" bind:value={description} placeholder="Beschreibung"></textarea>
    <label for="description">Beschreibung</label>
  </div>  

<div class="field border">
    <input bind:value={dueDate} type="date" id="due-date" placeholder="">
    <label for="topic">Frist</label>
</div>

<div class="field border">
    <input bind:value={location} id="location" placeholder="Ort">
    <label for="location">Ort</label>
</div>

<div class="field label border">
    <select bind:value={selectedWeek} on:change={changeWeek} id="week">
        {#each weeks as currentWeek}
            <option value={currentWeek.yearWeek}>{currentWeek.week} KW ({currentWeek.start.toLocaleDateString()} - {currentWeek.end.toLocaleDateString()})</option>
        {/each}
    </select>
    <label for="week">Woche</label>
</div>

<div class="field border label">
    <select bind:value={duration} id="duration">
        <option value={15}>15 Minuten</option>
        <option value={20}>20 Minuten</option>
        <option value={30}>30 Minuten</option>
        <option value={45}>45 Minuten</option>
        <option value={60}>1 Stunde</option>
    </select>
    <label for="duration">Dauer</label>
</div>