<ion-header class="ion-no-border">
  <app-header></app-header>
</ion-header>

<ion-content>
  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
    <ion-refresher-content>
    </ion-refresher-content>
  </ion-refresher>

  <div class="content-container">
    <div *ngIf="publication.Title != ''" class="d-flex flex-column height-100">
      <div class="title-content px-20 width-100 ">
        <div class="back-icon cursor-pointer"  (click)="goBack()">
          <ion-icon *ngIf="ThemeService.currentTheme == 'default' "  slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "  slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
        </div>
        <div class="div-title">
          <ion-label class="title"> {{publication.Title}}</ion-label>
          <p class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</p>
        </div>
      </div>

      <div class="post-item overflow-y-auto">
        <div (click)="openPreview(publication)" *ngIf="publication.FileBase64.length > 30" class="post-img">
          <img src="{{publication.FileBase64}}" alt="image" >
        </div>
        <div *ngIf="publication.FileBase64.length < 30" class="post-img">
          <img src="/assets/icon/icon-no-image.svg" alt="image">
        </div>
        <div class="post-description px-20">
          <p>{{publication.Message}}</p>
        </div>
      </div>
    </div>

    <div *ngIf="publication.Title == ''" class="d-flex flex-column">
      <div class="title-content width-100">
        <div class="back-icon cursor-pointer">
          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " (click)="close()" slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
        </div>
        <div class="div-title">
          <ion-label class="title"><ion-skeleton-text animated style="width: 60%;"></ion-skeleton-text></ion-label>
          <p class="post-data"><ion-skeleton-text animated style="width: 20%;"></ion-skeleton-text></p>
        </div>
      </div>
      <div class="post-item overflow-y-auto">
        <div class="post-img">
          <img src="/assets/icon/icon-no-image.svg" alt="image">
        </div>
        <div class="post-description">
          <p><ion-skeleton-text animated></ion-skeleton-text></p>
          <p><ion-skeleton-text animated></ion-skeleton-text></p>
        </div>
      </div>

    </div>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar class="footer-toolbar">
    <ion-buttons slot="start">
      <button class="btn-delete" fill="clear" color="#ffe0e0" (click)="deletePost()">
        <ion-label>Eliminar</ion-label>
      </button>
    </ion-buttons>
    <ion-buttons slot="end">
      <button class="btn-ok" fill="clear" color="#fff" (click)="editPost('3')">
        <ion-label>Editar</ion-label>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

