<script lang="ts">
import Navbar from "../components/Navbar.vue";
import RitzenbergenLib from "../../../ritzenbergenlib";
import Footer from "../components/MyFooter.vue";

</script>
<template>
  <Navbar />
  Bildvorschau
  <!--<section class="galerie-section">
    <div class="galerie-container">
      <h2>{{ capitalizeFirstLetter(ev) }} {{ jahr }}</h2>
      Vorschaubilder <br />
      {{ bilder.length }} Bilder
      <table>
        <tbody>
          <tr v-for="row, i in bildersplitted">
            <td v-for="column, j in row">
              <RouterLink :to="jahr+'/'+(i*5+j).toString()"
                ><img :src="RitzenbergenLib.get_img(column)" alt="Vorschaubild"
              /></RouterLink>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
  <div class="platzhalter" v-if="einereihe"></div>-->
  <Footer></Footer>
</template>
<style scoped>
.galerie-container {
  width: 80%; /* Breite der Galerie anpassen */
  margin: 0 auto; /* Galerie in der Mitte ausrichten */
}

table {
  width: 100%; /* Tabelle über die gesamte Breite des Containers */
  border-collapse: collapse; /* Zellränder entfernen */
}

th,
td {
  padding: 20px; /* Abstand zwischen Bild und Rand der Zelle */
  text-align: center; /* Text in der Mitte ausrichten */
}

img {
  width: 70%; /* Breite der Vorschaufotos */
  height: auto; /* Automatisches Seitenverhältnis bewahren */
  margin: 0 auto; /* Bild in der Mitte der Zelle ausrichten */
  border-radius: 15px;
}

@media (max-width: 768px) {
  /* Smartphones (ca. Portrait-Modus) */
  table {
    width: 100%; /* Galerie über die gesamte Breite */
  }

  tr {
    display: flex; /* Bilder in einer Reihe anordnen */
    flex-wrap: wrap; /* Zeilenumbruch aktivieren */
  }

  td {
    flex: 1 0 50%; /* Zellenbreite gleichmäßig aufteilen */
    padding: 10px; /* Randabstand verringern */
  }

  img {
    width: 100%; /* Bilder über die gesamte Zellenbreite */
    height: auto; /* Seitenverhältnis bewahren */
    margin: 0; /* Bildränder entfernen */
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablets (ca. Portrait-Modus) */
  table {
    width: 80%; /* Galerie etwas schmaler */
  }

  tr {
    display: flex; /* Bilder in 3 Reihen anordnen */
    flex-wrap: wrap;
  }

  td {
    flex: 1 0 33%; /* Zellenbreite gleichmäßig aufteilen */
    padding: 15px; /* Randabstand etwas erhöhen */
  }

  img {
    width: 100%; /* Bilder über die gesamte Zellenbreite */
    height: auto; /* Seitenverhältnis bewahren */
    margin: 0; /* Bildränder entfernen */
  }
}
.galerie-section {
  margin-top: 150px;
  margin-bottom: 150px;
}
.platzhalter {
  height: 150px;
}
</style>
