<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="flow-configuration-history-table flex-1 relative h-full w-full">
    <div class="listing-table overflow-y-auto absolute inset-0">
        <table
            mat-table
            [dataSource]="dataSource"
            matSort
            matSortDisableClear
            (matSortChange)="sortData($event)"
            [matSortActive]="initialSortColumn"
            [matSortDirection]="initialSortDirection">
            <ng-container matColumnDef="moreDetails">
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let item">
                    <ng-container>
                        <div class="flex items-center gap-x-2">
                            @if (canRead(item)) {
                                <div
                                    class="pointer fa fa-info-circle primary-color"
                                    title="View Details"
                                    (click)="moreDetails(item)"></div>
                            }
                        </div>
                    </ng-container>
                </td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="timestamp">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Date/Time</div>
                </th>
                <td mat-cell *matCellDef="let item" [title]="formatTimestamp(item)">
                    {{ formatTimestamp(item) }}
                </td>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="sourceName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Name</div>
                </th>
                <td mat-cell *matCellDef="let item" [title]="formatName(item)">
                    <span [class.surface-color]="!item.action?.sourceName" [class.blank]="!item.action?.sourceName">{{
                        formatName(item)
                    }}</span>
                </td>
            </ng-container>

            <ng-container matColumnDef="sourceType">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Type</div>
                </th>
                <td mat-cell *matCellDef="let item" [title]="formatType(item)">
                    {{ formatType(item) }}
                </td>
            </ng-container>

            <ng-container matColumnDef="operation">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Operation</div>
                </th>
                <td mat-cell *matCellDef="let item" [title]="formatOperation(item)">
                    {{ formatOperation(item) }}
                </td>
            </ng-container>

            <ng-container matColumnDef="userIdentity">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                    <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">User</div>
                </th>
                <td mat-cell *matCellDef="let item" [title]="formatUser(item)">
                    {{ formatUser(item) }}
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
            <tr
                mat-row
                *matRowDef="let row; let even = even; columns: displayedColumns"
                [class.even]="even"
                (click)="select(row)"
                [class.unset]="!canRead(row)"
                [class.surface-color]="!canRead(row)"
                [class.selected]="isSelected(row)"></tr>
        </table>
    </div>
</div>
