<div class="image-wrapper">
  <img class="image" [src]="activeImage.url" alt="product-image" />
</div>

<div class="thumbnails-wrapper">
  <button *ngFor="let image of images" (click)="activeImage = image" [class.selected]="activeImage.url === image.url">
    <img class="thumbnail" [src]="image.thumbUrl" />
  </button>
</div>

<div class="controls">
  <button (click)="prevImage()">
    <ui-icon icon="arrow_head" size="22px" rotate="180deg"></ui-icon>
  </button>
  <span>{{ images.indexOf(activeImage) + 1 }} von {{ images.length }}</span>
  <button (click)="nextImage()">
    <ui-icon icon="arrow_head" size="22px"></ui-icon>
  </button>
</div>
