<script lang="ts">
	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";

    let fensterArten = {
		Einfachverglasung: 5,
		"Holzfenster Doppelverglasung": 2.7,
		"Kunststofffenster Doppelverglasung": 3,
		"Alu- oder Stahlfenster Doppelverglasung": 4.3,
		"Fenster Doppelverglasung (ab 1995)": 1.8,
		"Fenster Doppelverglasung (U-Wert 1,1)": 1.1,
		"Dreifach-Wärmeschutzverglasung(U-Wert 0,9)": 0.9,
		"Dreifach-Wärmeschutzverglasung(U-Wert 0,85)": 0.85,
		"Passivhausfenster(U-Wert 0,7)": 0.7,
		"Passivhausfenster(U-Wert 0,6)": 0.6,
		"Fenster mit U-Wert 2,3": 2.3,
		"Fenster mit U-Wert 1,6": 1.6,
		"Fenster mit U-Wert 1,7": 1.7,
		"Fenster mit U-Wert 1,3": 1.3,
		"Fenster mit U-Wert 1": 1,
	};

    let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];

    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="Fensterfläche 1 in m² *"></Inputlabel>

    <input
    name="fenster_flaeche_1"
    bind:value={ausweis.fenster_flaeche_1}
    type="number"
    required
    placeholder="0"
/>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Fläche der Fenster ein.</HelpLabel>
    </div>
</div>

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

    <select name="fenster_art_1" bind:value={ausweis.fenster_art_1}>
        <option>bitte auswählen</option>
        {#each Object.entries(fensterArten) as [name, value]}
            <option {value}>{name}</option>
        {/each}
    </select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel>
    </div>
</div>

<div class="input-standard order-3 md:order-3 xl:order-3">
    <Inputlabel title="Fensterfläche 2 in m² *"></Inputlabel>

    <input
		name="fenster_flaeche_2"
	    type="number"
		bind:value={ausweis.fenster_flaeche_2}
				/>

    <div class="help-label">
        <HelpLabel>Wenn vorhanden geben Sie hier die Fläche der Fenster ein
            die älter sind oder einen anderen U-Wert besitzen.</HelpLabel>
    </div>
</div>

<div class="input-standard order-4 md:order-4 xl:order-4">
    <Inputlabel title="Art der Fenster *"></Inputlabel>

    <select
    name="fenster_art_2"
    bind:value={ausweis.fenster_art_2}
    required
>
    <option>bitte auswählen</option>
    {#each Object.entries(fensterArten) as [name, value]}
        <option {value}>{name}</option>
    {/each}
</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel>
    </div>
</div>

<div class="input-standard order-5 md:order-5 xl:order-5">
    <Inputlabel title="Dachfenster in m² *"></Inputlabel>

    <input
					name="dachfenster_flaeche"
					type="number"
					bind:value={ausweis.dachfenster_flaeche}
				/>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Fläche der Dachfenster ein.</HelpLabel>
    </div>
</div>

<div class="input-standard order-6 md:order-6 xl:order-6">
    <Inputlabel title="Art der Dachfenster *"></Inputlabel>

    <select
					name="dachfenster_art"
					bind:value={ausweis.dachfenster_art}
				>
					<option>bitte auswählen</option>
					{#each Object.entries(fensterArten) as [name, value]}
						<option {value}>{name}</option>
					{/each}
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel>
    </div>
</div>

<div class="input-standard order-7 md:order-7 xl:order-7">
    <Inputlabel title="Haustür in m² *"></Inputlabel>

    <input
					name="haustuer_flaeche"
					type="number"
					bind:value={ausweis.haustuer_flaeche}
				/>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Fläche der Haustür ein.</HelpLabel>
    </div>
</div>

<div class="input-standard order-8 md:order-8 xl:order-8">
    <Inputlabel title="Art der Tür *"></Inputlabel>

    <select
    name="haustuer_art"
    bind:value={ausweis.haustuer_art}
    required
>
    <option>bitte auswählen</option>
    <option value="1.8">Standard (U-Wert 1,8)</option>
    <option value="5">Ganz alte Tür (U-Wert 5,0)</option>
    <option value="2.7">U-Wert 2,7</option>
    <option value="3">U-Wert 3,0</option>
    <option value="4.3">U-Wert 4,3</option>
    <option value="1.1">U-Wert 1,1</option>
    <option value="0.9">U-Wert 0,9</option>
    <option value="0.85">U-Wert 0,85</option>
    <option value="0.7">Passivhaustür (U-Wert 0,7)</option>
    <option value="0.6">Passivhaustür (U-Wert 0,6)</option>
    <option value="2.3">U-Wert 2,3</option>
    <option value="1.6">U-Wert 1,6</option>
    <option value="1.7">U-Wert 1,7</option>
    <option value="1.3">U-Wert 1,3</option>
    <option value="1">U-Wert 1,0</option>
</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Art der Haustür ein.</HelpLabel>
    </div>
</div>


</div>





<div id="dachflaechen" class="mt-6 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="Bauart Dachfläche *"></Inputlabel>

    <select
					name="dach_bauart"
					bind:value={ausweis.dach_bauart}
					required
				>
					<option>bitte auswählen</option>
					<option value="Massive Konstruktion"
						>Massive Konstruktion (insbesondere Flachdächer)</option
					>
					<option value="Holzkonstruktion"
						>Holzkonstruktion (insbesondere Steildächer)</option
					>
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Bauart der Dachfläche ein.</HelpLabel>
    </div>
</div>

<div class="input-standard order-2 md:order-2 xl:order-2">
    <Inputlabel title="nachträgliche Dämmung"></Inputlabel>

    <select
					name="dach_daemmung"
					bind:value={ausweis.dach_daemmung}
					required
				>
					<option>bitte auswählen</option>
					{#each daemmungsBreiten as breite}
						<option value={breite}>{breite * 100} cm</option>
					{/each}
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
    </div>
</div>


<div class="input-standard order-3 md:order-3 xl:order-3">
    <Inputlabel title="Bauart Geschossdecke *"></Inputlabel>

    <select
					name="decke_bauart"
					bind:value={ausweis.decke_bauart}
					required
				>
					<option>bitte auswählen</option>
					<option value="Massive Konstruktion"
						>Massive Konstruktion (insbesondere Flachdächer)</option
					>
					<option value="Holzkonstruktion"
						>Holzkonstruktion (insbesondere Steildächer)</option
					>
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Bauart der Geschossdecke ein.</HelpLabel>
    </div>
</div>

<div class="input-standard order-4 md:order-4 xl:order-4">
    <Inputlabel title="nachträgliche Dämmung"></Inputlabel>

    <select
					name="decke_daemmung"
					bind:value={ausweis.decke_daemmung}
					required
				>
					<option>bitte auswählen</option>
					{#each daemmungsBreiten as breite}
						<option value={breite}>{breite * 100} cm</option>
					{/each}
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
    </div>
</div>


<div class="input-standard order-5 md:order-5 xl:order-5">
    <Inputlabel title="Bauart Außenwand *"></Inputlabel>

    <select
					name="aussenwand_bauart"
					bind:value={ausweis.aussenwand_bauart}
					required
				>
					<option>bitte auswählen</option>
					<option value="Massive Konstruktion"
						>Massive Konstruktion (insbesondere Flachdächer)</option
					>
					<option value="Holzkonstruktion"
						>Holzkonstruktion (insbesondere Steildächer)</option
					>
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Bauart der Außenwand ein.</HelpLabel>
    </div>
</div>

<div class="input-standard order-6 md:order-6 xl:order-6">
    <Inputlabel title="nachträgliche Dämmung"></Inputlabel>

    <select
					name="aussenwand_daemmung"
					bind:value={ausweis.aussenwand_daemmung}
					required
				>
					<option>bitte auswählen</option>
					{#each daemmungsBreiten as breite}
						<option value={breite}>{breite * 100} cm</option>
					{/each}
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
    </div>
</div>


<div class="input-standard order-7 md:order-7 xl:order-7">
    <Inputlabel title="Bauart Fußboden *"></Inputlabel>

    <select
					name="boden_bauart"
					bind:value={ausweis.boden_bauart}
					required
				>
					<option>bitte auswählen</option>
					<option value="Massive Konstruktion"
						>Massive Konstruktion (insbesondere Flachdächer)</option
					>
					<option value="Holzkonstruktion"
						>Holzkonstruktion (insbesondere Steildächer)</option
					>
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Bauart des Fußbodens ein.</HelpLabel>
    </div>
</div>

<div class="input-standard order-8 md:order-8 xl:order-8">
    <Inputlabel title="nachträgliche Dämmung"></Inputlabel>

    <select
					name="boden_daemmung"
					bind:value={ausweis.boden_daemmung}
					required
				>
					<option>bitte auswählen</option>
					{#each daemmungsBreiten as breite}
						<option value={breite}>{breite * 100} cm</option>
					{/each}
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel>
    </div>
</div>










</div>