<script setup lang="ts">
import { format, isToday } from 'date-fns'

defineProps({
  mail: {
    type: Object,
    required: true
  },
  selected: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <UDashboardPanelContent>
    <div class="flex justify-between">
      <div class="flex items-center gap-4">
        <UAvatar v-bind="mail.from.avatar" :alt="mail.from.name||mail.from.address" size="lg" />

        <div class="min-w-0">
          <p class="text-gray-900 dark:text-white font-semibold">
            {{ mail.from.name ||mail.from.address}}
          </p>
          <p class="text-gray-500 dark:text-gray-400 font-medium">
            {{ mail.subject }}
          </p>
        </div>
      </div>

      <p class="font-medium text-gray-900 dark:text-white">
        {{ isToday(new Date(mail.date)) ? format(new Date(mail.date), 'HH:mm') : format(new Date(mail.date), 'dd MMM') }}
      </p>
    </div>

    <UDivider class="my-5" />

    <InputGroup class="mb-3">
      <UButton
          v-for="attachment in mail.attachments"
          icon="i-heroicons-arrow-down-tray"
          disabled
      >
        {{attachment.filename}}
      </UButton>
    </InputGroup>

    <div class="contentscroll overflow-scroll">
      <iframe class="flex-1 h-full w-full" :srcdoc="mail.html" v-if="mail.html"/>

<!--      <div class="flex-1" v-html="mail.html" v-if="mail.html">

      </div>-->
      <div class="flex-1" v-else>
        <p>{{mail.text}}</p>
      </div>
    </div>


  </UDashboardPanelContent>
</template>

<style>
.contentscroll{
  height: 80vh;
}
</style>