<script lang="ts" setup>
import {getCurrentInstance, onMounted, ref} from 'vue';

const basePath = '/images/';
const items = ref([] as string[]);

onMounted(async () => {
  const fetchedItems = (await (await fetch(basePath + 'index.json')).json()) as string[];
  items.value.splice(0);
  items.value.push(...fetchedItems);
});
</script>

<template>
  <div>
    <div :id="'carousel' + getCurrentInstance()!.uid"
         class="carousel slide carousel-fade w-100 h-100"
         data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button v-for="(item, index) in items"
                :aria-current="index === 0"
                :aria-label="'Slide ' + index"
                :class="{ active: index === 0 }"
                :data-bs-slide-to="index"
                :data-bs-target="'#carousel' + getCurrentInstance()!.uid"
                type="button"/>
      </div>
      <div class="carousel-inner w-100 h-100">
        <div v-for="(item, index) in items" :class="{ active: index === 0 }" class="carousel-item w-100 h-100">
          <img :alt="item" :src="basePath + item" class="d-block w-100 h-100" style="object-fit: scale-down"/>
        </div>
      </div>
      <button :data-bs-target="'#carousel' + getCurrentInstance()!.uid"
              class="carousel-control-prev"
              data-bs-slide="prev"
              type="button">
        <span aria-hidden="true" class="carousel-control-prev-icon"/>
        <span class="visually-hidden">Previous</span>
      </button>
      <button :data-bs-target="'#carousel' + getCurrentInstance()!.uid"
              class="carousel-control-next"
              data-bs-slide="next"
              type="button">
        <span aria-hidden="true" class="carousel-control-next-icon"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/_variables';

$x-carousel-color: $black;
$x-carousel-opacity: 1;

$carousel-control-color: $x-carousel-color;
$carousel-control-opacity: $x-carousel-opacity;
$carousel-control-hover-opacity: $x-carousel-opacity;

$carousel-indicator-active-bg: $x-carousel-color;
$carousel-indicator-opacity: $x-carousel-opacity;
$carousel-caption-color: $x-carousel-color;

$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration: .3s;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

//apply styles
@import '~bootstrap/scss/bootstrap';
</style>
