<|start_filename|>client/src/app/shared/product-content/product-content.component.html<|end_filename|>
<div class="product-content">
    <div class="product-detail">
      <h1 class="product-title">{{ product?.title }}</h1>
      <h2 class="product-description">{{ product?.description }}</h2>
      <div class="product-info">
        <div class="product-stock">
          {{ product?.stock | translate | async }}
        </div>
        <div
          class="product-price">
          <span>{{ product?.salePrice | priceFormat }} {{ currency }}</span>
          <span class="product-before-price" *ngIf="product.regularPrice">
            {{ product?.regularPrice | priceFormat }} {{ currency }}
          </span>
        </div>
        <button class="product-cart-wrap"
          *ngIf="lang"
          mat-raised-button
          color="primary">
          <app-cart-show *ngIf="cartIds && product"
            [items]="cartIds[product._id]"
            (add)="onAddProduct(product._id)"
            (remove)="onRemoveProduct(product._id)">
          </app-cart-show>
        </button>
      </div>
      <mat-chip-list class="product-tags">
        <mat-chip class="clickable"
          *ngFor="let tag of product.tags"
          [routerLink]="[ '/' + lang + '/product/category/' + tag]">
          {{ categoriesToShow[tag] || tag }}
        </mat-chip>
      </mat-chip-list>
      <a class="product-more" *ngIf="withLink" [routerLink]="[ '/' + lang + '/product/' + product.titleUrl]">
        {{ "More" | translate | async }}
      </a>
    </div>
    <div class="product-main-image"
        [attr.aria-labelledby]="product.mainImage.name"
        lazySrc
        [lazyBackground]="'url(' + product?.mainImage?.url + ') no-repeat'"
        lazySrcVisible="visible">
    </div>
  </div>


<|start_filename|>client/src/app/shared/order-info/order-info.component.html<|end_filename|>
<mat-progress-bar mode="indeterminate" *ngIf="!order"></mat-progress-bar>
<ng-container *ngIf="order">
  <mat-card class="card">
    <mat-card-content class="order-top-content">
      <div>
        <h4>{{ order?.orderId }}</h4>
        <div class="product-info">
          <div class="stock">
            Status: {{ order?.status }}
          </div>
          <div class="price">{{ 'Amount' | translate | async }}: {{ order?.amount }} {{ order.currency }}</div>
        </div>
        <mat-chip-list class="order-tags">
          <mat-chip>{{ 'Customer' | translate | async }}: {{ order?.customerEmail }}</mat-chip>
        </mat-chip-list>
      </div>
      <div>
        <p *ngIf="order?.description">{{ 'Description' | translate | async }}: {{ order?.description }}</p>
        <p>{{ 'Customer' | translate | async }}: {{ order?.customerEmail }}</p>
        <p>{{ 'Created' | translate | async }}: {{ order.dateAdded | date: 'dd-MM-yy' }}</p>
        <p>{{ 'Paid' | translate | async }}: {{ order?.outcome?.seller_message }}</p>
        <p>{{ 'Total_price' | translate | async }}: {{ order?.cart?.totalPrice }}</p>
        <p>{{ 'Total_quantity' | translate | async }}: {{ order?.cart?.totalQty }}</p>
      </div>
    </mat-card-content>
    <mat-card-content class="order-content">
      <div *ngIf="order.addresses[0] as address">
        <h4>{{ 'About_customer' | translate | async }}</h4>
        <p>{{ 'City' | translate | async }}: {{ address.city }}</p>
        <p>{{ 'Country' | translate | async }}: {{ address.country }}</p>
        <p>{{ 'Address' | translate | async }}: {{ address.line1 }}</p>
        <p>{{ 'Zip' | translate | async }}: {{ address.zip }}</p>
        <p *ngIf="address.name">{{ 'Name' | translate | async }}: {{ address.name }}</p>
        <br />
      </div>
      <div>
        <h4 class="order-cart-title">Cart</h4>
        <div *ngFor="let cartItem of order?.cart?.items">
          <div class="order-cart">
            <a [routerLink]="['/' + lang + '/product/' + cartItem?.item?.titleUrl]">
              <img class="order-cart-img" src="{{ cartItem?.item?.mainImage?.url }}" />
            </a>
            <div class="order-cart-text">
              <span>{{ cartItem.qty }} ks </span> {{ cartItem?.item.title }} <br />
              <span>{{ cartItem.price }} {{ order.currency }}</span>
            </div>
          </div>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</ng-container>

<|start_filename|>client/src/app/shared/sidebar/sidebar.component.html<|end_filename|>
<div class="sidebar">
  <div class="sidebar-header sidebar-header-top">
    <h3 class="sidebar-title">{{ 'Categories' | translate | async }}</h3>
  </div>
  <a class="sidebar-item"
    [routerLink]="['/' + lang + '/product/all']"
    [class.active]="!activeCategory">
    {{ 'All' | translate | async }} {{ 'products' | translate | async }}
  </a>
  <ng-container   *ngFor="let category of categories; trackBy: trackById">
    <a class="sidebar-item"
    *ngIf="!category.menuHidden"
    (click)="changeCategory.emit(category.titleUrl)"
    [routerLink]="['/' + lang + '/product/category/' + category.titleUrl]"
    [class.active]="activeCategory == (category.titleUrl)">
    {{category.title}}
  </a>
  </ng-container>

  <div class="sidebar-sort-wrap">
    <div class="sidebar-header">
      <h3 class="sidebar-title">{{ 'Sorting' | translate | async }}</h3>
    </div>
    <mat-form-field class="sidebar-select">
      <mat-select
        aria-label="Sort"
        [ngModel]="choosenSort || 'newest'"
        (ngModelChange)="onInputChange($event)">
        <mat-option
          *ngFor="let option of sortOptions;"
          [value]="option.id">
          {{ option.name | translate | async }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div class="sidebar-header">
    <h3 class="sidebar-title">{{ 'PriceRange' | translate | async }}</h3>
  </div>
  <mat-slider
    #ref
    aria-label="Range"
    class="sidebar-range"
    [max]="maxPrice"
    [min]="minPrice"
    (change)="onChangePrice($event, ref.value)"
    [(ngModel)]="(maxPrice < price) ? maxPrice : price">
  </mat-slider>
  {{ 'Price' | translate | async }} {{ 'to' | translate | async }}:
  {{ ref.value | priceFormat }} {{ currency }}
</div>


<|start_filename|>client/src/app/modules/cart/summary/summary.component.html<|end_filename|>
<div class="main">
  <div class="container">
    <button
      (click)="goBack()"
      mat-raised-button
      color="primary">
      <i class="material-icons left">arrow_back</i>
      {{ 'Back' | translate | async }}
    </button>

    <h2>
      {{ 'SuccessOrder' | translate | async }}
    </h2>
    <app-order-info
      [order]="order$ | async"
      [lang]="lang$ | async">
    </app-order-info>

  </div>
</div>


<|start_filename|>client/src/app/modules/order/components/orders-list/orders-list.component.html<|end_filename|>
<div class="main">
  <div class="container">
    <mat-progress-bar *ngIf="!orders" mode="indeterminate"></mat-progress-bar>
    <div class="orders-list-wrapper" *ngIf="orders">
      <div class="card scale-transition"
        *ngFor="let order of orders">
        <div class="card-action">
          <p>{{ 'Status' | translate | async }}: {{ order?.status }}</p>
          <div class="action-wrap">
            <button
              mat-raised-button
              color="primary"
              [routerLink]="[orderUrl + order?.orderId]">
              {{ 'Detail' | translate | async }}
            </button>
          </div>
          <br/>
          <div class="price-card">{{ 'Amount' | translate | async }}: {{ order?.amount }} {{ order?.currency }}</div>
          <br/>
          <p>{{ 'Type' | translate | async }}: {{ order?.type }}</p>
          <p>{{ 'Customer' | translate | async }}: {{ order?.customerEmail }}</p>
          <p>{{ 'Created' | translate | async }}: {{ order.dateAdded | date:'dd-MM-yy' }}</p>
          <p>{{ 'Paid' | translate | async }}: {{ order?.outcome?.seller_message }}</p>
        </div>
      </div>
    </div>
  </div>
</div>


<|start_filename|>client/src/app/modules/eshop/contact/contact.component.html<|end_filename|>
<div class="main">
  <div class="container">
    <div class="contact-form-wrap">
      <h1 class="contact-title">{{'Contact' | translate | async }}</h1>
      <form class="contact-form"
        [formGroup]="contactForm">
        <mat-form-field class="contact-field">
          <mat-label>
            {{'Firstname' | translate | async }} {{ 'and' | translate | async }} {{ 'Surname' | translate | async }}
          </mat-label>
          <input
            matInput
            formControlName="name"
            type="text"
            name="contantName">
        </mat-form-field>
        <mat-form-field class="contact-field">
          <mat-label>Email</mat-label>
          <input
            matInput
            formControlName="email"
            type="email"
            name="email">
        </mat-form-field>
        <mat-form-field class="contact-field">
          <mat-label>{{'Notes' | translate | async }}</mat-label>
          <textarea
            matInput
            formControlName="notes"
            name="notes">
          </textarea>
        </mat-form-field>
        <button
          type="submit"
          class="submit-contact-button"
          mat-raised-button
          color="primary"
          [disabled]="contactForm.invalid"
          (click)="submit()">
          {{ 'SendContact' | translate | async }}
        </button>
        <mat-progress-bar
          *ngIf="(loading$ | async)"
          mode="indeterminate"></mat-progress-bar>
      </form>
      <div *ngIf="(sendRequestSub$ | async)">
        <span
          class="contact-error"
          *ngIf="(error$ | async) as error">
            {{error | translate | async }}
           </span>
        <span
          class="contact-success"
          *ngIf="!(error$ | async)">
            {{'CONTACT_SEND_SUCCESS' | translate | async }}
          </span>
      </div>
    </div>
  </div>
</div>


<|start_filename|>client/src/app/shared/products-list/products-list.component.html<|end_filename|>
<ng-container *ngFor="let product of products; trackBy: trackById;">
  <div class="product_card">
    <div class="product_card-header">
      <div class="product_card-top">
          <h2 class="product_card-title"> {{product?.title}} </h2>
          <span class="product_card-top-links">
            <a class="product_card-detail"
              [routerLink]="[ '/' + lang + '/product/' + product?.titleUrl]">
              {{ 'Detail' | translate | async }}
            </a>
            <a class="product_card-detail" *ngIf="showEdit" (click)="onEditProduct(product?.titleUrl)">
              {{ 'Edit' | translate | async }}
            </a>
          </span>
      </div>
      <div class="product_card-info">
        <p class="product_card-description">{{product?.description}}</p>
      </div>
    </div>
    <a class="product_card-image"
      [routerLink]="[ '/' + lang + '/product/' + product?.titleUrl]"
      [attr.aria-labelledby]="product?.titleUrl"
      lazySrc [lazyBackground]="'url(' + product.mainImage.url + ')'"
      lazySrcVisible="visible">
    </a>
    <div class="product_card-before-price" *ngIf="product.onSale && product.regularPrice">
      {{product.regularPrice }} {{ currency }}
    </div>
    <div class="product_card-action">
      <div class="product_card-action-wrap">
        <div class="product_card-price-info">
          {{ product?.salePrice | priceFormat }} {{ currency }}
        </div>
        <p class="product_card-stock">{{ product?.stock | translate | async }}</p>
        <app-cart-show *ngIf="cartIds"
          [items]="cartIds[product?._id]"
          (add)="onAddProduct(product?._id)"
          (remove)="onRemoveProduct(product?._id)">
        </app-cart-show>
      </div>
    </div>
  </div>
</ng-container>


<|start_filename|>client/src/app/modules/order/components/order-detail/order-detail.component.html<|end_filename|>
<div class="main">
  <div class="container">
    <button (click)="goBack()" mat-raised-button color="primary">
      <i class="material-icons left">arrow_back</i>
      {{ 'Back' | translate | async }}
    </button>
    <mat-progress-bar mode="indeterminate" *ngIf="!(order$ | async)"></mat-progress-bar>
    <ng-container *ngIf="order$ | async as order">
      <mat-card class="card">
        <mat-card-content class="order-top-content">
          <div>
            <h4>{{ order?.orderId }}</h4>
            <div class="product-info">
              <div class="stock">
                Status: {{ order?.status }}
                <div class="order-edit-toggle" *ngIf="type === 'EDIT'" (click)="toggleForm()">
                  {{ 'Edit' | translate | async }}
                </div>
              </div>
              <div class="price">{{ 'Amount' | translate | async }}: {{ order?.amount }} {{ order.currency }}</div>
            </div>
            <div *ngIf="showForm">
              <form class="order-form" [formGroup]="statusForm">
                <mat-select aria-label="Status" formControlName="status">
                  <mat-option *ngFor="let option of statusOptions | keyvalue" [value]="option.value">
                    {{ option.value }}
                  </mat-option>
                </mat-select>
                <button
                  type="submit"
                  mat-raised-button
                  color="primary"
                  [disabled]="statusForm.invalid"
                  (click)="submit()">
                  OK
                </button>
              </form>
            </div>
            <mat-chip-list class="order-tags">
              <mat-chip>{{ 'Customer' | translate | async }}: {{ order?.customerEmail }}</mat-chip>
            </mat-chip-list>
          </div>
          <div>
            <p *ngIf="order?.description">{{ 'Description' | translate | async }}: {{ order?.description }}</p>
            <p>{{ 'Customer' | translate | async }}: {{ order?.customerEmail }}</p>
            <p>{{ 'Created' | translate | async }}: {{ order.dateAdded | date: 'dd-MM-yy' }}</p>
            <p>{{ 'Paid' | translate | async }}: {{ order?.outcome?.seller_message }}</p>
            <p>{{ 'Total_price' | translate | async }}: {{ order?.cart?.totalPrice }}</p>
            <p>{{ 'Total_quantity' | translate | async }}: {{ order?.cart?.totalQty }}</p>
          </div>
        </mat-card-content>
        <mat-card-content class="order-content">
          <div *ngIf="order.addresses[0] as address">
            <h4>{{ 'About_customer' | translate | async }}</h4>
            <p>{{ 'City' | translate | async }}: {{ address.city }}</p>
            <p>{{ 'Country' | translate | async }}: {{ address.country }}</p>
            <p>{{ 'Address' | translate | async }}: {{ address.line1 }}</p>
            <p>{{ 'Zip' | translate | async }}: {{ address.zip }}</p>
            <p *ngIf="address.name">{{ 'Name' | translate | async }}: {{ address.name }}</p>
            <br />
          </div>
          <div>
            <h4 class="order-cart-title">Cart</h4>
            <div *ngFor="let cartItem of order?.cart?.items">
              <div class="order-cart">
                <a [routerLink]="['/' + (lang$ | async) + '/product/' + cartItem?.item?.titleUrl]">
                  <img class="order-cart-img" src="{{ cartItem?.item?.mainImage?.url }}" />
                </a>
                <div class="order-cart-text">
                  <span>{{ cartItem.qty }} ks </span> {{ cartItem?.item.title }} <br />
                  <span>{{ cartItem.price }} {{ order.currency }}</span>
                </div>
              </div>
            </div>
          </div>
        </mat-card-content>
      </mat-card>
    </ng-container>
  </div>
</div>
