<section class="product-information">
  <h1>{{ title || product.name }}</h1>

  @if (product.badges?.length) {
    <div class="product-badges">
      @for (badge of product.badges; track $index) {
        <span class="product-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
      }
    </div>
  }

  @if (product.rating) {
    <div class="product-rating">
      <span>{{ product.rating | number:'1.1-1' }}</span>
      <span>({{ product.callbacks?.length || product.comments?.length || 0 }})</span>
    </div>
  }

  <div class="product-price">
    @if (product.discount > 0) {
      <div class="price-row">
        <span class="old-price">{{ price | currencyConvert:currency | number:'1.2-2' }} {{ displayCurrency() }}</span>
        <span class="discount-badge">-{{ product.discount }}%</span>
      </div>
      <strong>{{ discountedPrice | currencyConvert:currency | number:'1.2-2' }} {{ displayCurrency() }}</strong>
    } @else {
      <strong>{{ price | currencyConvert:currency | number:'1.2-2' }} {{ displayCurrency() }}</strong>
    }
  </div>

  <div class="product-stock" [class]="stockStatus">
    <span class="stock-dot"></span>
    <span>{{ 'itemDetail.stock' | translate }}</span>
    @if (remaining != null) {
      <strong>{{ remaining }}</strong>
    }
  </div>

  @if (showAddToCart) {
    <button type="button" class="add-to-cart" (click)="addToCart.emit()">
      {{ 'itemDetail.addToCart' | translate }}
    </button>
  }
</section>
