marketplaces/src/app/pages/search/search.component.html

<div class="search-container">
  <div class="search-header">
    <h1>Поиск товаров</h1>
    <div class="search-box">
      <input 
        type="text" 
        [(ngModel)]="searchQuery"
        (input)="onSearchInput(searchQuery)"
        placeholder="Введите название товара..."
        class="search-input"
        autofocus
      />
      <span class="search-icon">🔍</span>
    </div>
  </div>

  @if (searchQuery && items().length > 0) {
    <div class="results-count">
      Найдено товаров: {{ items().length }}@if (totalResults() > items().length) { из {{ totalResults() }} }
    </div>
  }

  @if (loading() && items().length === 0) {
    <div class="loading-initial">
      <div class="spinner"></div>
      <p>Поиск...</p>
    </div>
  }

  @if (error()) {
    <div class="error">
      <p>{{ error() }}</p>
      <button (click)="performSearch(searchQuery)">Попробовать снова</button>
    </div>
  }

  @if (!loading() && searchQuery && items().length === 0 && !error()) {
    <div class="no-results">
      <div class="no-results-icon">🔍</div>
      <h2>Ничего не найдено</h2>
      <p>По запросу "{{ searchQuery }}" товары не найдены</p>
      <p class="hint">Попробуйте изменить запрос или используйте другие ключевые слова</p>
    </div>
  }

  @if (items().length > 0) {
    <div class="items-grid">
      @for (item of items(); track trackByItemId($index, item)) {
        <div class="item-card">
          <a [routerLink]="['/item', item.itemID]" class="item-link">
            <div class="item-image">
              <img [src]="getMainImage(item)" [alt]="item.name" loading="lazy" decoding="async" width="300" height="300" />
              @if (item.discount > 0) {
                <div class="discount-badge">-{{ item.discount }}%</div>
              }
            </div>
            
            <div class="item-details">
              <h3 class="item-name">{{ item.name }}</h3>
              
              <div class="item-rating">
                <span class="rating-stars">⭐ {{ item.rating }}</span>
                <span class="rating-count">({{ item.callbacks?.length || 0 }})</span>
              </div>
              
              <div class="item-price">
                @if (item.discount > 0) {
                  <span class="original-price">{{ item.price }} {{ item.currency }}</span>
                  <span class="discounted-price">{{ getDiscountedPrice(item) | number:'1.2-2' }} {{ item.currency }}</span>
                } @else {
                  <span class="current-price">{{ item.price }} {{ item.currency }}</span>
                }
              </div>
              
              @if (item.remainings) {
                <div class="item-stock">
                  <div class="stock-bar">
                    <span class="bar-segment" [class.filled]="item.remainings === 'high' || item.remainings === 'medium' || item.remainings === 'low'" [class.high]="item.remainings === 'high'" [class.medium]="item.remainings === 'medium'" [class.low]="item.remainings === 'low'"></span>
                    <span class="bar-segment" [class.filled]="item.remainings === 'high' || item.remainings === 'medium'" [class.high]="item.remainings === 'high'" [class.medium]="item.remainings === 'medium'"></span>
                    <span class="bar-segment" [class.filled]="item.remainings === 'high'" [class.high]="item.remainings === 'high'"></span>
                  </div>
                </div>
              }
            </div>
          </a>
          
          <button class="add-to-cart-btn" (click)="addToCart(item.itemID, $event)">
            В корзину
          </button>
        </div>
      }
    </div>

    @if (loading() && items().length > 0) {
      <div class="loading-more">
        <div class="spinner"></div>
        <p>Загрузка...</p>
      </div>
    }

    @if (!hasMore() && items().length > 0) {
      <div class="no-more">
        <p>Все результаты загружены</p>
      </div>
    }
  }

  @if (!searchQuery) {
    <div class="empty-state">
      <p>Введите запрос для поиска товаров</p>
    </div>
  }
</div>