<script lang="ts" setup>
import RitzenbergenLib from "../../ritzenbergenlib.ts";
import {ref} from "vue";

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;
});

const images=ref([]);
</script>
<template>
	<section
		class="gallery09 cid-u6k7q0xbqP"
		id="gallery-9-u6k7q0xbqP"
		v-if="images[0]"
	>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-12 col-md-12 col-lg-4 main-text">
					<div class="">
						<h5
							class="mbr-section-title mbr-fonts-style mt-0 mb-4 display-2"
						>
							<strong>Bilderbuch Ritzenbergen</strong>
						</h5>
						<h6
							class="mbr-section-subtitle mbr-fonts-style mt-0 mb-4 display-7"
						>
							Klicke auf ein Bild um in unsere Galerie zu
							gelangen. Die Bilder sind nach Jahreszahl und
							Kategorie geordnet.
						</h6>
					</div>
				</div>
				<div class="col-lg-8 side-features row">
					<div
						class="item features-image col-12 col-md-6 col-lg-6 active"
					>
						<div class="item-wrapper">
							<div class="item-img">
								<RouterLink to="/galerie/doppelkopf"
									><img :src="images[0]"
								/></RouterLink>
							</div>
						</div>
					</div>
					<div
						class="item features-image col-12 col-md-6 col-lg-6 active"
					>
						<div class="item-wrapper">
							<div class="item-img">
								<RouterLink to="/galerie/erntefest"
									><img :src="images[1]"
								/></RouterLink>
							</div>
						</div>
					</div>
					<div
						class="item features-image col-12 col-md-6 col-lg-6 active"
					>
						<div class="item-wrapper">
							<div class="item-img">
								<RouterLink to="/galerie/fussball"
									><img :src="images[2]"
								/></RouterLink>
							</div>
						</div>
					</div>
					<div
						class="item features-image col-12 col-md-6 col-lg-6 active"
					>
						<div class="item-wrapper">
							<div class="item-img">
								<RouterLink to="/galerie/osterfeuer"
									><img :src="images[3]"
								/></RouterLink>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>
<style></style>
