<script lang="ts" setup>
import Navbar from "../components/Navbar.vue";
import Embla from "../components/Embla.vue";
import Umgebung from "../components/startseite/Umgebung.vue";
import MyFooter from "../components/MyFooter.vue"; 
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(["http://localhost:3000/api/galerie/randomimage/erntefest","http://localhost:3000/api/galerie/randomimage/osterfeuer","http://localhost:3000/api/galerie/randomimage/doppelkopf","http://localhost:3000/api/galerie/randomimage/fussball","http://localhost:3000/api/galerie/bild/andere/0/hauptfoto.jpg"]);
</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"
          :font-size="49"

          :links='[
            "/galerie/#erntefest",
            "/galerie/#osterfeuer",
            "/galerie/#doppelkopf",
            "/galerie/#fussball",
            ""
          ]'
          :jahre="['Erntefest','Osterfeuer','Doppelkopf', 'Fußball','']"
          />
        </div>
      </div>
    </div>
  </section>




  <WillkommenText ref="willkommen"/>


  <br>
  <br>


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

</template>

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