---

import Layout from "#layouts/Layout.astro";

---

<Layout title="Welcher Energieausweis">

<h1 class="text-3xl">Welcher Energieausweis?</h1>

<div class="mt-12 m-auto w-[90%] relative">
<div id="OEA_widget">
  <input id="recode" type="hidden" value="widgetvorlage">

  <div id="OEA_input">

 <div class="OEA_zeile1">
    <div class="OEA_item1">
    <div class="OEA_title1">Gebäudetyp</div>
      <select class="OEA_auswahl1" id="OEA_changeTyp">
        <option value="" selected disabled>bitte auswählen</option>
        <option value="Einfamilienhaus">Einfamilienhaus</option>
        <option value="Zweifamilienhaus">Zweifamilienhaus</option>
        <option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
        <option value="Gewerbegebäude">Gewerbegebäude</option>
        <option value="Mischgebäude">Mischgebäude</option>
      </select>
    </div>

    <div class="OEA_item2">
      <div class="OEA_title1">Anlass</div>
      <select class="OEA_auswahl1" id="OEA_changeAnlass">
        <option value="" selected disabled>bitte auswählen</option>
        <option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
        <option value="Modernisierung">Modernisierung</option>
        <option value="Neubau">Neubau</option>
        <option value="Erweiterung">Erweiterung</option>
        <option value="Aushangpflicht">Aushangpflicht</option>
      </select>
    </div>
   </div>


  <div class="OEA_zeile2">
    <div class="OEA_item3">
      <div class="OEA_title2">Baujahr</div>
      <select class="OEA_auswahl2" id="changeBaujahr">
        <option value="" selected disabled>bitte auswählen</option>
        <option value="1">vor 1978</option>
        <option value="0">nach 1977</option>
      </select>
    </div>

    <div class="OEA_item4">
      <div class="OEA_title2">Wohneinheiten</div>
      <select class="OEA_auswahl2" id="changeEinheiten">
        <option value="" selected disabled>bitte auswählen</option>
        <option value="1">bis 4 Wohneinheiten</option>
        <option value="0">mehr als 4 Wohneinheiten</option>
      </select>
    </div>

    <div class="OEA_item5">
      <div class="OEA_title2">Sanierungsstatus</div>
      <select class="OEA_auswahl2" id="changeStatus">
        <option value="" selected disabled>bitte auswählen</option>
        <option value="0">saniert</option>
        <option value="1">unsaniert</option>
      </select>
    </div>
   </div> 

    <div class="OEA_item6 result">
      <div id="OEA_result">
        <div class="OEA_title3">Das Ergebnis Ihrer Anfrage:</div>
        <p id="OEA_result_text"></p>
      </div>
    </div>

    <div class="OEA_item7 referrer">
      <div id="OEA_logo_referrer">
        <img src="https://widgetvorlage-widget.online-energieausweis.org/img/logo.png" alt="Logo">
      </div>
    </div>

    <div class="OEA_item8 ibcornelsen">
      <div id="OEA_logo_IBC">
        <a class="IBC_link" href="https://online-energieausweis.org?recode=widgetvorlage" title="IB Cornelsen">
          <div id="IBC_LOGO">powered by</div>
        </a>
      </div>
    </div>
  </div>
</div>
</div>

<style lang="scss">
@tailwind base;
@tailwind components;
@tailwind utilities;

#OEA_widget {
  @apply bg-white p-6 rounded-lg shadow-lg space-y-6;

  #OEA_input {
    @apply space-y-4 space-x-4;

    .OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
      @apply space-y-2 w-full;

      .OEA_title1, .OEA_title2 {
        @apply font-bold text-lg text-white p-2 rounded;
      }
    }

    .OEA_zeile1, .OEA_zeile2  {
      @apply flex flex-row;
    }

    .OEA_title1 {
      @apply bg-blue-900;
    }

    .OEA_title2 {
      @apply bg-primary;
    }

    .OEA_auswahl1, .OEA_auswahl2 {
      @apply w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
    }

    #OEA_result {
      @apply p-4 border-2 border-blue-300 rounded-lg text-gray-700;
    }

    .OEA_title3 {
      @apply text-xl font-semibold text-blue-900;
    }

    #OEA_logo_referrer img {
      @apply w-full max-w-xs mx-auto;
    }

    #IBC_LOGO {
      @apply text-center text-gray-500 font-semibold text-sm mt-2;
    }
  }
}

select {
    @apply w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-500;
  }


.empfehlungen a {
    @apply text-blue-600 underline hover:text-blue-800 font-semibold;
  }
</style>