<div class="card">
  <h3 class="card-header indigo white-text">{{ event?.name }}</h3>
  <div class="card-body">
    <h4 class="card-title">{{ event?.date }} - {{event?.location }}</h4>
    <p class="card-text">{{ event?.description }}</p>
    <a routerLink="/photographer/{{photographer?.profileUrl}}">
      <p>{{ 'TEXTS.VISIT_PHOTOGRAPHERS_PAGE' | translate }}</p>
    </a>
  </div>
</div>

<br>
<br>

<mdb-tabset [buttonClass]="'nav-tabs indigo'" [contentClass]="''">
  <mdb-tab heading="{{ 'TEXTS.EVENT_ALL_PICTURES' | translate}}">
    <div class="row no-gutters justify-content-start" style="align-items: center">

      <div class="col-3">
        <a class="btn btn-pink darken-2 waves-light" id="button_select_all_pictures" (click)="selectAllImages()" mdbRippleRadius>{{ 'BUTTONS.SELECT_PICTURES' | translate }}</a>
      </div>

      <div class="col-1 offset-md-8">
        <a class="icon-button lessVertical" id="button_two_pictures_per_row" (click)="this.templateOverview = this.imgBigOverview"
          style="color: #e91e63 ">
          <i class="fa fa-th-large fa-2x" aria-hidden="true"></i>
        </a>
        &nbsp;&nbsp;
        <a class="icon-button lessVertical" id="button_three_pictures_per_row" (click)="this.templateOverview = this.imgSmalOverview"
          style="color: #e91e63">
          <i class="fa fa-th fa-2x" aria-hidden="true"></i>
        </a>
      </div>
    </div>
    <br>

    <!-- BILD -->
    <ng-container *ngTemplateOutlet="templateOverview"></ng-container>
    <!-- BILD -->

  </mdb-tab>

  <mdb-tab heading="{{ 'TEXTS.EVENT_SELECTED_PICTURES' | translate}}">
    <div class="row no-gutters justify-content-start" style="align-items: center">

      <div class="col-3">
        <a class="btn btn-pink darken-2 waves-light" id="button_deselect_all_pictures" (click)="deselectAllImages()" mdbRippleRadius>{{ 'BUTTONS.DESELECT_PICTURES' | translate }}</a>
      </div>
      <div class="col-1 offset-md-8">
        <a class="icon-button lessVertical" id="button_two_pictures_per_row" (click)="this.templateMarked = this.imgBigMarked" style="color: #e91e63 ">
          <i class="fa fa-th-large fa-2x" aria-hidden="true"></i>
        </a>
        &nbsp;&nbsp;
        <a class="icon-button lessVertical" id="button_three_pictures_per_row" (click)="this.templateMarked = this.imgSmalMarked"
          style="color: #e91e63 ">
          <i class="fa fa-th fa-2x" aria-hidden="true"></i>
        </a>
      </div>
    </div>
    <br>
    <!-- BILD -->
    <ng-container *ngTemplateOutlet="templateMarked"></ng-container>
    <!-- BILD -->
  </mdb-tab>
</mdb-tabset>

<!-- Detail picture modal -->
<app-picture-detail #pictureModal></app-picture-detail>

<ng-template #imgBigOverview>
  <div class="row">
    <div *ngFor="let image of images; let i = index" class="col-4">
      <div class="card card-outline-primary z-depth-1">
        <img class="img-fluid" [defaultImage]="'https://www.scandichotels.de/Static/img/placeholders/image-placeholder_3x2.svg'"
          [lazyLoad]="image.thumbnail" width="328" height="250" [alt]="image.name" div class="box1" (click)="openImageModal(image, i)">
        <div class="card-body">
          <p>{{image.name}}</p>
          <table>
            <tr>
              <td>
                <a class="icon-button" id="button_picture{{i}}_mark" [ngStyle]="image.selected && { 'color': '#3f51b5' }" (click)="images[i].selected = !images[i].selected">
                  <i class="fa fa-check fa-2x" aria-hidden="true">&nbsp;</i>
                </a>
              </td>

              <td>
                <a class="icon-button" id="button_picture{{i}}_like" style="color: #3f51b5" (click)="rateImage(image)">
                  &nbsp;
                  <i class="fa fa-heart fa-2x" aria-hidden="true">&nbsp;{{ image.ratings }}</i>
                </a>
              </td>

              <td>
                <a class="icon-button" id="button_picture{{i}}_report" style="color: #ff4848" (click)="reportImage(image)">
                  &nbsp;
                  <i class="fa fa-exclamation-triangle fa-2x" aria-hidden="true">&nbsp;</i>
                </a>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>

</ng-template>

<ng-template #imgSmalOverview>
  <img *ngFor="let image of images; let i = index" class="img-fluid" [defaultImage]="'https://www.scandichotels.de/Static/img/placeholders/image-placeholder_3x2.svg'"
    [lazyLoad]="image.thumbnail" width="250" height="150" [alt]="image.name" div class="box1" (click)="openImageModal(image, i)">
</ng-template>

<ng-template #imgBigMarked>
  <div class="card-columns">
    <div *ngFor="let image of images; let i = index">
      <div class="card card-outline-primary z-depth-1" *ngIf="image.selected">
        <img class="img-fluid" [defaultImage]="'https://www.scandichotels.de/Static/img/placeholders/image-placeholder_3x2.svg'"
          [lazyLoad]="image.thumbnail" width="328" height="250" [alt]="image.name" div class="box1" (click)="openImageModal(image, i)">
      </div>
    </div>
  </div>
</ng-template>
<ng-template #imgSmalMarked>
  <div *ngFor="let image of images; let i = index">
    <img class="img-fluid" *ngIf="image.selected" [defaultImage]="'https://www.scandichotels.de/Static/img/placeholders/image-placeholder_3x2.svg'"
      [lazyLoad]="image.thumbnail" width="250" height="150" [alt]="image.name" div class="box1" (click)="openImageModal(image, i)">
  </div>
</ng-template>


<div mdbModal #reportImageModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-notify modal-danger" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <p class="heading lead">{{ 'LABELS.REPORT_IMAGE' | translate}}</p>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="reportImageModal.hide()">
          <span aria-hidden="true" class="white-text">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="text-center">
          <p>{{ 'TEXTS.DESCRIBE_REPORT' | translate}}</p>
          <br>
          <div class="md-form">
            <textarea class="md-textarea" type="text" length="250" mdbCharCounter mdbActive></textarea>
            <label for="input_text">{{ 'LABELS.TYPE_HERE' | translate}}</label>
          </div>
        </div>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-danger waves-light" (click)="reportImageModal.hide()" mdbRippleRadius>{{ 'BUTTONS.SEND_REPORT' | translate}}</button>
      </div>
    </div>
  </div>
</div>