<script setup>
import DialogModal from '@/Components/DialogModal.vue'

const props = defineProps({
  show: { type: Boolean, default: false },
  client_case: { type: Object, required: true },
  contract: { type: Object, default: null },
})

const emit = defineEmits(['close'])
const close = () => emit('close')

const items = () => Array.isArray(props.contract?.objects) ? props.contract.objects : []
</script>

<template>
  <DialogModal :show="show" @close="close">
    <template #title>
      Predmeti
      <span v-if="contract" class="ml-2 text-sm text-gray-500">(Pogodba: {{ contract.reference }})</span>
    </template>
    <template #content>
      <div class="mt-1 max-h-[60vh] overflow-y-auto">
        <div v-if="items().length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div v-for="o in items()" :key="o.id" class="rounded-lg border border-gray-200 bg-white shadow-sm">
            <div class="p-4">
              <div class="flex items-start justify-between">
                <div>
                  <div class="text-xs uppercase text-gray-500">Ref.</div>
                  <div class="font-semibold text-gray-900">{{ o.reference || '-' }}</div>
                </div>
                <span class="ml-3 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-700">{{ o.type || '—' }}</span>
              </div>
              <div class="mt-3">
                <div class="text-xs uppercase text-gray-500">Naziv</div>
                <div class="text-gray-900">{{ o.name || '-' }}</div>
              </div>
              <div class="mt-3">
                <div class="text-xs uppercase text-gray-500">Opis</div>
                <div class="text-gray-700 whitespace-pre-wrap">{{ o.description || '' }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="text-center text-gray-500 py-3">Ni predmetov.</div>
      </div>
      <div class="mt-4 flex justify-end">
        <button type="button" class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50" @click="close">Zapri</button>
      </div>
    </template>
  </DialogModal>
</template>
