@let statusTimeContainerClass =
    isNoStyle
        ? ''
        : isDispatchStatus
          ? (_status.id | dispatchStatusColors)
          : (_status.id | loadStatusColors);

<div
    #containerLoadStatus
    class="status-time-container d-flex flex-column"
    [class]="statusTimeContainerClass"
    [class.default-hover-focus]="isDefaultHoverFocus"
    [class.dropdown-status-change]="isDropdownStatusChange"
    [class.is-marked]="isMarked"
    [class.load-status-no-states]="isNoStatesColor"
    [class.status-with-time]="time && !isTableBigStatus"
    [class.no-style]="isNoStyle"
    [class.title-card-dropdown]="isTitleCardDropdown"
    [class.c-pointer]="!isNoStatesColor && !isDisabledClick"
    [class.load-status-card]="isStatusCard"
    [class.p-4]="isStatusCard"
    [class.table-big-status]="isTableBigStatus"
    [class.dispatch-status]="isDispatchStatus"
    [class.dispatch-status-with-time]="dispatchTime"
    [class.dispatch-show-time-always]="dispatchTime && isDispatchShowTimeAlways"
    [style.width.px]="width"
    [style.height.px]="height"
    (click)="!isDisabledClick && focusOnClick()"
    (focus)="onStatusFocus()"
    (blur)="onStatusBlur()"
    [attr.tabindex]="!isDisabledClick && '0'"
>
    <div
        class="d-flex status align-items-center"
        [class.justify-content-center]="isTableBigStatus"
        [class.m-b-2]="isTableBigStatus"
    >
        @if (isStatusCard) {
            <div class="w-14 h-14 br-circle m-r-4"></div>
        }

        @for (value of displayString; let index = $index; track index) {
            <span
                class="text-size-11 status-text text-uppercase"
                [class]="
                    !isSelectedItem && value.length > 1 && isFilter
                        ? 'ca-font-regular'
                        : 'ca-font-bold'
                "
                [ngClass]="
                    value
                        | statusTextClass
                            : index
                            : displayString
                            : isTitleCardDropdown
                            : isDark
                            : _status.id!
                            : isNoStatesColor
                            : isStatusCard
                            : isStatusFocused
                            : fontSize
                "
            >
                {{ value }}
            </span>
        }
    </div>

    @if (time) {
        <div
            class="ca-font-medium text-size-11"
            [class]="
                isTableBigStatus
                    ? 'd-flex ca-font-semi-bold text-color-bw6-2'
                    : 'status-time'
            "
            [class.justify-content-center]="isTableBigStatus"
        >
            {{ time }}
        </div>
    }

    @if (dispatchTime) {
        <div
            class="ca-font-semi-bold text-size-11 text-color-white-4 dispatch-status-time"
        >
            {{ dispatchTime }}
        </div>
    }
</div>