<script setup>
import { onMounted, ref } from 'vue'
import apiClient from '@/services/api-client.js'
import { useRoute } from 'vue-router'

const attends = ref([])

onMounted(() => {
  apiClient.get(`/attends/${useRoute().params.id}`)
    .then(res => attends.value = res.data.data.attends)
})
</script>

<template>
  <ContentWrapper background>
    <div v-if="attends" class="flex flex-col space-y-2 w-full mb-8 px-2 mt-8 h-screen">
      <BaseCard v-for="attend in attends" :key="attend.id" class="border w-full max-w-screen-xl py-2 px-4 flex gap-4 relative justify-between" plain>
        <div class="flex gap-1 items-center">
          <h1 class="font-bold">{{attend.user.name + ' ' + attend.user.surname}}</h1>
          <p>from {{attend.user.country.country}}</p>
        </div>
        <div class="flex gap-2 items-center">
          <p class="text-gray-500">{{attend.user.email}}</p>
          <a class="text-white bg-pink-400 hover:bg-pink-300 px-2 py-1 rounded-md" :href="`mailto:${attend.user.email}`">Contact through email!</a>
        </div>
      </BaseCard>
    </div>
  </ContentWrapper>

</template>

<style scoped>

</style>