<div class="content">
  <div *ngIf="dataSourceTable != null else loading">
    <button mat-raised-button color="accent" (click)="openDialogToAdd()" *ngIf="isUserAdmin == true">Add a drop zone</button>

    <mat-form-field>
      <mat-label>Filter</mat-label>
      <input matInput (keyup)="applyFilter($event)" placeholder="Filter on the name or address of center" #input>
    </mat-form-field>

    <table mat-table [dataSource]="dataSourceTable">
      <ng-container matColumnDef="isfavorite">
        <th mat-header-cell *matHeaderCellDef style="min-width: 144px;"></th>
        <td mat-cell *matCellDef="let element" style="text-align: left;">
          <mat-icon aria-hidden="false" aria-label="Favorite" *ngIf="element.isFavorite === true"
            (click)="removeToFavorite(element)" color="primary" style="cursor: pointer;">favorite</mat-icon>
          <mat-icon aria-hidden="false" aria-label="Not favorite" *ngIf="element.isFavorite === false"
            (click)="setToFavorite(element)" style="cursor: pointer;">favorite_border</mat-icon>

          <a href='http://{{element.website}}' target="_blank">
            <mat-icon aria-hidden="false" aria-label="URL to the DZ website" style="color: white;">link</mat-icon>
          </a>
          <a href='https://www.openstreetmap.org/?mlat={{element.latitude}}&mlon={{element.longitude}}#map=14/{{element.latitude}}/{{element.longitude}}'
            target="_blank">
            <mat-icon aria-hidden="false" aria-label="Location of the DZ" style="color: white;">map</mat-icon>
          </a>
          <a href="mailto:{{element.email}}" *ngIf="element.email">
            <mat-icon aria-hidden="false" aria-label="Contact mail of the DZ" style="color: white;">mail_outline</mat-icon>
          </a>
        </td>
      </ng-container>

      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let element">{{element.id}}</td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let element">
          <span class="spanWithBreakWord" [innerHTML]="element.name"></span>
        </td>
      </ng-container>

      <ng-container matColumnDef="address">
        <th mat-header-cell *matHeaderCellDef>Address</th>
        <td mat-cell *matCellDef="let element">
          <span class="spanWithBreakWord" [innerHTML]="element.address"></span>
        </td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef>Type</th>
        <td mat-cell *matCellDef="let element">{{element.type}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>

  <ng-template #loading>
    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
  </ng-template>
</div>
