<ion-content no-padding [style.backgroundImage]="getBackground(profile.details.pic)" (press)="showLightbox($event, profile.details.pic.detail)" on-swipe-left="nextProfile($event)" on-swipe-right="previousProfile($event)">
  <ion-toolbar class="profile-toolbar">
    <ion-buttons left>
      <button ion-button icon-only (tap)="closeProfile($event)">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>{{this.profile.details.name}}</ion-title>
  </ion-toolbar>

  <button ion-button icon-only clear large (tap)="openChat($event, this.profile)" class="button-chat">
    <ion-icon name="ios-chatboxes"></ion-icon>
  </button>

  <div id="detail-overlay" class="details">
    <ion-grid>
      <ion-row nowrap align-items-center justify-content-between>
        <ion-col col-12 text-center (click)="toggleProfileDetails($event)" class="detail-toggle">
          <ion-icon name="arrow-down"></ion-icon>
        </ion-col>
      </ion-row>
      <ion-row class="about" *ngIf="this.profile.details.about">
        <ion-col col-12 [innerHTML]="this.profile.details.about"></ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>
