<div class="card h-100 shadow-sm border-0">

  <img [src]="product.image"
       class="card-img-top"
       alt="{{ product.name }}"
       style="object-fit: cover; height: 180px;">

  <div class="card-body">

    <h5 class="fw-semibold">{{ product.name }}</h5>

    <p class="text-muted small mb-2">{{ product.description }}</p>

    <p class="fw-bold text-primary">{{ product.price }} €</p>

    <span class="badge bg-dark me-2">{{ product.category }}</span>

    <span class="badge"
          [class.bg-success]="product.active"
          [class.bg-danger]="!product.active">
      {{ product.active ? 'Activo' : 'Inactivo' }}
    </span>

<button class="btn btn-danger btn-sm w-100 mt-3"
        (click)="eliminar()">
  Eliminar producto
</button>

  </div>

</div>