<ion-content>
  <div class="head-title">
    <ion-toolbar  class="header-toolbar">
      <ion-buttons slot="start">
        <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
      </ion-buttons>
      <ion-title color="light" >{{ts.trPK('itemforsale','title')}}</ion-title>
    </ion-toolbar>
  </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()"><ion-icon name="add"></ion-icon></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 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">
           <ion-icon name="images"></ion-icon>
          </div>
          <div class="bottom-icon">
            <p>Mobile & Tablets</p>
          </div>
         </div>
      </div>
      <div class="box-icon">
        <div class="sale-icon">
          <div class="top">
           <ion-icon name="images"></ion-icon>
          </div>
          <div class="bottom-icon">
            <p>Mobile & Tablets</p>
          </div>
         </div>
      </div>
      <div class="box-icon">
        <div class="sale-icon">
          <div class="top">
           <ion-icon name="images"></ion-icon>
          </div>
          <div class="bottom-icon">
            <p>Mobile & Tablets</p>
          </div>
         </div>
      </div>
      <div class="box-icon">
        <div class="sale-icon">
          <div class="top">
           <ion-icon name="images"></ion-icon>
          </div>
          <div class="bottom-icon">
            <p>Mobile & Tablets</p>
          </div>
         </div>
      </div>
      <div class="box-icon">
        <div class="sale-icon">
          <div class="top">
           <ion-icon name="images"></ion-icon>
          </div>
          <div class="bottom-icon">
            <p>Mobile & Tablets</p>
          </div>
         </div>
      </div>
    </div>

<ion-row>
  <ion-col size="6" (click)="openDetails()">
    <ion-card>
      <ion-card-header>
        <img src="assets/imgs/itemsforsale/furniture.svg" />
      
        <ion-card-title>Card Title</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">
            <ion-icon name="arrow-round-forward"></ion-icon>
          </ion-col>
        </ion-row>
         
      </ion-card-content>
     </ion-card>
  </ion-col>
  <ion-col size="6">
    <ion-card>
      <ion-card-header>
        <img src="assets/imgs/itemsforsale/furniture.svg" />
      
        <ion-card-title>Card Title</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">
            <ion-icon name="arrow-round-forward"></ion-icon>
          </ion-col>
        </ion-row>
         
      </ion-card-content>
     </ion-card>
  </ion-col>
</ion-row>

</div>

<div class="my-ads" *ngIf="segment =='2'">
  <ion-row>
  <ion-item button (click)="testClick()">
    <ion-thumbnail slot="start">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
    </ion-thumbnail>
    <ion-label>
      <h3>Furniture Table</h3>
      <p>good condition only 6th month used with bed and mattress</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>
  