<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"></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">
        <div class="sale-icon">
          <div class="top">
         <img src="assets/imgs/itemsforsale/mobile.svg">
          </div>
          <div class="bottom-icon">
            <p>Mobile & Tablets</p>
          </div>
         </div>
      </div>
      <div class="box-icon">
        <div class="sale-icon">
          <div class="top">
            <img src="assets/imgs/itemsforsale/cars.svg">
          </div>
          <div class="bottom-icon">
            <p>Cars & Vehicle</p>
          </div>
         </div>
      </div>
      <div class="box-icon">
        <div class="sale-icon">
          <div class="top">
            <img src="assets/imgs/itemsforsale/electronic_appliances.svg">
          </div>
          <div class="bottom-icon">
            <p>Electronic Appliance</p>
          </div>
         </div>
      </div>
      <div class="box-icon">
        <div class="sale-icon">
          <div class="top">
            <img src="assets/imgs/itemsforsale/fashion.svg">
          </div>
          <div class="bottom-icon">
            <p>Fashion & Beauty</p>
          </div>
         </div>
      </div>
      
    </div>
<div class="grid-row">
<ion-row >
  <ion-col size="6" (click)="openDetails()">
    <ion-card>
      <ion-card-header>
        <img src="https://ii1.pepperfry.com/media/catalog/product/r/o/568x625/royal-wing-chair-in-blue-color-by-dreamzz-furniture-royal-wing-chair-in-blue-color-by-dreamzz-furnit-6hcjya.jpg" />
      
        <ion-card-title>Furniture Table</ion-card-title>
      </ion-card-header>
    
      <ion-card-content>
        Keep close to Nature's heart... and break
        <p class="orange">
          Used
        </p>
        <ion-row>
          <ion-col size="10">
            <strong>
              500 SAR
            </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>
  <ion-col size="6" (click)="openDetails()">
    <ion-card>
      <ion-card-header>
        <img src="https://ii1.pepperfry.com/media/catalog/product/r/o/568x625/royal-wing-chair-in-blue-color-by-dreamzz-furniture-royal-wing-chair-in-blue-color-by-dreamzz-furnit-6hcjya.jpg" />
      
        <ion-card-title>Furniture Table</ion-card-title>
      </ion-card-header>
    
      <ion-card-content>
        Keep close to Nature's heart... and break
        <p class="green">
          New
        </p>
        <ion-row>
          <ion-col size="10">
            <strong>
              500 SAR
            </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>
</ion-row>
</div>
</div>

<div class="my-ads" *ngIf="segment =='2'">
  <ion-row>
  <ion-item button detail="false">
    <ion-thumbnail slot="start">
      <img src="https://ii1.pepperfry.com/media/catalog/product/r/o/568x625/royal-wing-chair-in-blue-color-by-dreamzz-furniture-royal-wing-chair-in-blue-color-by-dreamzz-furnit-6hcjya.jpg" />
    </ion-thumbnail>
    <ion-label class="label-thumb">

      <h3>Furniture Table</h3>
      <p class="posted-on">
        Posted on 24 April 2021
      </p>
      <p class="details-text">good condition only 6th month used </p>
      <ion-row>
        <ion-col size="8">
          <p class="yellow">Pending Review</p>
        </ion-col>
        <ion-col>
          <img class="icon" src="assets/imgs/itemsforsale/delete.svg" />
          <img class="icon edit" src="assets/imgs/itemsforsale/edit.svg" />  
        </ion-col>
      </ion-row>
    </ion-label>
  
  </ion-item>
</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>
  