<template>
  <UModal v-model:open="open" :title="selectedUser.email">
    <template #body>
      <div>
        <div>Имя: {{ selectedUser.name }}</div>
        <div>Логин: {{ selectedUser.username }}</div>
        <div>
          <a
            :href="`mailto:${selectedUser.email}`"
            target="_blank"
            rel="noopener noreferrer"
          >
            Электронная почта: {{ selectedUser.email }}
          </a>
        </div>
        <div>
          <a
            :href="`tel:${selectedUser.phone}`"
            target="_blank"
            rel="noopener noreferrer"
          >
            Телефон: {{ selectedUser.phone }}
          </a>
        </div>
        <a :href="`https://${selectedUser.website}`" target="_blank">Веб-сайт: <span class="title-cell">{{ selectedUser.website }}</span></a>
        <div>Название компании: {{ selectedUser.company.name }}</div>
        <div>Адрес: {{ `${selectedUser.address.street} ${selectedUser.address.suite} ${selectedUser.address.city}` }}</div>
      </div>
    </template>
  </UModal>
</template>

<script setup lang="ts">
defineProps<{ selectedUser: User }>()
const open = defineModel<boolean>('modelValue')
</script>
