<div class="content">
    @if (dataSourceTable != null) {
        <div>
            @if (isUserAdmin == true) {
                <button
                    mat-raised-button
                    color="accent"
                    (click)="openDialogToAdd()"
                >
                    {{ "ListDz_Add" | translate }}
                </button>
            }
            <mat-form-field>
                <mat-label>{{ "ListDz_Filter" | translate }}</mat-label>
                <input
                    matInput
                    (keyup)="applyFilter($event)"
                    placeholder="{{ 'ListDz_Filter_PlaceHolder' | translate }}"
                    #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"
                    >
                        @if (element.isFavorite === true) {
                            <mat-icon
                                aria-hidden="false"
                                aria-label="Favorite"
                                (click)="removeToFavorite(element)"
                                color="primary"
                                style="cursor: pointer"
                                svgIcon="favorite"
                            ></mat-icon>
                        }
                        @if (element.isFavorite === false) {
                            <mat-icon
                                aria-hidden="false"
                                aria-label="Not favorite"
                                (click)="setToFavorite(element)"
                                style="cursor: pointer"
                                svgIcon="not_favorite"
                            ></mat-icon>
                        }
                        <a href="http://{{ element.website }}" target="_blank">
                            <mat-icon
                                aria-hidden="false"
                                aria-label="URL to the DZ website"
                                style="color: white"
                                svgIcon="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"
                                svgIcon="map"
                            ></mat-icon>
                        </a>
                        @if (element.email) {
                            <a href="mailto:{{ element.email }}">
                                <mat-icon
                                    aria-hidden="false"
                                    aria-label="Contact mail of the DZ"
                                    style="color: white"
                                    svgIcon="mail"
                                ></mat-icon>
                            </a>
                        }
                    </td>
                </ng-container>
                <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef>
                        {{ "ListDz_Header_ID" | translate }}
                    </th>
                    <td mat-cell *matCellDef="let element">{{ element.id }}</td>
                </ng-container>
                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef>
                        {{ "ListDz_Header_Name" | translate }}
                    </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>
                        {{ "ListDz_Header_Address" | translate }}
                    </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>
                        {{ "ListDz_Header_Type" | translate }}
                    </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>
    } @else {
        <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    }
    <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
</div>
