<template>
  <aside class="evidence-panel">
    <header>
      <h2>{{ t('task.evidence') }}</h2>
      <span>{{ sourceMessage.channel }}</span>
    </header>

    <dl>
      <div>
        <dt>{{ t('task.sourceMessageId') }}</dt>
        <dd class="th-code">
          {{ sourceMessage.source_message_id }}
        </dd>
      </div>
      <div>
        <dt>{{ t('task.sourceSender') }}</dt>
        <dd>{{ sourceMessage.sender_identifier }}</dd>
      </div>
      <div>
        <dt>{{ t('task.sourceSubject') }}</dt>
        <dd>{{ sourceMessage.thread_subject }}</dd>
      </div>
      <div>
        <dt>{{ t('task.sourceReceivedAt') }}</dt>
        <dd>{{ formatReservationDateTime(sourceMessage.payload_received_at) }}</dd>
      </div>
    </dl>

    <p>{{ sourceMessage.summary }}</p>
  </aside>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

import type { ReservationSourceMessageSummary } from '@/types/reservation'
import { formatReservationDateTime } from '@/utils/reservationFormat'

defineProps<{
  sourceMessage: ReservationSourceMessageSummary
}>()

const { t } = useI18n()
</script>

<style scoped>
.evidence-panel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--th-color-slate-200);
  border-radius: var(--th-radius-md);
  padding: 16px;
}

.evidence-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.evidence-panel h2 {
  margin: 0;
  color: var(--th-color-slate-900);
  font-size: 15px;
}

.evidence-panel header span {
  border-radius: 999px;
  background: var(--th-color-slate-100);
  color: var(--th-color-slate-700);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
}

.evidence-panel dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.evidence-panel dl div {
  display: grid;
  gap: 3px;
}

.evidence-panel dt {
  color: var(--th-color-slate-500);
  font-size: 12px;
  font-weight: 700;
}

.evidence-panel dd,
.evidence-panel p {
  margin: 0;
  color: var(--th-color-slate-900);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
</style>
