<ion-header>
  <ion-toolbar>
    <ion-title>Eventos Próximos</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
  <ion-row>
    <ion-col size="12">
    <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}}
            </div>
            <div class="eventoDesc">
            {{evento.descripcion}}
            </div>
            <div class="discotecaEvento">
              {{discotecas[idsDiscoteca.indexOf(evento.discotecaID)]?.nombre}}
            </div>
          </div>
          </ion-item>
      </ion-list>
    </div>
  </ion-col>
  </ion-row>
</ion-grid>
</ion-content>