<div class="content-container" *ngIf="context$ | async as context">
    <iqser-table
        (noDataAction)="openAddEditComponentMappingDialog()"
        [headerTemplate]="headerTemplate"
        [itemSize]="80"
        [tableColumnConfigs]="tableColumnConfigs"
        [noDataText]="'component-mappings-screen.no-data.title' | translate"
        [showNoDataButton]="roles.componentMappings.write && currentUser.isAdmin"
        [noDataButtonLabel]="'component-mappings-screen.no-data.action' | translate"
        emptyColumnWidth="2fr"
        noDataIcon="iqser:csv"
    ></iqser-table>
</div>

<ng-template #headerTemplate>
    <div class="table-header-actions">
        <iqser-input-with-action
            [(value)]="searchService.searchValue"
            [placeholder]="'component-mappings-screen.search' | translate"
        ></iqser-input-with-action>
        <div class="actions">
            <iqser-icon-button
                (action)="openAddEditComponentMappingDialog()"
                *allow="roles.componentMappings.write; if: currentUser.isAdmin"
                [label]="'component-mappings-screen.add-new' | translate"
                [type]="iconButtonTypes.primary"
                icon="iqser:plus"
            ></iqser-icon-button>
        </div>
    </div>
</ng-template>

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

        <div class="cell">
            <span>{{ entity.version }}</span>
        </div>

        <div class="cell">
            <span>{{ entity.numberOfLines }}</span>
        </div>

        <div class="cell" [matTooltip]="entity.columnLabelsString" [matTooltipPosition]="'above'" [matTooltipClass]="'custom-tooltip'">
            <span class="ellipsis">{{ entity.columnLabelsString }}</span>
        </div>

        <div class="cell">
            <div *allow="roles.componentMappings.write; if: currentUser.isAdmin" class="action-buttons">
                <iqser-circle-button
                    (action)="openAddEditComponentMappingDialog(entity)"
                    [tooltip]="'component-mappings-screen.action.edit' | translate"
                    icon="iqser:edit"
                ></iqser-circle-button>

                <iqser-circle-button
                    (action)="downloadMapping(entity)"
                    [tooltip]="'component-mappings-screen.action.download' | translate"
                    icon="iqser:download"
                ></iqser-circle-button>

                <iqser-circle-button
                    (action)="openDeleteComponentMappingDialog(entity)"
                    [tooltip]="'component-mappings-screen.action.delete' | translate"
                    icon="iqser:trash"
                ></iqser-circle-button>
            </div>
        </div>
    </div>
</ng-template>
