<script lang="ts" setup>
import Navbar from "../components/Navbar.vue";
import Modal from "../components/Modal.vue";
import Embla from "../components/Embla.vue";
import Umgebung from "../components/startseite/Umgebung.vue";
import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter
import RitzenbergenLib from "../ritzenbergenlib";
import WillkommenText from "../components/startseite/WillkommenText.vue";
import Bilderbuch from "../components/startseite/Bilderbuch.vue";
import Forms from "../components/startseite/Forms.vue";
import Events from "../components/startseite/Events.vue";
import Willkommen from "../components/startseite/Willkommen.vue";
import { ref } from "vue";


const images=ref([]);
async function loadImage(path: string) {
	try{
	const response = await fetch(RitzenbergenLib.RitzenbergenLib.api(path), {
		headers: {
				"Accept":"image/png"
		}
	});
	if(!response.ok) return false;
	const blob = await response.blob();
	return URL.createObjectURL(blob);
}catch(e){
		console.warn(e);
}
}

// loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
// 		images.value[0]=url;
// });
// loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
// 		images.value[1]=url;
// });
// loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
// 		images.value[2]=url;
// });
// loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
// 		images.value[3]=url;
// });

</script>

<template>
  <!-- Startseite -->
  <Navbar />
  <Willkommen/>
  
  
  <!-- <Events style="margin-top: 120px;"/> -->

  <Forms/>
      

  <!-- <Bilderbuch/> -->



	<!-- <section class="slider4 mbr-embla cid-u6k7q0yLdW" id="gallery-13-u6k7q0yLdW" v-if="images[0]">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">

          <Embla :src="images"

          :links='[
            "/galerie/erntefest",
            "/galerie/osterfeuer",
            "/galerie/doppelkopf",
            "/galerie/fussball",
            ""
          ]'
          />
        </div>
      </div>
    </div>
  </section>




  <WillkommenText ref="willkommen"/>


  <br>
  <br> -->


  <Umgebung ref="umgebung" id="umgebung" />
  <MyFooter ref="footer" />

</template>

<style lang="css" scoped></style>
