<script setup lang="ts">
import * as DE from '~/components/pub/my-ui/doc-entry';
</script>

<template>
  <div class="p-10 text-center">
    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
    <div>
      <Button>
        <Icon name="i-lucide-plus" class="me-2 align-middle" />
        Tambah Order
      </Button>
    </div>
  </div>
  <Separator class="my-5" />
  <div class="md:grid md:grid-cols-2 font-semibold">
    <div>
      <DE.Block mode="preview">
        <DE.Cell>
          <DE.Label>Order #1</DE.Label>
          <DE.Colon />
          <DE.Field>
            2025-01-01
          </DE.Field>
        </DE.Cell>
        <DE.Cell>
          <DE.Label>Status</DE.Label>
          <DE.Colon />
          <DE.Field>
              Status
          </DE.Field>
        </DE.Cell>
      </DE.Block>
    </div>
    <div>
      <DE.Block mode="preview">
        <DE.Cell>
          <DE.Label>DPJP</DE.Label>
          <DE.Colon />
          <DE.Field>
              Nama Dokter
          </DE.Field>
        </DE.Cell>
        <DE.Cell>
          <DE.Label>PPDS</DE.Label>
          <DE.Colon />
          <DE.Field>
              Nama PPDS
          </DE.Field>
        </DE.Cell>
      </DE.Block>
    </div>
  </div>
</template>
