<script lang="ts">

	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";
    import { hotWaterProductionTypes } from "#modules/BedarfsausweisWohnen/HotWaterProductionTypes.js";
    
    export let ausweis;

    const arrayRange = (start: number, stop: number, step: number) =>
		Array.from(
			{ length: (stop - start) / step + 1 },
			(value, index) => start + index * step
		);

</script>

<div id="fensterflaechen" class="mb-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="Energieträger *"></Inputlabel>

    <select
					name="energietraeger_1"
					bind:value={ausweis.energietraeger_1}
					required
				>
					<option>Bitte auswählen</option>
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier den Energieträger der Heizung ein.</HelpLabel>
    </div>
</div>

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

    <select
					name="warmwasser_verteilung"
					bind:value={ausweis.warmwasser_verteilung}
				>
					<option>Bitte auswählen</option>
					<option value="zvmzbis1978"
						>zentrale Verteilung mit Zirkulation (bis 1978)</option
					>
					<option value="zvmzngbis1978"
						>zentrale Verteilung mit Zirkulation nachträglich
						gedämmt (bis 1978)</option
					>
					<option value="zvmzvon1979bis1994"
						>zentrale Verteilung mit Zirkulation (von 1979 - 1994)</option
					>
					<option value="zvmzab1995"
						>zentrale Verteilung mit Zirkulation (ab 1994)</option
					>
					<option value="zvozbis1978"
						>zentrale Verteilung ohne Zirkulation (bis 1978)</option
					>
					<option value="zvozngbis1978"
						>zentrale Verteilung ohne Zirkulation nachträglich
						gedämmt (bis 1978)</option
					>
					<option value="zvozvon1979bis1994"
						>zentrale Verteilung ohne Zirkulation (von 1979 - 1994)</option
					>
					<option value="zvozab1995"
						>zentrale Verteilung ohne Zirkulation (ab 1994)</option
					>
					<option value="dzsbis1994"
						>dezentrales System (bis 1994)</option
					>
					<option value="dzsab1995"
						>dezentrales System (ab 1995)</option
					>
				</select>

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

<div class="input-standard order-3 md:order-3 xl:order-3">
    <Inputlabel title="Speicherung Warmwasser"></Inputlabel>

    <select
    name="warmwasser_speicherung"
    bind:value={ausweis.warmwasser_speicherung}
>
    <option>Bitte auswählen</option>
    <option value="zwwsath"
        >zentrale Warmwasserspeicher außerhalb thermischer Hülle</option
    >
    <option value="zwwsith"
        >zentrale Warmwasserspeicher innerhalb thermischer Hülle</option
    >
    <option value="gasbs">gasbefeuerter Speicher</option>
    <option value="elks">Elektro-Kleinspeicher</option>
</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier wenn vorhanden die Art des
            Warmwasserspeichers ein.</HelpLabel>
    </div>
</div>

<div class="input-standard order-4 md:order-4 xl:order-4">
    <Inputlabel title="Erzeugung Warmwasser *"></Inputlabel>

    <select
					name="warmwasser_erzeugung"
					bind:value={ausweis.warmwasser_erzeugung}
					required
				>
					<option>Bitte auswählen</option>
					{#each hotWaterProductionTypes as type, i}
						<option value={i}>{type}</option>
					{/each}
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier die Wärmeerzeugung für Warmwasser ein.</HelpLabel>
    </div>
</div>


<div class="input-standard order-5 md:order-5 xl:order-5">
    <Inputlabel title="Übergabe Heizung *"></Inputlabel>

    <select
					name="heizung_zentral"
					bind:value={ausweis.heizung_zentral}
				>
					<option>Bitte auswählen</option>
					<option value={true}>Zentralheizung</option>
					<option value={false}>Einzelfeuerstätte</option>
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier ein ob es sich um Zentralheizung
            handelt oder über Beheizung durch dezentrale Einzelöfen.</HelpLabel>
    </div>
</div>


<div class="input-standard order-6 md:order-6 xl:order-6">
    <Inputlabel title="Verteilung Heizung *"></Inputlabel>

    <select
    name="heizung_verteilung"
    bind:value={ausweis.heizung_verteilung}
>
    <option>Bitte auswählen</option>
    <option value="zv7055bis1978"
        >zentrale Verteilung 70/55°C bis 1978</option
    >
    <option value="zv7055ngbis1978"
        >zentrale Verteilung 70/55°C, nachträglich gedämmt bis
        1978</option
    >
    <option value="zv7055von1979bis1994"
        >zentrale Verteilung 70/55°C von 1979 bis 1994</option
    >
    <option value="zv7055ab1995"
        >zentrale Verteilung 70/55°C ab 1995</option
    >
    <option value="zv5545bis1978"
        >zentrale Verteilung 55/45°C bis 1978</option
    >
    <option value="zv5545ngbis1978"
        >zentrale Verteilung 55/45°C, nachträglich gedämmt bis
        1978</option
    >
    <option value="zv5545von1979bis1994"
        >zentrale Verteilung 55/45°C von 1979 bis 1994</option
    >
    <option value="zv5545ab1995"
        >zentrale Verteilung 55/45°C ab 1995</option
    >
    <option value="wwvertbis1978"
        >Wohnungsweise Verteilung bis 1978</option
    >
    <option value="wwvertvon1979bis1994"
        >Wohnungsweise Verteilung von 1979 bis 1994</option
    >
    <option value="wwvertab1995"
        >Wohnungsweise Verteilung ab 1995</option
    >
    <option value="dezensys">dezentrales System</option>
</select>

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


<div class="input-standard order-7 md:order-7 xl:order-7">
    <Inputlabel title="Speicherung Heizung"></Inputlabel>

    <select
					name="heizung_speicherung"
					bind:value={ausweis.heizung_speicherung}
				>
					<option>Bitte auswählen</option>
					<option value="elzs7055bis1994"
						>El.-Zentralspeicher 70/55°C bis 1994</option
					>
					<option value="elzs7055ab1995"
						>El.-Zentralspeicher 70/55°C ab 1995</option
					>
					<option value="puffs5545bis1994"
						>Pufferspeicher El.-Wärmepumpe 55/45°C bis 1994</option
					>
					<option value="puffs5545ab1995"
						>Pufferspeicher El.-Wärmepumpe 55/45°C ab 1995</option
					>
					<option value="puffshk7055bis1994"
						>Pufferspeicher für Holzkessel 70/55°C bis 1994</option
					>
					<option value="puffshk7055ab1995"
						>Pufferspeicher für Holzkessel 70/55°C ab 1995</option
					>
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier - wenn vorhanden - den Speicher der
            Heizung ein.</HelpLabel>
    </div>
</div>


<div class="input-standard order-8 md:order-8 xl:order-8">
    <Inputlabel title="Wärmeerzeugung Heizung *"></Inputlabel>

    <select
					name="waerme_erzeugung_heizung"
					bind:value={ausweis.waerme_erzeugung_heizung}
					required
				>
					<option>Bitte auswählen</option>
					<option value="ktkesselbis1986h"
						>Konstanttemperatur-Kessel bis 1986</option
					>
					<option value="ktkesselvon1987bis1994h"
						>Konstanttemperatur-Kessel von 1987 bis 1994</option
					>
					<option value="ktkesselab1995h"
						>Konstanttemperatur-Kessel ab 1995</option
					>
					<option value="ntkesselbis1986h"
						>Niedertemperatur-Kessel bis 1986</option
					>
					<option value="ntkesselvon1987bis1994h"
						>Niedertemperatur-Kessel von 1987 bis 1994</option
					>
					<option value="ntkesselab1995h"
						>Niedertemperatur-Kessel ab 1995</option
					>
					<option value="bwkesselbis1986h"
						>Brennwert-Kessel bis 1986</option
					>
					<option value="bwkesselvon1987bis1994h"
						>Brennwert-Kessel von 1987 bis 1994</option
					>
					<option value="bwkesselab1995h"
						>Brennwert-Kessel ab 1995</option
					>
					<option value="bwkesselab1999h"
						>Brennwertkessel verbessert ab 1999</option
					>
					<option value="ewplhvon1979bis1994h"
						>Elektro-Wärmepumpe (Außenluft) von 1979 bis 1994</option
					>
					<option value="ewplhab1995h"
						>Elektro-Wärmepumpe (Außenluft) ab 1995</option
					>
					<option value="ewpemvon1979bis1994h"
						>Elektro-Wärmepumpe (Erdreich) von 1979 bis 1994</option
					>
					<option value="ewpemab1995h"
						>Elektro-Wärmepumpe (Erdreich) ab 1995</option
					>
					<option value="ewpgmvon1979bis1994h"
						>Elektro-Wärmepumpe (Grundwasser) von 1979 bis 1994</option
					>
					<option value="ewpgmab1995h"
						>Elektro-Wärmepumpe (Grundwasser) ab 1995</option
					>
					<option value="fwugsh">Fernwärme-Übergabestation</option>
					<option value="zesh">zentraler elektrischer Speicher</option
					>
					<option value="thermebis1994h"
						>Therme (Umlaufwasserheizer) bis 1994</option
					>
					<option value="thermeab1995h"
						>Therme (Umlaufwasserheizer) ab 1995</option
					>
					<option value="bthermeab1995h"
						>Brennwert-Therme ab 1995</option
					>
					<option value="oeleinzel"
						>ölbefeuerte Einzelöfen mit Verdampfungsbrenner</option
					>
					<option value="kheinzel">Kohle- oder Holzofen</option>
					<option value="greinzel">Gasraumheizer</option>
					<option value="elnseinzelbis1994"
						>Elektro-Nachtspeicherheizung bis 1994</option
					>
					<option value="elnseinzelab1995"
						>Elektro-Nachtspeicherheizung ab 1995</option
					>
					<option value="eldirekt">Elektro-Direktheizgerät</option>
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier den Wärmerzeuger der Heizung ein.</HelpLabel>
    </div>
</div>


<div class="input-standard order-9 md:order-9 xl:order-9">
    <Inputlabel title="Energieträger Zusatzheizung"></Inputlabel>

    <select
					name="energietraeger_2"
					bind:value={ausweis.energietraeger_2}
					required
				>
					<option>Bitte auswählen</option>
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier - wenn vorhanden - die Zusatzheizung
            ein (z.B. Kamin, Pelletheizung).</HelpLabel>
    </div>
</div>

<div class="input-standard order-10 md:order-10 xl:order-10">
    <Inputlabel title="Anteil am Gesamtheizbedarf des Hauses"></Inputlabel>

    <select
					name="anteil_zusatzheizung"
					bind:value={ausweis.anteil_zusatzheizung}
				>
					<option value="0" selected
						>Anteil am Gesamtheizbedarf des Hauses</option
					>
					{#each arrayRange(0.01, 0.7, 0.01) as step}
						<option value={step}>{step * 100}%</option>
					{/each}
				</select>

    <div class="help-label">
        <HelpLabel>Bitte geben Sie hier den prozentualen Anteil der
            Zusatzheizung ein.</HelpLabel>
    </div>
</div>



<div class="input-standard order-11 md:order-11 xl:order-11">
    <Inputlabel title="Eingabe Solar Kollektorfläche in m²"></Inputlabel>

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

    <div class="help-label">
        <HelpLabel>Wenn Sie ein Solarsystem für Warmwasser einsetzen geben Sie
            bitte die Kollektorfläche an:</HelpLabel>
    </div>
</div>



</div>