<main class="compare-page page-container">
  <header class="compare-head">
    <div>
      <h1>{{ 'ux.compareTitle' | translate }}</h1>
      <p>{{ products().length }} {{ 'ux.items' | translate }}</p>
    </div>

    @if (hasItems()) {
      <app-button variant="ghost" (click)="clear()">{{ 'ux.clearCompare' | translate }}</app-button>
    }
  </header>

  @if (hasItems()) {
    <section class="compare-controls card">
      <label>
        <input type="checkbox" [checked]="hideIdentical()" (change)="hideIdentical.set($any($event.target).checked)" />
        {{ 'ux.hideIdentical' | translate }}
      </label>

      <label>
        <input type="checkbox" [checked]="highlightDifferences()" (change)="highlightDifferences.set($any($event.target).checked)" />
        {{ 'ux.highlightDifferences' | translate }}
      </label>
    </section>

    <section class="compare-products-list">
      @for (product of products(); track product.itemID) {
        <article class="compare-product-chip">
          <a [routerLink]="['/product', product.itemID] | langRoute">{{ productTitle(product) }}</a>
          <button type="button" [attr.aria-label]="'ux.removeFromCompare' | translate" (click)="remove(product.itemID)">×</button>
        </article>
      }
    </section>

    <app-compare-table
      [products]="products()"
      [hideIdentical]="hideIdentical()"
      [highlightDifferences]="highlightDifferences()" />
  } @else {
    <section class="compare-empty card">
      <app-empty-state [title]="'ux.compareEmptyTitle' | translate" [description]="'ux.compareEmptyDescription' | translate">
        <div slot="actions">
          <app-button variant="primary" [routerLink]="'/catalog' | langRoute">{{ 'ux.goToCatalog' | translate }}</app-button>
        </div>
      </app-empty-state>
    </section>
  }
</main>
