<script lang="ts">

import HelpLabel from "#components/labels/HelpLabel.svelte";
import Inputlabel from "#components/labels/InputLabel.svelte";

export let ausweis;

$: {
	if (!ausweis.warmwasser_enthalten) {
		ausweis.warmwasser_anteil_bekannt = false;
	}
}


</script>

<div id="thermischekuehlung" class="bereich-box mt-6 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
	">


	<div class="input-standard order-1 md:order-1 xl:order-1">
	<Inputlabel title="Thermische Kühlung im Heizverbrauch enthalten"></Inputlabel>

    <div class="input-row items-center gap-2">

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

</div>

<div class="help-label">
	<HelpLabel>
		TEXT FEHLT
	</HelpLabel>
</div>

</div>


<!-- % Anteil Warmwasser -->

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

    <input
    name="anteil_kuehlung_1"
    data-test="anteil_kuehlung_1"
    maxlength="2"
    type="number"
    bind:value={ausweis.anteil_kuehlung_1}
    disabled={!ausweis.kuehlung_enthalten || 
        !ausweis.kuehlung_enthalten}
    autocomplete="off"
    />

		<div class="help-label">
				<HelpLabel>
					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
					hier ein. Standardmäßig wird ein Anteil von 18% angenommen.
				</HelpLabel>
			</div>
</div>


<!--zusätzliche Heizquelle -->

<div class="input-standard order-3 md:order-3 xl:order-3">
	<Inputlabel title="zusätzliche Heizquelle"></Inputlabel>

    <input
    name="anteil_kuehlung_2"
    data-test="anteil_kuehlung_2"
    maxlength="3"
    type="number"
    autocomplete="off"
    bind:value={ausweis.anteil_kuehlung_2}
    disabled={!ausweis.zusaetzliche_heizquelle ||
        !ausweis.kuehlung_enthalten}
    />

		<div class="help-label">
				<HelpLabel>
					Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
					von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
					ein Anteil von 18% angenommen.
				</HelpLabel>
		</div>
</div>


</div>




















