<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button icon="arrow-round-back"></ion-back-button>
    </ion-buttons>
    <ion-title> {{'Shipping Address'| translate }} </ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear" (click)="getLocationAddress()">
        <ion-icon name="locate"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  <form #loginForm="ngForm">
    <ion-item>
      <ion-label position="floating">{{'First Name'|translate}}</ion-label>
      <ion-input type="text" name="shipping_firstname" [(ngModel)]="shared.shipping.first_name" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">{{'Last Name'|translate}}</ion-label>
      <ion-input type="text" name="shipping_lastname" [(ngModel)]="shared.shipping.last_name" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">{{'Compnay'|translate}}</ion-label>
      <ion-input type="text" name="company" [(ngModel)]="shared.shipping.company"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">{{'Address'|translate}} 1</ion-label>
      <ion-input type="text" name="address" [(ngModel)]="shared.shipping.address_1" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">{{'Address'|translate}} 2</ion-label>
      <ion-input type="text" name="address2" [(ngModel)]="shared.shipping.address_2"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">{{'Country'|translate}}</ion-label>
      <ion-input type="text" name="shipping_country" tappable (click)="selectCountryPage()" readonly
        [(ngModel)]="shared.shippingCountryName" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">{{'State'|translate}}</ion-label>
      <ion-input type="text" required name="shipping_zone" tappable (click)="selectZonePage()" readonly
        [(ngModel)]="shared.shippingStateName"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">{{'City'|translate}}</ion-label>
      <ion-input type="text" name="shipping_city" [(ngModel)]="shared.shipping.city" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">{{'Post code'|translate}}</ion-label>
      <ion-input type="text" name="shipping_postcode" [(ngModel)]="shared.shipping.postcode" required></ion-input>
    </ion-item>
  </form>
</ion-content>

<ion-footer>
  <ion-button expand="full" color="secondary" (click)="submit()" [disabled]="disableButton()">{{'Next'|translate}}
  </ion-button>
</ion-footer>