<template>
  <!-- q-table qui bascule en mode CARTES sous 1024px (sinon une table large déborde en horizontal sur mobile).
       Transmet tous les attrs/slots du q-table. Un slot #item par défaut rend chaque ligne en carte clé/valeur ;
       fournir son propre #item pour personnaliser. Usage : <DataTable :rows :columns row-key="name" />. -->
  <q-table v-bind="$attrs" :grid="isMobile" flat bordered>
    <template v-for="(_, name) in $slots" #[name]="slotProps">
      <slot :name="name" v-bind="slotProps || {}" />
    </template>
    <template v-if="!$slots.item" #item="props">
      <div class="col-12 dt-grid-item">
        <q-card flat bordered class="dt-card" :class="{ 'dt-card-click': !!$attrs.onRowClick }"
          @click="$attrs.onRowClick && $attrs.onRowClick($event, props.row)">
          <div v-for="col in props.cols" :key="col.name" class="dt-row">
            <span class="dt-k">{{ col.label }}</span>
            <span class="dt-v">{{ col.value }}</span>
          </div>
        </q-card>
      </div>
    </template>
  </q-table>
</template>

<script setup>
import { useIsMobile } from 'src/composables/useMediaQuery'

defineOptions({ inheritAttrs: false })
const isMobile = useIsMobile()
</script>

<style scoped>
.dt-grid-item { padding: 4px; }
.dt-card { padding: 8px 12px; border-radius: 10px; }
.dt-card-click { cursor: pointer; }
.dt-card-click:active { background: var(--ops-bg-light, #f8fafc); }
.dt-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 0.85rem; border-bottom: 1px solid var(--ops-border); }
.dt-row:last-child { border-bottom: none; }
.dt-k { color: var(--ops-text-muted); }
.dt-v { font-weight: 600; text-align: right; word-break: break-word; }
</style>
