<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button (click)="close()" defaultHref="" icon="chevron-back"></ion-back-button>
    </ion-buttons>
    <ion-title>Anexos do evento</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div *ngIf="loadedEventAttachments">
    <ion-list>
      <ion-item-sliding>
        <ion-item class="main-item" lines="none" *ngFor="let att of loadedEventAttachments" (click)="viewDocument(att.Link)">
          <ion-icon style="zoom:1.5" class="ion-icon-attach" name="attach"></ion-icon>
          <ion-label class="div-content-attachment">
              <h3 class="h3">{{ att.SourceName }}</h3>
              <p>{{ att.Description }}</p>
              <p>{{ att.CreateDate }}</p>
              <p class="item-list-small">{{ att.Stakeholders }}</p>
          </ion-label> 
        </ion-item>
      </ion-item-sliding>
    </ion-list>
  </div>
  <!-- Skeleton screen -->
<div *ngIf="!loadedEventAttachments">
  <ion-list>
    <ion-item>
      <ion-avatar slot="start">
        <ion-skeleton-text animated></ion-skeleton-text>
      </ion-avatar>
      <ion-label>
        <h3>
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </h3>
        <p>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        </p>
        <p>
          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </p>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <ion-skeleton-text animated></ion-skeleton-text>
      </ion-avatar>
      <ion-label>
        <h3>
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </h3>
        <p>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        </p>
        <p>
          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </p>
      </ion-label>
    </ion-item>
  </ion-list>
</div>
</ion-content>
