<div class="bg-white border" *ngIf="(photo$ | async) as photo">
  <div class="row">
    <div class="col-lg-8">
      <app-photo
        [url]="photo.url"
        [description]="photo.description"
      ></app-photo>
    </div>

    <div class="col-lg-4">
      <small>
        <p class="text-left break-word">{{ photo.description }}</p>
        <div class="text-left mb-4">
          <i
            (click)="like(photo)"
            showIfLogged
            class="fa fa-heart-o fa-2x mr-2 pull-left"
          >
            {{ photo.likes }}
          </i>
          <i class="fa fa-comment-o fa-2x mr-2 ml-2"></i>{{ photo.comments }}
          <i
            photoOwnerOnly
            [ownedPhoto]="photo"
            (click)="remove()"
            class="fa fa-trash-o fa-2x pull-right"
          ></i>
        </div>
        <hr />
      </small>

      <app-photo-comments
        *ngIf="photo.allowComments; else warning"
        [photoId]="photoId"
      >
      </app-photo-comments>
      <ng-template #warning>
        <p>User has disabled comments for this photo</p>
      </ng-template>
    </div>
  </div>
</div>
