<script lang="ts">
    export let topic: string;
    export let location: string;
    export let selectedWeek: number;
    export let duration: number;

    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 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:input={changeWeek} id="week">
        <option value={202501}>01 KW (01.01.2024 - 05.01.2024)</option>
        <option value={202502}>02 KW (06.01.2024 - 12.01.2024)</option>
        <option value={202503}>03 KW (13.01.2024 - 19.01.2024)</option>
        <option value={202504}>04 KW (20.01.2024 - 26.01.2024)</option>
    </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>