<app-dialog
  [open]="!!product || loading"
  [titleText]="'catalog.quickView' | translate"
  size="md"
  (closed)="closed.emit()"
>
  @if (loading) {
    <div class="quick-view__loading" role="status" aria-live="polite">{{ 'common.loading' | translate }}</div>
  } @else if (product) {
    <div class="quick-view">
      <img class="quick-view__image" [src]="mainImage" [alt]="product.name" />
      <div class="quick-view__body">
        <h3 class="quick-view__title">{{ product.name }}</h3>
        <p class="quick-view__price">
          @if (hasDiscount) {
            <span class="quick-view__price-original">{{ product.price | currencyConvert:product.currency | number:'1.2-2' }} {{ displayCurrency() }}</span>
            <span class="quick-view__price-final">{{ discountedPrice | currencyConvert:product.currency | number:'1.2-2' }} {{ displayCurrency() }}</span>
          } @else {
            <span class="quick-view__price-final">{{ product.price | currencyConvert:product.currency | number:'1.2-2' }} {{ displayCurrency() }}</span>
          }
        </p>
        @if (product.simpleDescription) {
          <p class="quick-view__description">{{ product.simpleDescription }}</p>
        }
        <div class="quick-view__actions">
          <app-button variant="primary" (click)="addToCart.emit(product)">{{ 'carousel.addToCart' | translate }}</app-button>
          <a class="quick-view__link" [routerLink]="('/product/' + product.itemID) | langRoute" (click)="closed.emit()">
            {{ 'catalog.quickViewDetails' | translate }}
          </a>
        </div>
      </div>
    </div>
  }
</app-dialog>
