<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Mi Perfil
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

    <div class='main'>
      <ion-grid>
      <ion-row>
      <div class='fotoPerfil'>
          <ion-img class="fotoPerfil" width="100%" height="100%" [src]='fotoSrc' alt='barraquinha'></ion-img>
          <div class="textoPie">{{nombre}}</div>
          <div class="menuBotones">

            <button mat-icon-button [matMenuTriggerFor]="menu">
              <ion-icon name="settings" class="settingsIcon"></ion-icon>
            </button>
    
            <mat-menu #menu="matMenu" xPositon="after" yPosition="above"> 
            <button mat-menu-item>
              <ion-icon name="image" slot="icon-only"></ion-icon>
              <input type="file" (change)="loadImageFromDevice($event);cargarImagen()" id="file-input-perfil" accept="image/png, image/jpeg">
            </button>
    
    
            <button mat-menu-item (click)="enableEdit()" label="editar" [disabled]='editEnabled'>
              <ion-icon name="create"></ion-icon>
            </button>
    
    
            <button mat-menu-item (click)="addEvento()">
              <ion-icon name="add-circle-outline">
              </ion-icon>
              Añadir evento
            </button>
          </mat-menu>
          </div>
      </div>
      </ion-row>

      <ion-row>
        <div class="botonesHidden">
          <button (click)="saveEdit()" label="guardar" [disabled]='editDisabled' id="botonesHidden1">
            <ion-icon name="save"></ion-icon>
            </button>
            <button (click)="cancelEdit()" [disabled]='editDisabled' id="botonesHidden2">
              Cancelar
            </button>
        </div>
      </ion-row>


      <ion-row>
        <ion-col>
          <div id="cajaDatos" class='datosDisplay'>
            <div class="datosLabel">Teléfono: </div>
            <div [contentEditable]='editEnabled'>{{telefono}}</div>
            <div class="datosLabel">Localización: </div>
            <div [contentEditable]='editEnabled'>{{localizacion}}</div>
          </div>
        </ion-col>
        <ion-col>
          <div>
            <mat-card>
              <mat-card-header>
                Descripción
              </mat-card-header>
              <mat-card-content>
                {{descripcion}}
              </mat-card-content>
            </mat-card>
          </div>
        </ion-col>
      </ion-row>

      <ion-row>
          <div class="galeria">
            Galería de Fotos

            <input type="file" (change)="loadImageFromDevice($event)" id="file-input-galeria" accept="image/png, image/jpeg">
            <ion-slides (ionDrag)="onSlideChanged()" [options]="sliderOpts">
              <ion-slide *ngFor="let foto of galeriaFotos">
                <div class="fotoGaleria"><img src="{{foto}}" tappable (click)="openPreview(foto)">
                  <div class="botonesHidden"  id="botonesHidden3">
                    <ion-button (click)="borrarDeGaleria()">
                      <ion-icon name="trash-outline"></ion-icon>
                    </ion-button>
                  </div>
                </div>
              </ion-slide>
            </ion-slides>
          </div>
      </ion-row>
      
      <ion-row>
        <div *ngIf="eventos.length>0" class="eventos">
          <ion-list>
              <ion-item *ngFor="let evento of eventos" button (click)="mostrarEvento(evento)">
              <div class="evento">
                <div class="eventoHeader">
                {{evento.nombre}} · 
                <ion-icon name="calendar-outline"></ion-icon>
                {{evento.fecha}} · 
                <ion-icon name="cash-outline"></ion-icon>
                {{evento.precio1}},{{evento.precio2}}
                <ion-button (click)="editarEvento(evento);$event.stopPropagation();"><ion-icon name="pencil-outline"></ion-icon></ion-button>
                </div>
                <div class="eventoDesc">
                {{evento.descripcion}}
                </div>
              </div>
              </ion-item>
          </ion-list>
        </div>
      </ion-row>

      <ion-row>
      
      </ion-row>
    </ion-grid>  
    </div>

</ion-content>