<app-paging #pagingComponent
            [getDataFunction]="getData"
            [dataSource]="dataSource"
            [searchable]="searchable"
            [hidePageSize]="hidePageSize"
            [displayOptions]="displayOptions"
            [defaultDisplayOption]="defaultDisplayOption"
            [showCreateDataButton]="dataFormComponent !== undefined"
            (createNewData)="onCreateData()"
            (displayOptionChange)="onDisplayOptionChange($event)"
>
    <app-toggle *ngIf="showFilterBar && filterExists"
        [small]="true"
        [headline]="'basic.filter'"
        [activeFilterCount]="activeFilterCount"
    >
        <app-filter-bar
            [listColDefinitions]="listColDefinitions"
            [filterConfig]="filterConfig"
            (filterInit)="onFilterInit($event)"
            (filterChanged)="onFilterChanged($event)"
            (filterSave)="saveFilterConfig()"
        ></app-filter-bar>
    </app-toggle>
    <app-toggle *ngIf="displayedColumns"
        [small]="true"
        [headline]="'basic.columns'"
    >
        <div class="row align-items-end">
            <ng-container *ngFor="let column of listColDefinitions">
                <div class="col-4 col-sm-3 col-md-2 col-lg-1 mb-3 switch-widget">
                    <p class="form-label">{{ column.text | translate }}</p>
                    <label class="switch">
                        <input type="checkbox"
                               [checked]="column.visible"
                               (change)="onToggleColumnVisibility(column.name)">
                        <span class="slider round"></span>
                    </label>
                </div>
            </ng-container>
        </div>
        <div class="row mb-3">
            <div class="col-12 d-flex justify-content-end">
                <button (click)="saveColumnConfig()" class="btn btn-primary me-3">{{ 'basic.saveSettings' | translate }}</button>
                <button (click)="showAllColumns()" class="btn btn-primary">{{ 'basic.showAllColumns' | translate }}</button>
            </div>
        </div>
    </app-toggle>
    <div *ngIf="listColDefinitions" class="table-responsive">
        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortChange($event)" class="mat-elevation-z8">

            <!-- Iterate over listColDefinitions to define columns -->
            <ng-container *ngFor="let column of listColDefinitions">
                <ng-container [matColumnDef]="column.name">
                    <!-- Header Cell -->
                    <ng-container *ngIf="column.sortable">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                            {{ column.text | translate }}
                        </th>
                    </ng-container>
                    <ng-container *ngIf="!column.sortable">
                        <th mat-header-cell *matHeaderCellDef>
                            {{ column.text | translate }}
                        </th>
                    </ng-container>

                    <!-- Conditional Cells -->
                    <td mat-cell *matCellDef="let element; let rowIndex = index" [ngClass]="getColCssClass(column)">
                        <ng-container [ngSwitch]="column.type">

                            <ng-container *ngSwitchCase="COLUMN_TYPE_ADDRESS">
                                <div [innerHTML]="getElementValue(element, column)"></div>
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_BOOLEAN">
                                <span class="traffic-light" [ngClass]="{
                                  'green': getElementValue(element, column),
                                  'red': !getElementValue(element, column),
                                  'has-function': !!column.updateBooleanOnClick
                                }" (click)="column.updateBooleanOnClick ? updateBooleanState(element, rowIndex, column) : null"></span>
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_CURRENCY">
                                {{ getElementValue(element, column) | currency: 'EUR' }}
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_BTN_DOWNLOAD">
                                <span class="btn btn-primary bi bi-download p-2-4"
                                    data-type="user-tool" data-action="edit" (click)="onDownloadFunction(element)"></span>
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_BTN_REMOVE">
                                <span class="spt-icon-unassign" (click)="onRemoveItemFunction(element, column)"></span>
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_BTN_EDIT">
                                <span class="btn btn-primary bi bi-pencil p-2-4"
                                    data-type="user-tool" data-action="edit" (click)="onEditFunction(element)"></span>
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_DATE">
                                {{ getElementValue(element, column) | date:'dd.MM.YYYY - HH:mm':'GMT+0200' }}
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_EMAIL">
                                <span><a href="mailto:{{ getElementValue(element, column) }}">{{ getElementValue(element, column) }}</a></span>
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_DETAIL" >
                                <span class="btn btn-primary spt-icon-details"
                                      data-type="user-tool" data-action="edit"
                                      (click)="onNavigateToDetailsFunction(element, column)">
                                </span>
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_DETAIL_LINK">
                                <a *ngIf="!getCustomDetailLinkFunction"
                                   class="btn btn-primary spt-icon-details"
                                   data-type="user-tool"
                                   data-action="edit"
                                   [target]="detailLinkNewTab ? '_blank' : '_self'"
                                   [routerLink]="[appHelperService.getLink(element, column.url)]">
                                </a>
                                <a *ngIf="getCustomDetailLinkFunction"
                                   class="btn btn-primary spt-icon-details"
                                   data-type="user-tool"
                                   data-action="edit"
                                   [target]="detailLinkNewTab ? '_blank' : '_self'"
                                   [routerLink]="['/' + getCustomDetailLinkFunction(element)]">
                                </a>
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_IMAGE">
                                <img [src]="getElementImage(element, column)" width="40" height="40"/>
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_POSITION">
                                {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex() - 1) + dataSource.filteredData.indexOf(element) + 1 }}
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_TEXT">
                                {{ getElementValue(element, column) }}
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_NUMBER">
                                {{ getElementValue(element, column) | number:'1.0-0':'de-DE' }}
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_NUMBER_UNFORMATTED">
                                {{ getElementValue(element, column) }}
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_NUMBER_BOLD">
                                <strong>{{ getElementValue(element, column) | number:'1.0-0':'de-DE' }}</strong>
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_TEXT_BOLD">
                                <strong>{{ getElementValue(element, column) }}</strong>
                            </ng-container>

                            <ng-container *ngSwitchCase="COLUMN_TYPE_TEXT_LINKED">
                                <a [routerLink]="[appHelperService.getResourceLink(element, column.subResource)]">
                                    {{ getElementValue(element, column) }}
                                </a>
                            </ng-container>
                            <ng-container *ngSwitchCase="COLUMN_TYPE_WEBSITE">
                                <a href="{{ getElementValue(element, column) }}" target="_blank">{{ getElementValue(element, column) }}</a>
                            </ng-container>

                        </ng-container>
                    </td>
                </ng-container>
            </ng-container>

            <!-- Header and Row Definitions -->
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns; index as i;"
                (click)="onRowSelected(row, i)"
                [ngClass]="{'highlighted': selectedRowIndex === i}">
            </tr>
        </table>
    </div>

</app-paging>