<script lang="js">
import Navbar from "../components/Navbar.vue";
import Embla from "../components/Embla.vue";
import RitzenbergenLib from "../ritzenbergenlib";
import MyFooter from "../components/MyFooter.vue"; // Geändert von Footer auf MyFooter

export default {
  components: {
    Navbar,
    Embla,
    MyFooter, // Geändert von Footer auf MyFooter
  },
  computed: {
    events() {
      let erntefeste = this.get_jahre("erntefest");
      let osterfeuer = this.get_jahre("osterfeuer");
      let doppelkopf = this.get_jahre("doppelkopf");
      let fussball = this.get_jahre("fussball");
			if(erntefeste==undefined) return []; 
				let result = [
        {
          src: erntefeste.map((erntefest) =>
            RitzenbergenLib.RitzenbergenLib.api(
              "randomimage.php?path=/erntefest/" +
                erntefest +
                "&recursive=1&tn=1&text=" +
                erntefest +
                "&color=white"
            )
          ),
          title: "Erntefeste",
          ev: "erntefest",
        },
        {
          src: osterfeuer.map((osterfeuer) =>
            RitzenbergenLib.RitzenbergenLib.api(
              "randomimage.php?path=/osterfeuer/" +
                osterfeuer +
                "&recursive=1&tn=1&text=" +
                osterfeuer +
                "&color=white"
            )
          ),
          title: "Osterfeuer",
          ev: "osterfeuer",
        },
        {
          src: doppelkopf.map((doppelkopf) =>
            RitzenbergenLib.RitzenbergenLib.api(
              "randomimage.php?path=/doppelkopf/" +
                doppelkopf +
                "&recursive=1&tn=1&text=" +
                doppelkopf +
                "&color=white"
            )
          ),
          title: "Doppelkopf",
          ev: "doppelkopf",
        },
        {
          src: fussball.map((fussball) =>
            RitzenbergenLib.RitzenbergenLib.api(
              "randomimage.php?path=/fussball/" +
                fussball +
                "&recursive=1&tn=1&text=" +
                fussball +
                "&color=white"
            )
          ),
          title: "Fußballturniere",
          ev: "fussball",
        },
      ];

      return result.map((ev) => {
        let jahre = this.get_jahre(ev.ev);
        ev.links = jahre.map((jahr) => {
          return "/bild/" + ev.ev + "/" + jahr;
        });
        return ev;
      });
    },
  },
  methods: {
    get_jahre(event) {
      let result;
      $.ajax(RitzenbergenLib.RitzenbergenLib.api("/galerie/get_jahre.php"), {
        success(data) {
          result = JSON.parse(data);
        },
        async: false,
        data: { event },
      });
      return result;
    },
  },
  mounted(){
    if(this.$route.params.ev){
      let ev = this.$route.params.ev;
      
      if(this.$refs[ev]) this.$refs[ev][0].scrollIntoView();
      this.$router.push("/galerie");
    }
  }
};
</script>
<template>
  <Navbar :links="[
    { title: 'Erntefest', link: '/galerie/erntefest' },
    { title: 'Osterfeuer', link: '/galerie/osterfeuer' },
    { title: 'Doppelkopf', link: '/galerie/doppelkopf' },
    { title: 'Fußballturniere', link: '/galerie/fussball' },
  ]" />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />

  <section class="article12 cid-u6k7q0yKNv" id="about-us-12-u6k7q0yKNv">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-12 col-lg-10">
          <h3 class="mbr-section-title mbr-fonts-style mb-4 mt-0 display-2">
            <strong>Willkommen in der Galerie</strong>
          </h3>
          <p class="mbr-text mbr-fonts-style display-7">
            In unserem Fotoalbum findest du chronisch geordnete Bilder
            verschiedener Veranstaltungen aus den letzten Jahrzehnten. Einfach
            auf ein Bild mit einer Jahreszahl raufklicken.
          </p>
        </div>
      </div>
    </div>
  </section>

  <br /><br />
  <section
    class="slider4 mbr-embla cid-u6k7q0yLdW"
    :ref="event.ev"
    v-for="event in events"
  >
    <div class="container-fluid">
      <div class="row">
        <h4
          class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
        >
          <strong>{{ event.title }}</strong>
        </h4>
        <div class="col-12">
          <br />
          <Embla :src="event.src" :links="event.links" />
        </div>
      </div>
    </div>
    <br /><br /><br />
  </section>
	<h1 v-if="events.length==0">Keine Internetverbindung!</h1>
    <br /><br /><br />
  <MyFooter />
</template>
<style scoped></style>
