<!-- DEXAR VERSION - Redesigned 2026 -->
<div class="dx-item-container">
  @if (loading()) {
    <div class="dx-loading">
      <div class="dx-spinner"></div>
      <p>{{ 'itemDetail.loadingDexar' | translate }}</p>
    </div>
  }

  @if (error()) {
    <div class="dx-error">
      <p>{{ error() }}</p>
      <a [routerLink]="'/' | langRoute" class="dx-back-link">{{ 'itemDetail.backHome' | translate }}</a>
    </div>
  }

  @if (item() && !loading()) {
    <div class="dx-item-content">
      <!-- Gallery: thumbnails left + main photo -->
      <div class="dx-gallery">
        @if (item()?.photos && item()!.photos!.length > 0) {
          <div class="dx-thumbnails">
            @for (photo of item()!.photos!; track $index) {
              <div 
                class="dx-thumb" 
                [class.active]="selectedPhotoIndex() === $index"
                (click)="selectPhoto($index)">
                @if (photo.video) {
                  <div class="dx-video-badge">?</div>
                }
                <img [src]="photo.url" [alt]="('itemDetail.photo' | translate) + ' ' + ($index + 1)" loading="lazy" decoding="async" />
              </div>
            }
          </div>
        }
        <div class="dx-main-photo">
          @if (item()?.photos && item()!.photos!.length > 0) {
            @if (item()!.photos![selectedPhotoIndex()]?.video) {
              <video [src]="item()!.photos![selectedPhotoIndex()].url" controls></video>
            } @else {
              <img [src]="item()!.photos![selectedPhotoIndex()].url" [alt]="item()!.name" fetchpriority="high" decoding="async" />
            }
          } @else {
            <div class="dx-no-image">
              <app-icon name="image" [size]="48" />
              <span>{{ 'itemDetail.noImage' | translate }}</span>
            </div>
          }
        </div>
      </div>

      <!-- Item Info -->
      <div class="dx-info">
        <h1 class="dx-title">{{ getItemName() }}</h1>

        @if (item()!.badges && item()!.badges!.length > 0) {
          <div class="dx-badges">
            @for (badge of item()!.badges!; track badge) {
              <span class="item-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
            }
          </div>
        }

        @if (item()!.tags && item()!.tags!.length > 0) {
          <div class="dx-tags">
            @for (tag of item()!.tags!; track tag) {
              <span class="item-tag">#{{ tag }}</span>
            }
          </div>
        }
        
        <div class="dx-rating">
          <div class="dx-stars">
            @for (star of [1, 2, 3, 4, 5]; track star) {
              <app-icon name="star" [size]="18" [class.dx-star--filled]="star <= item()!.rating" [color]="star <= item()!.rating ? '#497671' : '#a1b4b5'" />
            }
          </div>
          <span class="dx-rating-value">{{ item()!.rating }}</span>
          <span class="dx-rating-count">({{ item()!.callbacks?.length || 0 }} {{ 'itemDetail.reviewsCount' | translate }})</span>
        </div>

        <div class="dx-price-block">
          @if (item()!.discount > 0) {
            <div class="dx-price-row">
              <span class="dx-old-price">{{ effectivePrice() }} {{ effectiveCurrency() }}</span>
              <span class="dx-discount-tag">-{{ item()!.discount }}%</span>
            </div>
          }
          <div class="dx-current-price">
            {{ item()!.discount > 0 ? (getDiscountedPrice() | number:'1.2-2') : effectivePrice() }} {{ effectiveCurrency() }}
          </div>
        </div>

        <div class="dx-stock">
          <span class="dx-stock-label">{{ 'itemDetail.stock' | translate }}</span>
          <span class="dx-stock-status" [class]="getStockClass()">
            <span class="dx-stock-dot"></span>
            {{ getStockLabel() }}
          </span>
          @if (effectiveRemaining() != null) {
            <span class="dx-stock-qty">({{ effectiveRemaining() }} ��.)</span>
          }
        </div>

        @if (availableColours().length || availableSizes().length || item()!.colour || (item()!.size && item()!.size!.toLowerCase() !== 'default')) {
          <div class="dx-variants">
            @if (availableColours().length) {
              <div class="variant-group">
                <span class="variant-label">{{ 'itemDetail.colour' | translate }}:</span>
                @for (c of availableColours(); track c) {
                  <span class="colour-swatch" [class.active]="selectedColour() === c" [style.background-color]="c" [title]="c" (click)="selectColour(c)"></span>
                }
              </div>
            } @else if (item()!.colour) {
              <div class="variant-group">
                <span class="variant-label">{{ 'itemDetail.colour' | translate }}:</span>
                <span class="colour-swatch active" [style.background-color]="item()!.colour" [title]="item()!.colour"></span>
              </div>
            }
            @if (availableSizes().length) {
              <div class="variant-group">
                <span class="variant-label">{{ 'itemDetail.size' | translate }}:</span>
                @for (s of availableSizes(); track s) {
                  <span class="variant-chip size-chip" [class.active]="selectedSize() === s" (click)="selectSize(s)">{{ s }}</span>
                }
              </div>
            } @else if (item()!.size && item()!.size!.toLowerCase() !== 'default') {
              <div class="variant-group">
                <span class="variant-label">{{ 'itemDetail.size' | translate }}:</span>
                <span class="variant-chip size-chip active">{{ item()!.size }}</span>
              </div>
            }
          </div>
        }

        @if (item()!.attributes && item()!.attributes!.length > 0) {
          <div class="dx-attributes">
            @for (attr of item()!.attributes!; track attr.key) {
              <div class="attribute-row">
                <span class="attribute-key">{{ attr.key }}</span>
                <span class="attribute-value">{{ attr.value }}</span>
              </div>
            }
          </div>
        }

        @if (hasDeliveryInfo()) {
          <div class="dx-delivery">
            <h3 class="dx-delivery-title">{{ 'cart.deliveryLabel' | translate }}</h3>

            @if (isDigitalDelivery()) {
              <div class="dx-delivery-chip">{{ 'cart.digitalDelivery' | translate }}</div>
            } @else {
              <div class="dx-delivery-list">
                @for (option of deliveryOptions(); track trackByDeliveryOption($index, option)) {
                  <div class="dx-delivery-option">
                    <div class="dx-delivery-option-main">
                      @if (option.deliveryPlace) {
                        <span>{{ 'cart.deliveryPlace' | translate }}: {{ option.deliveryPlace }}</span>
                      }
                      @if (option.deliveryTime) {
                        <span>{{ 'cart.deliveryTime' | translate }}: {{ option.deliveryTime }}</span>
                      }
                    </div>
                    <span class="dx-delivery-price">{{ option.deliveryPrice | number:'1.2-2' }} {{ getDeliveryCurrency() }}</span>
                  </div>
                }
              </div>
            }
          </div>
        }

        <button class="dx-add-cart" (click)="addToCart()">
          <app-icon name="cart" [size]="20" />
          {{ 'itemDetail.addToCart' | translate }}
        </button>

        <div class="dx-description">
          <!-- @if (getSimpleDescription()) { -->
          @if (false) {
            <p class="dx-simple-desc">{{ getSimpleDescription() }}</p>
          }

          @if (hasDescriptionFields()) {
            <h2>{{ 'itemDetail.specifications' | translate }}</h2>
            <table class="dx-specs-table">
              <tbody>
                @for (field of getTranslatedDescriptionFields(); track field.key) {
                  <tr>
                    <td class="spec-key">{{ field.key }}</td>
                    <td class="spec-value">{{ field.value }}</td>
                  </tr>
                }
              </tbody>
            </table>
          } @else {
            <h2>{{ 'itemDetail.description' | translate }}</h2>
            <div class="dx-description-text" [innerHTML]="getSafeHtml(item()!.description)"></div>
          }
        </div>
      </div>
    </div>

    <!-- Reviews Section -->
    <div class="dx-reviews-section">
      <h2>{{ 'itemDetail.reviews' | translate }} ({{ item()!.callbacks?.length || 0 }})</h2>
      
      <div class="dx-review-form">
        <h3>{{ 'itemDetail.leaveReview' | translate }}</h3>
        <div class="dx-rating-input">
          <label>{{ 'itemDetail.rating' | translate }}</label>
          <div class="dx-star-selector">
            @for (star of [1, 2, 3, 4, 5]; track star) {
              <span 
                class="dx-star-pick" 
                [class.selected]="newReview.rating >= star"
                (click)="setRating(star)">
                ?
              </span>
            }
          </div>
        </div>
        <textarea 
          [(ngModel)]="newReview.comment" 
          [placeholder]="'itemDetail.reviewPlaceholderDexar' | translate"
          rows="4"
          class="dx-textarea">
        </textarea>
        <div class="dx-form-actions">
          <label class="dx-anon-toggle">
            <input type="checkbox" [(ngModel)]="newReview.anonymous">
            <span>{{ 'itemDetail.anonymous' | translate }}</span>
          </label>
          @if (!newReview.anonymous && getUserDisplayName()) {
            <span class="dx-user-preview">{{ getUserDisplayName() }}</span>
          }
          <button 
            class="dx-submit-btn" 
            (click)="submitReview()"
            [disabled]="!newReview.rating || !newReview.comment.trim() || reviewSubmitStatus() === 'loading'"
            [class.submitting]="reviewSubmitStatus() === 'loading'">
            @if (reviewSubmitStatus() === 'loading') {
              <span class="dx-spinner-sm"></span>
              {{ 'itemDetail.submitting' | translate }}
            } @else {
              {{ 'itemDetail.submit' | translate }}
            }
          </button>
        </div>
        
        @if (reviewSubmitStatus() === 'success') {
          <div class="dx-status success">
            <app-icon name="check" [size]="16" />
            {{ 'itemDetail.reviewSuccess' | translate }}
          </div>
        }
        
        @if (reviewSubmitStatus() === 'error') {
          <div class="dx-status error">
            <app-icon name="x" [size]="16" />
            {{ 'itemDetail.reviewError' | translate }}
          </div>
        }
      </div>

      <div class="dx-reviews-list">
        @if (item()?.callbacks && item()!.callbacks!.length > 0) {
          @for (callback of item()!.callbacks; track $index) {
            <div class="dx-review-card">
              <div class="dx-review-header">
                <div class="dx-reviewer">
                  <span class="dx-reviewer-name">{{ callback.userID ? callback.userID : ('itemDetail.defaultUser' | translate) }}</span>
                  @if (callback.timestamp) {
                    <span class="dx-review-date">{{ formatDate(callback.timestamp) }}</span>
                  }
                </div>
                @if (callback.rating) {
                  <div class="dx-review-stars">
                    @for (star of [1, 2, 3, 4, 5]; track star) {
                      <app-icon name="star" [size]="14" [class.dx-star--filled]="star <= callback.rating" [color]="star <= callback.rating ? '#497671' : '#d3dad9'" />
                    }
                  </div>
                }
              </div>
              @if (callback.content) {
                <p class="dx-review-text">{{ callback.content }}</p>
              }
            </div>
          }
        } @else {
          <p class="dx-no-reviews">{{ 'itemDetail.noReviews' | translate }}</p>
        }
      </div>
    </div>

    <!-- Q&A Section -->
    @if (item()!.questions && item()!.questions!.length > 0) {
      <div class="dx-qa-section">
        <h2>{{ 'itemDetail.qna' | translate }} ({{ item()!.questions!.length }})</h2>
        <div class="dx-qa-list">
          @for (question of item()!.questions!; track $index) {
            <div class="dx-qa-card">
              <div class="dx-question">
                <span class="dx-qa-label q">�</span>
                <span>{{ question.question }}</span>
              </div>
              <div class="dx-answer">
                <span class="dx-qa-label a">�</span>
                <span>{{ question.answer }}</span>
              </div>
              <div class="dx-qa-votes">
                <button class="dx-vote up">
                  <app-icon name="thumbsUp" [size]="14" />
                  {{ question.upvotes }}
                </button>
                <button class="dx-vote down">
                  <app-icon name="thumbsDown" [size]="14" />
                  {{ question.downvotes }}
                </button>
              </div>
            </div>
          }
        </div>
      </div>
    }

    @if (relatedProducts().length > 0) {
      <section class="related-products" aria-labelledby="dx-related-products-title">
        <h2 id="dx-related-products-title">{{ 'itemDetail.relatedProducts' | translate }}</h2>
        <div class="related-products-grid">
          @for (related of relatedProducts(); track related.itemID) {
            <app-product-card
              [item]="related"
              [title]="relatedItemName(related)"
              [addToCartLabel]="'itemDetail.addToCart' | translate"
              appearance="compact"
              (addToCart)="addRelatedToCart($event.itemID, $event.event)"
            />
          }
        </div>
      </section>
    }
  }
</div>
