<div class="wishlist">
<h1>{{ title }}</h1>

<table>
    <thead>
        <tr>
            <th>Action</th>
            <th>Product</th>
            <th>Product Name</th>
            <th>Price</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of wishlistItems">
            <td><button class="remove-btn" (click)="removeItem(item._id)"><i class="bi bi-trash"></i></button></td>
            <td><img [src]="item.productImages[0]" alt="{{ item.name }}"></td>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td><button class="view-btn" (click)="viewDetails(item._id)">View Details</button></td>
        </tr>
    </tbody>
</table>
</div>