<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button color="light" (click)="dismissHero()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{'hero.header' | translate}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <ion-item>
        <ion-label position="floating">{{'hero.name' | translate}}</ion-label>
        <ion-input [(ngModel)]="name"></ion-input>
    </ion-item>
    <br>

    <ion-label text-wrap padding>{{'hero.categories' | translate}}</ion-label>
    <tag-input [(ngModel)]="categories_input" [onlyFromAutocomplete]="true"
    secondaryPlaceholder="{{'hero.categories_placeholder' | translate}}" placeholder="{{'hero.categories_placeholder' | translate}}"
    [ripple]="true" [animationDuration]="{enter: '10ms', leave: '10ms'}" [onTextChangeDebounce]="10">
      <tag-input-dropdown [showDropdownIfEmpty]="false" [autocompleteItems]="categories" [limitItemsTo]="5">
      </tag-input-dropdown>
    </tag-input>
    <br>

    <ion-label text-wrap padding>{{'hero.keywords' | translate}}</ion-label>
    <tag-input [(ngModel)]="keywords" secondaryPlaceholder="{{'hero.keywords_placeholder' | translate}}"
    placeholder="{{'hero.keywords_placeholder' | translate}}" [separatorKeyCodes]="[188]"
    [ripple]="true" [animationDuration]="{enter: '0ms', leave: '0ms'}">
    </tag-input>

    <ion-label color="light">_</ion-label>

    <ion-item>
      <ion-label position="floating">Dirección</ion-label>
      <ion-input [(ngModel)]="addressAutocomplete" (ionChange)="autocomplete($event)" value="{{ myAddress }}" (ionFocus)="showlist()"></ion-input>
    </ion-item>
    <ion-list *ngIf="showif">
      <ion-item button=true (click)="geoloc(places.place_id, places.description, places.terms[1].value)" *ngFor="let places of placesSearch" class="place">
        {{ places.description }}
      </ion-item>
    </ion-list>
    <ion-item hidden>
      <ion-label position="fixed">Latitud</ion-label>
      <ion-input value="{{ myPosition.latitude }}" disabled></ion-input>
    </ion-item>
    <ion-item hidden>
      <ion-label position="fixed">Longitud</ion-label>
      <ion-input value="{{ myPosition.longitude }}" disabled></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>{{'hero.discover' | translate}}</ion-label>
      <ion-select value={selectedReference} okText="Aceptar" cancelText="Cancelar" (ionChange)="selected_reference($event)">
        <ion-select-option value="1">{{'hero.radio' | translate}}</ion-select-option>
        <ion-select-option value="2">{{'hero.tv' | translate}}</ion-select-option>
        <ion-select-option value="3">{{'hero.social' | translate}}</ion-select-option>
        <ion-select-option value="4">{{'hero.friends' | translate}}</ion-select-option>
        <ion-select-option value="5">{{'hero.other' | translate}}</ion-select-option>
      </ion-select>
    </ion-item>
    <ion-item *ngIf="showinput">
        <ion-label position="floating">{{'hero.discover_details' | translate}}</ion-label>
        <ion-input [(ngModel)]="reference"></ion-input>
    </ion-item>
    <br>
    <br>
    <ion-button type="submit" expand="full" color="secondary" (click)="addHero()">{{'hero.signup' | translate}}</ion-button>
</ion-content>
