
<ion-content>
  <div class="content-container d-flex flex-column">
    <div class="title-content width-100">
      <div class="div-title">
        <ion-label class="title">{{publicationTitle}}</ion-label>
      </div>
    </div>

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

      <div *ngIf="publicationType!='1'" class="container-div">
        <div class="ion-item-class-2">
          <div class="ion-icon-class">
            <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
          </div>
          <div class="ion-textarea-class" [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 *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" (click)="imageSize(capturedImage)" ></ion-img>
              <ion-row>
                <ion-col>
                  <img src="" #imageElement/>
                </ion-col>
              </ion-row>
          </ion-thumbnail>
          <ion-label>
            <p>{{capturedImageTitle}}</p>
            <p hidden>size</p>
          </ion-label>
          <div (click)="clear()">
            <ion-icon name="close"></ion-icon>
          </div>
        </ion-item>


      </div>

      <div class="picture d-flex pb-5 hide-desktop" *ngIf="publication  && capturedImage ==''">
        <div  class="post-img" *ngIf="publication.FileBase64">
          <img src="{{publication.FileBase64}}" alt="image" >
        </div>
        <div class="d-flex flex-column pl-10" *ngIf="publication.FileBase64">
          <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" *ngIf="publication.FileBase64">
          <div style="color: red;">X</div>
        </div>
      </div>

      <div class="ion-item-container-no-border">
        <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">
            <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>

  </div>

</ion-content>

<ion-footer class="ion-no-border">
  <ion-toolbar class="footer-toolbar">
    <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>
