<script lang="ts">

	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";
	import { Enums } from "#lib/client/prisma.js";


    export let ausweis;

</script>

<div id="fensterflaechen" class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-4 xl:gap-x-8 xl:gap-y-8
"
>



<div class="input-standard order-1 md:order-1 xl:order-1">
    <Inputlabel title="Keller *"></Inputlabel>

    <select
							name="keller_beheizt"
							bind:value={ausweis.keller_beheizt}
							required
						>
							<option> Bitte auswählen</option>
							<option value={false}> nicht vorhanden</option>
							<option value={false}> unbeheizt</option>
							<option value={true}> beheizt</option>
						</select>

    <div class="help-label">
        <HelpLabel>Text fehlt.</HelpLabel>
    </div>
</div>

<div class="input-standard order-2 md:order-2 xl:order-2">
    <Inputlabel title="Dachgeschoss *"></Inputlabel>

    <select
    name="dachgeschoss"
    bind:value={ausweis.dachgeschoss}
    required
>
    <option> Bitte auswählen</option>
    <option
        value={Enums.Heizungsstatus.NICHT_VORHANDEN}
    >
        nicht vorhanden</option
    >
    <option value={Enums.Heizungsstatus.UNBEHEIZT}>
        unbeheizt</option
    >
    <option value={Enums.Heizungsstatus.BEHEIZT}>
        beheizt</option
    >
</select>

    <div class="help-label">
        <HelpLabel>Text fehlt.</HelpLabel>
    </div>
</div>

<div class="input-standard order-3 md:order-3 xl:order-3">
    <Inputlabel title="Lüftung erfolgt durch:"></Inputlabel>

    <select
							name="lueftungskonzept"
							bind:value={ausweis.lueftungskonzept}
							required
						>
							<option> Bitte auswählen</option>
							<option value="Fensterlüftung">
								Fensterlüftung</option
							>
							<option value="Schachtlüftung">
								Schachtlüftung</option
							>
							<option
								value="Lüftungsanlage ohne Wärmerückgewinnung"
							>
								Lüftungsanlage ohne Wärmerückgewinnung</option
							>
							<option
								value="Lüftungsanlage mit Wärmerückgewinnung"
							>
								Lüftungsanlage mit Wärmerückgewinnung</option
							>
						</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier ein ob über die Fenster natürlich
            belüftet wird oder über eine Lüftungsanlage.</HelpLabel>
    </div>
</div>

<div class="input-standard order-4 md:order-4 xl:order-4">
    <Inputlabel title="Anlage zur Kühlung"></Inputlabel>

    <select
							name="wird_gekuehlt"
							bind:value={ausweis.wird_gekuehlt}
							required
						>
							<option> Bitte auswählen</option>
							<option value={true}> vorhanden</option>
							<option value={false}> nicht vorhanden</option>
						</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
            gekühlt wird.</HelpLabel>
    </div>
</div>




<!--Alternative Energieversorgungssyteme -->

<div class="input-standard order-4 md:order-4 xl:order-4 sm:col-span-2 items-center">
    <Inputlabel title="Alternative Energieversorgungssyteme"></Inputlabel>

<div class="input-row items-center gap-2 lg:gap-20 xl:gap-24">

<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
    <input
    id="alternative_heizung"
    type="checkbox"
    name="alternative_heizung"
    data-test="alternative_heizung"
    bind:checked={ausweis.alternative_heizung}
    value="Heizung"
    />
    <label for="alternative_heizung" class="checkbox-inline cursor-pointer">Heizung</label>
</div>

<div class="grid grid-cols-[max-content_40px] gap-2 items-center">

    <input
    id="alternative_warmwasser"
    type="checkbox"
    name="alternative_warmwasser"
    data-test="alternative_warmwasser"
    bind:checked={ausweis.alternative_warmwasser}
    value="Warmwasser"
    />
    <label for="alternative_warmwasser" class="checkbox-inline cursor-pointer">Warmwasser</label>
</div>

<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
<input
    id="alternative_lueftung"
    type="checkbox"
    name="alternative_lueftung"
    data-test="alternative_lueftung"
    bind:checked={ausweis.alternative_lueftung}
    value="Lüftung"
/>
<label for="alternative_lueftung" class="checkbox-inline cursor-pointer">Lüftung</label>
</div>

<div class="grid grid-cols-[max-content_40px] gap-2 items-center">

<input
    id="alternative_kuehlung"
    type="checkbox"
    name="alternative_kuehlung"
    data-test="alternative_kuehlung"
    bind:checked={ausweis.alternative_kuehlung}
    value="Kühlung"
/>
<label for="alternative_kuehlung" class="checkbox-inline cursor-pointer">Kühlung</label>
</div>

</div>

<div class="help-label">
    <HelpLabel>
        Bitte setzen Sie den Haken falls nachhaltige CO2-Effiziente Heizungssysteme vorhanden sind. Das wäre beispielsweise bei Pelletofen, Wärmepumpe, BHKW, Solarsystem, etc. der Fall.
    </HelpLabel>

</div>

</div>



</div>










