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

    export let topic: string;
    export let location: string;
    export let participants: number;
    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={$t("common.topic")}>
    <label for="topic">{$t("common.topic")}</label>
</div>

<div class="field textarea border">
    <textarea id="description" bind:value={description} placeholder={$t("common.description")}></textarea>
    <label for="description">{$t("common.description")}</label>
</div>  

<div class="field border">
    <input type="number" id="participants" bind:value={participants} placeholder={$t("common.participant-count")}>
    <label for="participants">{$t("common.participant-count")}</label>
</div>  

<div class="field border">
    <input bind:value={dueDate} type="date" id="due-date" placeholder="">
    <label for="topic">{$t("common.due-date")}</label>
</div>

<div class="field border">
    <input bind:value={location} id="location" placeholder={$t("common.location")}>
    <label for="location">{$t("common.location")}</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} {$t("common.week-short")} ({currentWeek.start.toLocaleDateString()} - {currentWeek.end.toLocaleDateString()})</option>
        {/each}
    </select>
    <label for="week">{$t("common.week")}</label>
</div>

<div class="field border label">
    <select bind:value={duration} id="duration">
        <option value={15}>15 {$t("common.minutes")}</option>
        <option value={20}>20 {$t("common.minutes")}</option>
        <option value={30}>30 {$t("common.minutes")}</option>
        <option value={45}>45 {$t("common.minutes")}</option>
        <option value={60}>1 {$t("common.hour")}</option>
    </select>
    <label for="duration">{$t("common.duration")}</label>
</div>