market-backOfficce/src/app/pages/items-list/items-list.component.html

<div class="items-list-container">
  <mat-toolbar color="primary" class="list-toolbar">
    <button mat-icon-button (click)="goBack()">
      <mat-icon>arrow_back</mat-icon>
    </button>
    <span class="toolbar-title">Items List</span>
    <span class="toolbar-spacer"></span>
    <button mat-mini-fab color="accent" (click)="addItem()">
      <mat-icon>add</mat-icon>
    </button>
  </mat-toolbar>

  <div class="filters-bar">
    <mat-form-field appearance="outline" class="search-field">
      <mat-label>Search items</mat-label>
      <input 
        matInput 
        [(ngModel)]="searchQuery"
        (keyup.enter)="onSearch()"
        placeholder="Search by name...">
      <button mat-icon-button matSuffix (click)="onSearch()">
        <mat-icon>search</mat-icon>
      </button>
    </mat-form-field>

    <mat-form-field appearance="outline" class="filter-field">
      <mat-label>Visibility</mat-label>
      <mat-select [(ngModel)]="visibilityFilter" (selectionChange)="onFilterChange()">
        <mat-option [value]="undefined">All</mat-option>
        <mat-option [value]="true">Visible</mat-option>
        <mat-option [value]="false">Hidden</mat-option>
      </mat-select>
    </mat-form-field>

    @if (selectedItems().size > 0) {
      <div class="bulk-actions">
        <span class="selection-count">{{ selectedItems().size }} selected</span>
        <button mat-raised-button (click)="bulkToggleVisibility(true)">
          <mat-icon>visibility</mat-icon>
          Show
        </button>
        <button mat-raised-button (click)="bulkToggleVisibility(false)">
          <mat-icon>visibility_off</mat-icon>
          Hide
        </button>
      </div>
    }
  </div>

  <div class="items-header">
    <mat-checkbox
      [checked]="selectedItems().size === items().length && items().length > 0"
      [indeterminate]="selectedItems().size > 0 && selectedItems().size < items().length"
      (change)="toggleSelectAll()">
    </mat-checkbox>
    <span class="items-count">{{ items().length }} items</span>
  </div>

  <div class="items-grid">
    @for (item of items(); track item.id) {
      <div class="item-card" (click)="openItem(item.id)">
        <div class="item-card-actions">
          <mat-checkbox
            [checked]="selectedItems().has(item.id)"
            (change)="toggleSelection(item.id)"
            (click)="$event.stopPropagation()">
          </mat-checkbox>
          <button 
            mat-icon-button 
            color="warn" 
            (click)="deleteItem(item, $event)"
            class="delete-btn">
            <mat-icon>delete</mat-icon>
          </button>
        </div>

        <div class="item-image">
          @if (item.imgs.length) {
            <img [src]="item.imgs[0]" [alt]="item.name">
          } @else {
            <div class="no-image">
              <mat-icon>image</mat-icon>
            </div>
          }
        </div>

        <div class="item-info">
          <h3>{{ item.name }}</h3>
          
          <div class="item-details">
            <span class="price">{{ item.price }} {{ item.currency }}</span>
            <span class="quantity">Qty: {{ item.quantity }}</span>
          </div>

          <div class="item-meta">
            <span class="priority">Priority: {{ item.priority }}</span>
            <mat-icon [class.visible]="item.visible" [class.hidden]="!item.visible">
              {{ item.visible ? 'visibility' : 'visibility_off' }}
            </mat-icon>
          </div>

          @if (item.tags.length) {
            <div class="item-tags">
              @for (tag of item.tags.slice(0, 3); track tag) {
                <mat-chip>{{ tag }}</mat-chip>
              }
              @if (item.tags.length > 3) {
                <span class="more-tags">+{{ item.tags.length - 3 }}</span>
              }
            </div>
          }
        </div>
      </div>
    }
  </div>

  @if (loading()) {
    <div class="loading-more">
      <mat-spinner diameter="40"></mat-spinner>
      <span>Loading more items...</span>
    </div>
  }

  @if (!hasMore() && items().length > 0) {
    <div class="end-message">
      No more items to load
    </div>
  }

  @if (!loading() && items().length === 0) {
    <div class="empty-state">
      <mat-icon>inventory_2</mat-icon>
      <p>No items found</p>
    </div>
  }
</div>