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

	import FensterImage from "./FensterImage.svelte";

	//import Label from "../Label.svelte";

	import {
		AufnahmeClient,
		ObjektClient,
		UploadedGebaeudeBild,
		VerbrauchsausweisGewerbeClient,
		VerbrauchsausweisWohnenClient,
	} from "./types.js";
	import { boolean } from "astro:schema";
	import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte";

	export let objekt: ObjektClient;
	export let aufnahme: AufnahmeClient;
	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient;
	export let images: UploadedGebaeudeBild[];
</script>

<div
	id="sanierungszustand"
	class="bereich-box grid
    grid-cols-1 gap-x-4 gap-y-2
    
    sm:grid-cols-1 sm:gap-x-6 sm:gap-y-1
    md:grid-cols-2 md:gap-x-6 md:gap-y-8
    
    xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
    2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
    "
>
	<SanierungsOption
		label="Einfachglas"
		name="einfach_verglasung"
		help=""
		value="EG"
		bind:checked={aufnahme.einfach_verglasung}
	></SanierungsOption>
	<SanierungsOption
		label="Doppelverglasung"
		name="doppel_verglasung"
		help=""
		value="DF"
		bind:checked={aufnahme.doppel_verglasung}
	></SanierungsOption>
	<SanierungsOption
		label="Dreifachverglasung"
		name="dreifach_verglasung"
		help=""
		value="PHF"
		bind:checked={aufnahme.dreifach_verglasung}
	></SanierungsOption>
	<SanierungsOption
		label="Isolierverglasung"
		name="isolier_verglasung"
		help=""
		value="IVG"
		bind:checked={aufnahme.isolier_verglasung}
	></SanierungsOption>
	<SanierungsOption
		label="Alle Fenster dicht"
		name="fenster_dicht"
		help=""
		value="FD"
		bind:checked={aufnahme.fenster_dicht}
	></SanierungsOption>
	<SanierungsOption
		label="Fenster teilweise undicht"
		name="fenster_teilweise_undicht"
		help=""
		value="FTUD"
		bind:checked={aufnahme.fenster_teilweise_undicht}
	></SanierungsOption>
	<SanierungsOption
		label="Rollladenkästen gedämmt, luftdicht"
		name="rolllaeden_kaesten_gedaemmt"
		help=""
		value="TUD"
		bind:checked={aufnahme.rolllaeden_kaesten_gedaemmt}
	></SanierungsOption>
	<SanierungsOption
		label="Alle Türen dicht"
		name="tueren_dicht"
		help=""
		value="TD"
		bind:checked={aufnahme.tueren_dicht}
	></SanierungsOption>
	<SanierungsOption
		label="Türen teilweise undicht"
		name="tueren_undicht"
		help=""
		value="TUD"
		bind:checked={aufnahme.tueren_undicht}
	></SanierungsOption>
</div>

<FensterImage bind:images bind:ausweis bind:objekt />

<!--
            Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
            einschätzen zu können. Bitte setzen Sie den Haken wenn zutreffend.
        </HelpLabel>
        <hr />

        </div>
    </div>
    
    <hr />
    
    <FensterImage bind:images bind:ausweis bind:gebaeude />
    
    <hr />
    
    <div class="GRB3">
        <div class="form-group col-md-12">
            <HelpLabel title="Wärmedämmung (bitte zutreffendes ankreuzen) *">
                Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
                einschätzen zu können. Bitte setzen Sie den Haken wenn zutreffend.
                Das seit Mai 2021 gültige GEG erfordert eine genauere Prüfung anhand
                von Fotos. Bitte laden Sie ein oder mehrere Fotos der Außenwand und
                des Dachbereiches hoch.
            </HelpLabel>
            <hr />
        </div>
    
        <div class="grid grid-cols-4">
            <div class="form-group col-md-3 mw1">
                <label class="checkbox-inline"
                    ><input
                        type="checkbox"
                        class="checkbox"
                        name="aussenwand_gedaemmt"
                        bind:checked={aufnahme.aussenwand_gedaemmt}
                        value="AWD"
                    />Außenwand gedämmt</label
                >
            </div>
            <div class="form-group col-md-3 mw1">
                <label class="checkbox-inline"
                    ><input
                        type="checkbox"
                        class="checkbox"
                        name="keller_wand_gedaemmt"
                        bind:checked={aufnahme.keller_wand_gedaemmt}
                        value="KWD"
                    />Kelleraußenwand gedämmt</label
                >
            </div>
            <div class="form-group col-md-3 mw1">
                <label class="checkbox-inline"
                    ><input
                        type="checkbox"
                        class="checkbox"
                        name="keller_decke_gedaemmt"
                        bind:checked={aufnahme.keller_decke_gedaemmt}
                        value="KDD"
                    />Kellerdecke gedämmt</label
                >
            </div>
            <div class="form-group col-md-3 mw1">
                <label class="checkbox-inline"
                    ><input
                        type="checkbox"
                        class="checkbox"
                        name="dachgeschoss_gedaemmt"
                        bind:checked={aufnahme.dachgeschoss_gedaemmt}
                        value="DGD"
                    />Dachgeschoss gedämmt</label
                >
            </div>
            <div class="form-group col-md-3 mw1">
                <label class="checkbox-inline"
                    ><input
                        type="checkbox"
                        class="checkbox"
                        name="oberste_geschossdecke_gedaemmt"
                        bind:checked={aufnahme.oberste_geschossdecke_gedaemmt}
                        value="OGDDW"
                    />Oberste Geschossdecke gedämmt</label
                >
            </div>
            <div class="form-group col-md-6 mw1">
                <label class="checkbox-inline"
                    ><input
                        type="checkbox"
                        class="checkbox"
                        name="oberste_geschossdecke_min_12cm_gedaemmt"
                        bind:checked={aufnahme.oberste_geschossdecke_min_12cm_gedaemmt}
                        value="OGDD"
                    />Oberste Geschossdecke min. 12cm gedämmt</label
                >
            </div>
        </div>
    </div>
    
    <hr />
    
    <DaemmungImage bind:images bind:ausweis bind:gebaeude />
    
    <hr />
    
    <Label
        >H - Hier können Sie ein Gebäudebild hochladen und sich Ihren Energieausweis
        als PDF anschauen</Label
    >
    
    <AusweisPreviewContainer bind:images bind:ausweis bind:gebaeude />
    
    -->

<style lang="postcss">
</style>
