<script lang="ts">

	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";
	import { AufnahmeClient } from "./types.js";

    export let aufnahme: AufnahmeClient;

</script>

<div id="lueftungundleerstand" 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-3 xl:gap-x-8 xl:gap-y-8
">



<!-- Gebäudeteil -->

<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">

    <div class="input-standard">
        <Inputlabel title="Gebäudeteil *"></Inputlabel>
    
        <select
        name="gebaeudeteil"
        data-test="gebaeudeteil"
        bind:value={aufnahme.gebaeudeteil}
        required
        >
        <option disabled selected value={false}>Bitte auswählen</option>
        <option value="Gesamtgebäude">Gesamtgebäude</option>
        <option value="Wohnen">Wohnen</option>
        </select>
    
            <div class="help-label">
                    <HelpLabel>
                        Bitte geben Sie hier den Gebäudeteil ein. In den meisten
                        Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
                        allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
                        handeln, so sollten 2 Ausweise erstellt werden. In diesem
                        Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
                        'Gewerbe'.
                    </HelpLabel>
                </div>
    </div>

<div class="input-standard">
	<Inputlabel title="Leerstand in %"></Inputlabel>
	
    <input
    name="leerstand"
    data-test="leerstand"
    maxlength="2"
    type="number"
    bind:value={aufnahme.leerstand}
/>

		<div class="help-label">
				<HelpLabel>
					Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
					(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
					wären dann ca. 11%.
				</HelpLabel>
		</div>
</div>

</div>

<!-- Lüftung -->

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

    <select
    name="lueftung"
    data-test="lueftung"
    required
    bind:value={aufnahme.lueftung}
    >
    <option disabled selected value={false}>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 den Gebäudeteil ein. In den meisten
					Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
					allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
					Bitte geben Sie hier ein ob über die Fenster natürlich
					belüftet wird oder über eine Lüftungsanlage.
				</HelpLabel>
			</div>
</div>

<!-- Kühlung -->

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

    <select
    name="kuehlung"
    data-test="kuehlung"
    required
    bind:value={aufnahme.kuehlung}
    >
    <option disabled selected value={false}>Bitte auswählen</option>
    <option value="1">vorhanden</option>
    <option value="0">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>










</div>