<template>
  <div class="flex fixed top-0 left-0 w-full h-full items-center justify-center p-6 z-40 bg-black/40"
    @click.self="emit('close')">
    <div
      class="rounded bg-white p-4 shadow-2xl ring-1 ring-gray-900/5 relative text-gray-600 max-w-2xl max-h-full overflow-auto">
      <h2 class="font-arvo text-primary text-sm md:text-base" v-text="event.name"></h2>
      <div class="flex items-baseline text-sm">
        <calendar-icon class="w-3 h-3 flex-none text-secondary"></calendar-icon>
        <span class="text-sm font-semibold font-nunito text-gray-800 ml-2" v-text="event.dates"></span>
      </div>

      <div class="mt-3">
        <img :src="event.image"
          class="hidden sm:block w-24 float-left h-24 rounded-full border-secondary border-4 shape-circle" />
        <content class="text-gray-800 font-nunito" :modelValue="event.description"></content>
      </div>
      <div class="flex mt-3">
        <a :href="registerUrl.replace(':slug', event.slug)"
          class="px-3 py-2 text-xs font-nunito font-semibold rounded sm:px-4 sm:py-2 sm:text-sm sm:rounded focus:ring-2 focus:ring-offset-1 focus:ring-primaryfg focus:outline-none bg-primary text-primaryfg">
          Zur Anmeldung
        </a>
      </div>
      <a class="absolute block mt-3 mr-3 right-0 top-0" href="#" @click.prevent="emit('close')">
        <close-icon class="text-gray-700 w-5 h-5"></close-icon>
      </a>
    </div>
  </div>
</template>

<script setup>
import CalendarIcon from "./icons/CalendarIcon.vue";
import CloseIcon from "./icons/CloseIcon.vue";
import Content from "./Content.vue";

const emit = defineEmits(["close"]);
const props = defineProps({
  event: {
    required: true,
  },
  registerUrl: {
    required: true,
    type: String,
  },
});
</script>
