<div class="cargoo-card">
  <div class="cargoo-card-header d-flex justify-content-between align-items-center">
    <div>
      <h5 class="mb-1 fw-bold"><i class="bi bi-heart text-danger me-2"></i><?= __('my_wishlist') ?></h5>
      <p class="text-muted small mb-0">รายการสินค้าที่คุณบันทึกไว้สำหรับตัดสินใจซื้อ</p>
    </div>
    <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill small">
      <?= count($items) ?> รายการ
    </span>
  </div>

  <div class="cargoo-card-body p-4">
    <?php if (empty($items)): ?>
      <div class="text-center py-5">
        <i class="bi bi-heart text-muted" style="font-size: 3rem;"></i>
        <h6 class="mt-3 text-dark fw-bold"><?= __('no_wishlist_found') ?></h6>
        <p class="text-muted small">เมื่อคุณถูกใจสินค้าใด ให้กดไอคอนหัวใจเพื่อบันทึกไว้ที่นี่</p>
        <a href="<?= url('/search') ?>" class="btn btn-cargoo-primary btn-sm mt-2 px-4 py-2">
          <?= __('continue_shopping') ?>
        </a>
      </div>
    <?php else: ?>
      <!-- Reusable Product Grid -->
      <div class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3">
        <?php foreach ($items as $item): ?>
          <?php 
            $product = $item; 
            $isWishlistPage = true; 
            require __DIR__ . '/../components/product_card.php'; 
          ?>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>
</div>
