<ion-header class="ion-no-border">
  <ion-toolbar class="ion-text-center">
    <ion-title>{{ 'TITLE_ADDRESS_MAP' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <capacitor-google-map id="map"></capacitor-google-map>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-grid *ngIf="!statusEditMarker">
      <ion-row class="display_center">
        <ion-label class="ion-text-center"><ion-icon name="pin-outline"></ion-icon> {{addressEdit}}</ion-label>
      </ion-row>
      <ion-row class="display_center">
        <ion-label class="ion-text-center">{{ 'ADDRESS_MAP_TITLE_FOOTER1' | translate }}</ion-label>
      </ion-row>
      <ion-row class="display_center">
        <ion-col col-6 class="ion-no-padding ion-no-margin">
          <ion-button expand="block" fill="solid" (click)="editLocationAddress()"> {{ 'BUTTON1_FOOTER1' | translate}}</ion-button>
        </ion-col>
        <ion-col col-6 class="ion-no-padding ion-no-margin">
          <ion-button color="secondary" expand="block" fill="solid" (click)="exitUpdateLocation()"> {{ 'BUTTON2_FOOTER1' | translate}}</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>

    <ion-grid *ngIf="statusEditMarker">
      <ion-row class="display_center">
        <ion-label class="ion-text-center"
          >{{ 'ADDRESS_MAP_TITLE1_FOOTER2' | translate}}<ion-icon name="pin-outline"></ion-icon>{{ 'ADDRESS_MAP_TITLE2_FOOTER2' |
          translate}}</ion-label
        >
      </ion-row>
      <ion-row class="display_center">
        <ion-label class="ion-text-center">{{ 'ADDRESS_MAP_TITLE3_FOOTER2' | translate}}</ion-label>
      </ion-row>
      <ion-row class="display_center">
        <ion-col col-12 class="ion-no-padding ion-no-margin">
          <ion-button expand="block" fill="solid" (click)="updateLocationAddressUser()"> {{ 'TUTORIAL_CONTINUE_BUTTON' | translate }}</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>