<script setup>
import { toApiUrl } from '../../lib/runtime'

const props = defineProps({
  customItems: { type: Array, required: true },
  openCustomItemModal: { type: Function, required: true },
  customItemPage: { type: Number, required: true },
  customItemPageCount: { type: Number, required: true },
  customItemTotal: { type: Number, required: true },
  moveCustomItemPage: { type: Function, required: true },
})
</script>

<template>
  <div class="panel">
    <div v-if="!props.customItems.length" class="hint">조건에 맞는 관리 대상 아이템이 없어요.</div>
    <div v-else class="customItemGrid">
      <button v-for="item in props.customItems" :key="item.id" type="button" class="customItemCard" @click="props.openCustomItemModal(item)">
        <span
          class="customItemCard__badge"
          :class="{
            'customItemCard__badge--template': item.sourceType === 'template',
            'customItemCard__badge--asset': item.sourceType === 'asset',
          }"
        >
          {{ item.sourceLabel }}
        </span>
        <span v-if="item.replacedAt" class="customItemCard__badge customItemCard__badge--replaced">대체됨</span>
        <img class="customItemCard__image" :src="toApiUrl(item.src)" :alt="item.label" />
        <div class="customItemCard__title" :title="item.label">{{ item.label }}</div>
      </button>
    </div>

    <div class="pager">
      <button class="btn btn--ghost" :disabled="props.customItemPage <= 1" @click="props.moveCustomItemPage(-1)">이전</button>
      <div class="pager__info">{{ props.customItemPage }} / {{ props.customItemPageCount }} 페이지 · 총 {{ props.customItemTotal }}개</div>
      <button class="btn btn--ghost" :disabled="props.customItemPage >= props.customItemPageCount" @click="props.moveCustomItemPage(1)">다음</button>
    </div>
  </div>
</template>
