<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,
            VerbrauchsausweisWohnenClient,
        } from "./types.js";
        import { boolean } from "astro:schema";
            import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
    
        export let gebaeude: ObjektClient;
        export let aufnahme: AufnahmeClient;
        export let ausweis: VerbrauchsausweisWohnenClient
        export let images: UploadedGebaeudeBild[];
    
    </script>
    
    <div id="sanierungszustand" class="bereich-box grid 
    grid-cols-1 gap-x-4 gap-y-2
    
    sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
    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:gebaeude />
    
    <style lang="postcss">
    
    </style>
    
<!--
            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 />
    
    -->
    
    