<script setup>
import { useRouter } from 'vue-router'
import SepsisBundleRow from './SepsisBundleRow.vue'
import SepsisBundleCard from './SepsisBundleCard.vue'

defineProps({
  bundles: { type: Array, required: true },
  now: { type: Number, required: true },
})

const router = useRouter()

function goToPatient(encounterId) {
  router.push({ name: 'PatientDetail', params: { encounterId } })
}
</script>

<template>
  <div class="space-y-4 md:hidden">
    <SepsisBundleCard
      v-for="bundle in bundles"
      :key="bundle.id"
      :bundle="bundle"
      :now="now"
      @click="goToPatient(bundle.encounterId)"
    />
  </div>

  <div class="hidden overflow-x-auto rounded-lg border border-gray-200 md:block dark:border-gray-700">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="sticky top-0 bg-gray-50 dark:bg-gray-800">
        <tr>
          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Patient</th>
          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Department</th>
          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Room</th>
          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Started</th>
          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Deadline</th>
          <th class="px-4 py-4 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Remaining</th>
          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Status</th>
          <th class="px-4 py-4 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Elements</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
        <SepsisBundleRow
          v-for="bundle in bundles"
          :key="bundle.id"
          :bundle="bundle"
          :now="now"
          class="cursor-pointer transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-800"
          @click="goToPatient(bundle.encounterId)"
        />
      </tbody>
    </table>
  </div>
</template>
