<div class="cell">
    <div class="flex-align-items-center">
        <div [style.background-color]="state.color" class="dossier-state-square"></div>
        <div [matTooltip]="state.name" class="state-name clamp-1" matTooltipPosition="above">{{ state.name }}</div>
    </div>
</div>

<div class="cell center">
    <span class="small-label">{{ state.rank }}</span>
</div>

<div class="cell center">
    <span class="small-label">{{ state.dossierCount }}</span>
</div>

<div class="cell">
    <div *ngIf="permissionsService.canPerformDossierStatesActions()" class="action-buttons">
        <div [attr.help-mode-key]="'edit_delete_dossier_state'">
            <iqser-circle-button
                (action)="openEditStateDialog(state)"
                [tooltip]="'dossier-states-listing.action.edit' | translate"
                icon="iqser:edit"
            ></iqser-circle-button>

            <iqser-circle-button
                (action)="openConfirmDeleteStateDialog(state)"
                [tooltip]="'dossier-states-listing.action.delete' | translate"
                icon="iqser:trash"
            ></iqser-circle-button>
        </div>
    </div>
</div>
