<div class="content-container">
    <iqser-table
        [headerTemplate]="headerTemplate"
        [itemSize]="80"
        [noDataText]="'watermarks-listing.no-data.title' | translate"
        [tableColumnConfigs]="tableColumnConfigs"
        emptyColumnWidth="1fr"
        noDataIcon="red:attribute"
    ></iqser-table>
</div>

<ng-template #headerTemplate>
    <div class="table-header-actions">
        <iqser-icon-button
            *allow="roles.watermarks.write; if: currentUser.isAdmin"
            [attr.help-mode-key]="'create_new_watermark'"
            [label]="'watermarks-listing.add-new' | translate"
            [routerLink]="getRouterLink() | tenant"
            [type]="iconButtonTypes.primary"
            icon="iqser:plus"
        ></iqser-icon-button>
    </div>
</ng-template>

<ng-template #tableItemTemplate let-entity="entity">
    <div>
        <div class="label cell">
            <span>{{ entity.name }}</span>
        </div>

        <div class="center cell">
            <mat-slide-toggle
                (toggleChange)="toggleStatus(entity)"
                [attr.help-mode-key]="'enable_disable_watermark'"
                [checked]="entity.enabled"
                [disabled]="!currentUser.isAdmin || (permissionsService.has$(roles.watermarks.write) | async) === false"
                color="primary"
            ></mat-slide-toggle>
        </div>

        <div class="cell user-column">
            <iqser-initials-avatar [defaultValue]="'unknown' | translate" [user]="entity.createdBy || 'system'"></iqser-initials-avatar>
        </div>

        <div class="cell">
            <div class="small-label">
                {{ entity.dateAdded | date : 'd MMM yyyy' }}
            </div>
        </div>

        <div class="cell">
            <div class="small-label">
                {{ entity.dateModified | date : 'd MMM yyyy' }}
            </div>
        </div>

        <div class="cell">
            <div class="action-buttons">
                <div [attr.help-mode-key]="'edit_delete_watermark'">
                    <iqser-circle-button
                        [routerLink]="getRouterLink(entity) | tenant"
                        [tooltip]="'watermarks-listing.action.edit' | translate"
                        icon="iqser:edit"
                    ></iqser-circle-button>

                    <iqser-circle-button
                        (action)="openConfirmDeleteWatermarkDialog(entity)"
                        *allow="roles.watermarks.write; if: currentUser.isAdmin"
                        [tooltip]="'watermarks-listing.action.delete' | translate"
                        icon="iqser:trash"
                    ></iqser-circle-button>
                </div>
            </div>
        </div>
    </div>
</ng-template>
