<div class="container mt-5">
  <div class="row" *ngIf="product">
    <div class="col-6">
      <img src="{{product.pictureUrl}}" alt="{{product.name}}" class="img-fluid w-100">
    </div>
    <div class="col-6">
      <h3>{{product.name}}</h3>
      <p style="font-size: 2em;">{{product.price | currency}}</p>
      <div class="d-flex justify-content-start align-items-center">
        <i (click)="decrementQuantity()" class="fa fa-minus-circle text-warning me-2" style="cursor: pointer; font-size: 2em"></i>
        <span class="font-weight-bold" style="font-size: 1.5em;">{{quantity}}</span>
        <i (click)="incrementQuantity()" class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer; font-size: 2em"></i>
        <button (click)="addItemToBasket()" class="btn btn-outline-primary btn-lg ms-4">Add to Cart</button>
      </div>
    </div>
    <div class="row mt-5">
      <div class="col-12 ms-3">
        <h4>Description</h4>
        <p>{{product.description}}</p>
      </div>
    </div>
  </div>
</div>
