<p class="text-center text-muted" *ngIf="!photos.length">Sorry, no photos :)</p>

<ol class="list-unstyled">
  <li *ngFor="let cols of rows" class="row no-gutters p-0">
    <div
      *ngFor="let photo of cols"
      class="col-4"
      appDarkenOnHover
      brightness="80%"
    >
      <a [routerLink]="['/p', photo.id]">
        <app-card>
          <app-photo
            [url]="photo.url"
            [description]="photo.description"
          ></app-photo>
          <div class="text-center p-1">
            <i aria-hidden="true" class="fa fa-heart-o fa-1x mr-2"></i>
            {{ photo.likes }}
            <i aria-hidden="true" class="fa fa-comment-o fa-1x mr-2 ml-2"></i>
            {{ photo.comments }}
          </div>
        </app-card>
      </a>
    </div>
  </li>
</ol>
