<ion-header class="ion-no-border background-white px-20 pt-25">
  <div class="title-content d-flex">
<!--     <div class="back-icon">
      <ion-icon class="font-35" (click)="goBack()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
    </div> -->
    <div class="div-title">
      <ion-label class="title">{{ publicationTitle }}</ion-label>
    </div>
  </div>
</ion-header>

<ion-content>
<div class="content-container">

  <div  *ngIf="publicationType!='1'" class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
    <ion-input [(ngModel)]="pub.Title" name="title" placeholder="Título" ></ion-input>
  </div>

  <div *ngIf="publicationType!='1' " class="container-div pb-20">
    <div class="ion-item-class-2 d-flex">
      <div class="ion-icon-class" >
        <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
      </div>
      <div class="ion-textarea-class flex-grow-1" [class.input-error]="Form?.get('Message')?.invalid && validateFrom ">
        <ion-textarea [(ngModel)]="pub.Message" name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto..."></ion-textarea>
      </div>
    </div>
  </div>

  <div class="picture d-flex pb-5 hide-desktop" *ngIf="publication.FileBase64  && capturedImage ==''">
    <div  class="post-img">
      <img src="{{publication.FileBase64}}" alt="image" >
    </div>
    <div class="d-flex flex-column pl-10">
      <div class="picture-file-name">{{publication.OriginalFileName}}.{{publication.FileExtension}}</div>
      <div class="size">75 Kb</div>
    </div>
    <div class="flex-grow-1 d-flex align-center justify-end">
      <div style="color: red;">X</div>
    </div>
  </div>

  <div *ngIf="capturedImage != ''" class="ion-item-container-no-border">
    <ion-label class="attached-title">Fotografia Anexada</ion-label>
    <ion-item lines="none">
      <ion-thumbnail slot="start">
        <ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="capturedImage"></ion-img>
      </ion-thumbnail>

      <ion-label>
        <p>{{capturedImageTitle}}</p>
        <p hidden>size</p>
      </ion-label>
      <button class="btn-no-color" (click)="clear()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-item>

  </div>

  <div class="ion-item-container-no-border hide-desktop">
    <ion-label (click)="takePicture()">
      <div class="attach-icon">
        <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photo.svg"></ion-icon>
            <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon>
      </div>
      <div class="attach-document cursor-pointer">
        <ion-label>Tirar Fotografia</ion-label>
      </div>
      </ion-label>
  </div>

  <div class="ion-item-container-no-border">
    <ion-label (click)="laodPicture()" class="cursor-pointer">
      <div class="attach-icon">
        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photos.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photos.svg"></ion-icon>
      </div>
      <div class="attach-document cursor-pointer">
        <ion-label>Anexar Fotografia</ion-label>
      </div>
    </ion-label>
  </div>
</div>

</ion-content>

<ion-footer class="ion-no-border">
  <ion-toolbar class="footer-toolbar width-100 px-20">
    <ion-buttons slot="start">
      <button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
        <ion-label>Cancelar</ion-label>
      </button>
    </ion-buttons>
    <ion-buttons slot="end">
      <button class="btn-ok" fill="clear" color="#fff" (click)="save()">
        <ion-label>Gravar</ion-label>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>
