<!-- SPEC: PJ2026-010405 云端控制台 / Secrets. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->
<script setup lang="ts">
import StatusBadge from "@/components/common/StatusBadge.vue";
import EntityIndex from "@/components/console/EntityIndex.vue";
import type { AdminSecretsRow } from "@/stores/admin-secrets-view";

defineProps<{ rows: AdminSecretsRow[]; total: number; selectedId: string | null; query: string; status: string }>();
const emit = defineEmits<{ select: [row: AdminSecretsRow]; "update:query": [value: string]; "update:status": [value: string] }>();
const rowKey = (row: AdminSecretsRow): string => `${row.cluster}:${row.namespace}:${row.name}`;
</script>

<template>
  <EntityIndex :items="rows" :item-key="rowKey" :selected-id="selectedId" label="ExternalSecret 库存" @select="emit('select', $event)">
    <template #toolbar>
      <label class="operations-search">
        <span>ExternalSecret 库存</span>
        <input :value="query" type="search" placeholder="名称、namespace、cluster 或 target" @input="emit('update:query', ($event.target as HTMLInputElement).value)" />
      </label>
      <select :value="status" class="input" @change="emit('update:status', ($event.target as HTMLSelectElement).value)">
        <option value="all">全部状态</option><option value="ready">ready</option><option value="pending">pending</option><option value="error">error</option><option value="unknown">unknown</option>
      </select>
      <small>{{ rows.length }} / {{ total }} objects</small>
    </template>
    <template #item="{ item }">
      <strong>{{ item.name }}</strong><small>{{ item.namespace }} · {{ item.cluster }}</small>
      <span class="entity-index-meta"><StatusBadge :status="item.status" :label="item.status" /><code>{{ item.targetSecretName || "no target" }}</code></span>
    </template>
  </EntityIndex>
</template>
