<ion-header>
  <ion-toolbar>

    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span ion-text color="primary">Cancel</span>
      </button>
    </ion-buttons>

    <ion-title>{{ title }}</ion-title>

  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-content>
      <ion-item>
        <ion-textarea [(ngModel)]="ptext" autocomplete="true" spellcheck="true" clearInput="true" rows="8"></ion-textarea>
      </ion-item>
    </ion-card-content>
    <ion-row justify-content-end>
      <ion-col offset-0>
        <button ion-button (click)="attachImage()">
          <ion-icon name="attach"></ion-icon>
        </button>
      </ion-col>
      <ion-col col-2><div text-center>{{textCount()}}</div></ion-col>
      <ion-col col-2>
        <button ion-button (click)="send()">
          <ion-icon name="send"></ion-icon>
        </button>
      </ion-col>
    </ion-row>
    <progress id='p' *ngIf="showProgress"></progress>
    <ion-list>
      <ion-item *ngFor="let f of files">
        <ion-thumbnail item-start>
          <img src="{{ f.link }}">
        </ion-thumbnail>
        <p>{{ f.name }}</p>
        <button ion-button color="dark" clear item-end (click)="unattach(f.id)">
          <ion-icon name="remove-circle"></ion-icon>
        </button>
      </ion-item>
    </ion-list>
  </ion-card>
</ion-content>
