<ion-content>
  <div class="head-title">
    <app-generic-header
    showImage="false"
    showBack="true"
    [headerText]="'itemforsale,title' | translate">
  </app-generic-header>
  </div>
  <div class="segments-container">
    <ion-segment (ionChange)="segmentChanged($event)" value="1" class="item-for-sale-indicator">
      <ion-segment-button value="1" >
        <ion-label>{{ts.trPK('itemforsale','title')}} </ion-label>
      </ion-segment-button>
      <ion-segment-button value="2">
        <ion-label>{{ts.trPK('itemforsale','my-posted-ad')}}</ion-label>
      </ion-segment-button>
    </ion-segment>
  </div>
  <div class="header"></div>
  <div class="bottom"></div>
 
  <div class="sales-items" *ngIf="segment =='1'">
    <div class="fab-button">
      <ion-fab-button class="flaot-button" (click)="openSale()"><img src="assets/imgs/itemsforsale/add.svg"></ion-fab-button>
      </div>
  <ion-grid>
    <ion-row>
     
      <ion-col size="12">
       <ion-item lines="none"  class="SearchtextBox">
        <ion-input [placeholder]="'itemforsale,search-items'| translate" (input)="search($event.target.value)"></ion-input>
       </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="10">
        <p class="filterText"> {{ts.trPK('itemforsale','browse-categories')}} </p>
      </ion-col>
      <ion-col size="2">
        <img class="filter-icon" src="assets/imgs/itemsforsale/filter.svg">
      </ion-col>
    </ion-row>
    </ion-grid>

    <div class="container-icon">
      <div class="box-icon" *ngFor="let category of categories" >
        <div class="sale-icon" [ngClass]="{'active':activeClass==category.categoryID }" (click)="selectCategory(category)">
          <div class="top"  [innerHTML]="category.content | sanitizeHTMLPipe"  >
      
          </div>
          <div class="bottom-icon">
            <p *ngIf="direction == 'ltr'">{{category.title}}</p>
            <p *ngIf="direction =='rtl'">{{category.title_Ar}}</p>
          </div>
         </div>
      </div>
    
      
    </div>
<div class="grid-row">
<ion-row  *ngIf="items">
  <ion-col size="6" (click)="openDetails(item)" *ngFor="let item of items">
    <ion-card>
      <ion-card-header>
        <img  *ngIf="item.itemAttachments[0]" [src]="getImgContent('data:image/png;base64, ' +item.itemAttachments[0].content)" />
        <img  *ngIf="!item.itemAttachments[0]" src="/assets/imgs/no-images.png" />
        <ion-card-title *ngIf="direction == 'ltr'">{{item.title}}</ion-card-title>
        <ion-card-title *ngIf="direction =='rtl'">{{item.title_Ar}}</ion-card-title>
   
      </ion-card-header>
    
      <ion-card-content>
        <span *ngIf="direction == 'ltr'">{{getDotted(item.description, 60)}}</span>
        <span *ngIf="direction =='rtl'">{{getDotted(item.description_Ar, 60)}}</span>
        <p [class]="item.status=='Approved' ? 'green' : 'yellow'">{{item.status}}</p>
        <ion-row>
          <ion-col size="10">
            <strong>
              {{item.quotePrice}} {{item.currencyCode}}
            </strong>
          </ion-col>
          <ion-col size="2">
           <img src="assets/imgs/itemsforsale/arrow.svg">
          </ion-col>
        </ion-row>
         
      </ion-card-content>
     </ion-card>
  </ion-col>
 
  <div class="no-dataDiv" *ngIf="items.length == 0" >
    <ion-row>
            <img class="empty-data" src="../assets/imgs/box.png"/>

      
    </ion-row>
    <h4>  {{ts.trPK('general','empty')}}</h4>
  </div>
</ion-row>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
  <ion-infinite-scroll-content
    loadingSpinner="bubbles"
    loadingText="Loading more data...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</div>

<div class="my-ads" *ngIf="segment =='2'">
  <ion-row>
  <ion-item button detail="false" *ngFor="let item of itemsByEmployee">
    <ion-thumbnail slot="start">
      <img  *ngIf="item.itemAttachments[0]"  [src]="getImgContent('data:image/png;base64, ' +item.itemAttachments[0].content)"  />
      <img  *ngIf="!item.itemAttachments[0]" src="assets/imgs/no-images.png" />
    </ion-thumbnail>
    <ion-label class="label-thumb">

      <h3 *ngIf="direction == 'ltr'">{{item.title}}</h3>
      <h3 *ngIf="direction =='rtl'">{{item.title_Ar}}</h3>
     
        <p class="posted-on">{{getDate(item.created) }}</p>
     
      <p class="details-text" *ngIf="direction == 'ltr'"> {{getDotted(item.description, 30)}}</p>
        <p  *ngIf="direction =='rtl'">{{getDotted(item.description_Ar, 30)}}</p>
      <ion-row>
        <ion-col size="8">
          <p [class]="item.status=='Approved' ? 'green' : 'yellow'">{{item.status}}</p>
          
        </ion-col>
        <ion-col>
          <!-- <img class="icon" src="assets/imgs/itemsforsale/delete.svg" /> -->
          <img class="icon edit" src="assets/imgs/itemsforsale/edit.svg" (click)="editItems(item)" />  
        </ion-col>
      </ion-row>
    </ion-label>
  
  </ion-item>
  <div class="space"></div>
</ion-row>

</div>

<ion-footer *ngIf="segment=='2'" >
  <div class="centerDiv">
    <ion-button  class="footer-button" ion-button (click)="openSale()">
      {{ts.trPK('itemforsale','create-new-ad')}}  </ion-button>
  
  </div>
  </ion-footer>
  
  </ion-content>
  