@for (department of departmentContacts; let index = $index; track department) {
    <div [ngStyle]="{ 'max-width': '312px' }">
        @if (index > 0) {
            <div class="h-1 background-bw-9 br-1 m-x-2"></div>
        }

        <app-ca-custom-card
            customDividerClass="divider--dark divider--small"
            customNameClass="p-l-6"
            headerRightSideClass="p-r-6"
            [cardName]="department.name"
            [hasDivider]="false"
            [counter]="department.contacts.length"
            [isCardOpen]="!index"
            [animationMarginParams]="{
                marginTop: '0',
                marginBottom: '0',
            }"
        >
            <div origin>
                @for (
                    contact of department.contacts;
                    let i = $index;
                    let last = $last;
                    track contact.id
                ) {
                    <ng-container
                        *ngTemplateOutlet="
                            contactItemTemplate;
                            context: {
                                contact,
                                index: i,
                                isLast: last,
                            }
                        "
                    ></ng-container>
                }
            </div>
        </app-ca-custom-card>
    </div>
}

<ng-template
    #contactItemTemplate
    let-contact="contact"
    let-index="index"
    let-isLast="isLast"
>
    <div
        class="p-x-6 p-y-4 background-hover-bw2 br-2"
        [ngClass]="{
            'm-b-8': isLast,
            'm-b-4': !isLast,
        }"
        (mouseenter)="onHoverContact(contact.id)"
        (mouseleave)="onHoverContact()"
    >
        <div class="d-flex align-items-center justify-content-between m-b-4">
            <div class="d-flex align-items-center text-truncate">
                <div
                    class="text-size-14 text-color-black-2 ca-font-medium text-truncate"
                    [innerHTML]="
                        contact.fullName
                            | caHighlight: [{ index: 45632, text: searchText }]
                    "
                ></div>
            </div>

            @if (hoveredContactId === contact.id) {
                <div class="d-flex align-items-center">
                    <div
                        class="w-18 h-18 d-flex align-items-center justify-content-center background-hover-dark-2 svg-hover-black br-1 c-pointer m-r-4"
                        ngbTooltip
                        [mainCaTooltip]="eGeneralActions.EDIT"
                        [tooltipMarginTop]="'0px'"
                        [tooltipBackground]="eColor.BLACK"
                        [position]="ePosition.TOP"
                        (click)="onEditEvent(contact.id)"
                    >
                        <svg-icon
                            class="d-flex svg-size-14 svg-fill-muted"
                            [src]="svgRoutes.EDIT_ICON"
                        ></svg-icon>
                    </div>

                    <div
                        class="w-18 h-18 d-flex align-items-center justify-content-center background-hover-red-15 svg-hover-red-14 br-1 c-pointer"
                        ngbTooltip
                        [mainCaTooltip]="eGeneralActions.DELETE"
                        [tooltipMarginTop]="'0px'"
                        [tooltipBackground]="eColor.RED"
                        [position]="ePosition.TOP"
                        (click)="onDeleteEvent(contact.id)"
                    >
                        <svg-icon
                            class="d-flex svg-size-14 svg-fill-muted"
                            [src]="svgRoutes.DELETE_ICON"
                        ></svg-icon>
                    </div>
                </div>
            }
        </div>

        <ng-container
            *ngTemplateOutlet="
                contactSvgTextTemplate;
                context: {
                    svg: svgRoutes.PHONE_ICON,
                    text: contact.phone,
                    additionalText: contact.phoneExt,
                    contactId: contact.id,
                    index: 0,
                }
            "
        ></ng-container>

        @if (contact.email) {
            <ng-container
                *ngTemplateOutlet="
                    contactSvgTextTemplate;
                    context: {
                        svg: svgRoutes.EMAIL_ICON,
                        text: contact.email,
                        contactId: contact.id,
                        index: 1,
                    }
                "
            ></ng-container>
        }
    </div>
</ng-template>

<ng-template
    #contactSvgTextTemplate
    let-svg="svg"
    let-text="text"
    let-additionalText="additionalText"
    let-contactId="contactId"
    let-index="index"
>
    <div
        class="d-flex align-items-center"
        [ngClass]="{ 'm-b-4': index !== 1 }"
        (mouseenter)="onHoverText(index)"
        (mouseleave)="onHoverText()"
    >
        <div class="m-r-4">
            <svg-icon
                class="d-flex svg-size-18 svg-fill-muted"
                [src]="svg"
            ></svg-icon>
        </div>

        <div class="d-flex align-items-center overflow-hidden">
            <div
                class="text-size-14 text-color-black-2 text-truncate"
                [innerHTML]="
                    text | caHighlight: [{ index: 45632, text: searchText }]
                "
            ></div>

            @if (additionalText) {
                <div class="text-size-14 text-color-muted text-nowrap m-l-4">
                    {{ additionalText }}
                </div>
            }
        </div>

        @if (hoveredContactId === contactId && hoveredTextIndex === index) {
            @let isCopied = copiedIndex === index;
            @let copyText =
                text +
                (additionalText
                    ? eStringPlaceholder.WHITESPACE + additionalText
                    : eStringPlaceholder.EMPTY);

            <div
                class="m-l-4"
                ngbTooltip
                [mainCaTooltip]="
                    isCopied ? eGeneralActions.COPIED : eGeneralActions.COPY
                "
                [tooltipMarginTop]="'0px'"
                [tooltipBackground]="isCopied ? eColor.BLUE : eColor.BLACK"
                [position]="ePosition.BOTTOM"
                (click)="copyToClipboard(copyText, index)"
            >
                <svg-icon
                    class="d-flex svg-size-12 c-pointer"
                    [ngClass]="
                        isCopied
                            ? 'svg-fill-blue-9'
                            : 'svg-fill-muted svg-hover-black'
                    "
                    [src]="svgRoutes.COPY_ICON"
                ></svg-icon>
            </div>
        }
    </div>
</ng-template>