<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-title class="ion-text-center">{{ 'CHANGE_DIRECTION_TITLE' | translate }}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="cancel(false)" strong color="light">{{ 'all.close' | translate}}</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-button color="secondary" expand="block" fill="solid" (click)="addNewAddress()">{{ 'BUTTON_NEW_ADDRESS' | translate }}</ion-button>

  <ion-list *ngIf="infoUser" margin-top>
    <ion-list-header no-margin> {{ 'TITLE_ADDRESS_LIST' | translate }} </ion-list-header>
    <ion-item *ngFor="let address of infoUser.addresses" (click)="changeAddressUser(address.id,address.last_used)">
      <ion-label>
        <h2>{{address.tag}}</h2>
        <p>{{address.direction}}</p>
      </ion-label>
      <ion-icon *ngIf="address.last_used" name="checkmark-circle-outline" slot="end"></ion-icon>
    </ion-item>
  </ion-list>

  <ion-list *ngIf="listSucursals && sucursalSelected">
    <ion-list-header no-margin> {{ 'TITLE_CHANGE_SUCURSAL' | translate }} </ion-list-header>
    <ion-item *ngFor="let sucursal of listSucursals" (click)="changeSucursal(sucursal)">
      <ion-label>
        <p>{{ sucursal.name }}</p>
      </ion-label>
      <ion-icon *ngIf="sucursalSelected.id == sucursal.id" name="checkmark-circle-outline" slot="end"></ion-icon>
    </ion-item>
  </ion-list>

  <ion-list *ngIf="listCities && cityConnection">
    <ion-list-header no-margin> {{ 'TITLE_CHANGE_LOCATION' | translate }} </ion-list-header>
    <ion-item *ngFor="let city of listCities" (click)="changeCity(city)">
      <ion-label>
        <p>{{ city.name }}</p>
      </ion-label>
      <ion-icon *ngIf="cityConnection.id == city.id" name="checkmark-circle-outline" slot="end"></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>