<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="controller-service-references">
    @if (serviceReferences == null || serviceReferences.length == 0) {
        <div class="tertiary-color font-medium">No referencing components</div>
    } @else {
        <ng-container
            *ngTemplateOutlet="
                referenceListing;
                context: { $implicit: serviceReferences, nested: false }
            "></ng-container>
        <ng-template #referenceListing let-references let-nested="nested">
            <ul [class.nested]="nested">
                <ng-container
                    *ngTemplateOutlet="
                        nonService;
                        context: {
                            $implicit: getReferencesByType(references, 'Processor'),
                            referenceTypeLabel: 'Processors'
                        }
                    "></ng-container>
                <ng-container
                    *ngTemplateOutlet="
                        service;
                        context: { $implicit: getReferencesByType(references, 'ControllerService') }
                    "></ng-container>
                <ng-container
                    *ngTemplateOutlet="
                        nonService;
                        context: {
                            $implicit: getReferencesByType(references, 'ReportingTask'),
                            referenceTypeLabel: 'Reporting Tasks'
                        }
                    "></ng-container>
                <ng-container
                    *ngTemplateOutlet="
                        nonService;
                        context: {
                            $implicit: getReferencesByType(references, 'FlowAnalysisRule'),
                            referenceTypeLabel: 'Flow Analysis Rules'
                        }
                    "></ng-container>
                <ng-container
                    *ngTemplateOutlet="
                        nonService;
                        context: {
                            $implicit: getReferencesByType(references, 'ParameterProvider'),
                            referenceTypeLabel: 'Parameter Providers'
                        }
                    "></ng-container>
                <ng-container
                    *ngTemplateOutlet="
                        nonService;
                        context: {
                            $implicit: getReferencesByType(references, 'FlowRegistryClient'),
                            referenceTypeLabel: 'Registry Clients'
                        }
                    "></ng-container>
                <ng-container
                    *ngTemplateOutlet="
                        unauthorized;
                        context: { $implicit: getUnauthorized(references) }
                    "></ng-container>
            </ul>
        </ng-template>
        <ng-template #nonService let-references let-referenceTypeLabel="referenceTypeLabel">
            @if (references.length > 0) {
                <li>
                    <h4 class="primary-color">
                        <span class="tertiary-color font-medium">{{ referenceTypeLabel }}</span>
                        ({{ references.length }})
                    </h4>
                    <div class="references">
                        @for (reference of references; track reference) {
                            <div class="flex items-center gap-x-2">
                                @if (isNonServiceInvalid(reference.component)) {
                                    <div
                                        class="invalid fa fa-warning caution-color"
                                        nifiTooltip
                                        [tooltipComponentType]="ValidationErrorsTip"
                                        [tooltipInputData]="getValidationErrorTipData(reference.component)"
                                        [delayClose]="false"></div>
                                } @else {
                                    <div [ngClass]="getNonServiceStateIcon(reference.component)"></div>
                                }
                                @if (!disabledLinks) {
                                    <a (click)="goToReferencingComponentClicked($event, reference.component)">{{
                                        reference.component.name
                                    }}</a>
                                } @else {
                                    <div>{{ reference.component.name }}</div>
                                }
                                @if (hasBulletins(reference)) {
                                    <div
                                        class="pointer fa fa-sticky-note"
                                        [ngClass]="getBulletinSeverityClass(reference)"
                                        nifiTooltip
                                        [tooltipComponentType]="BulletinsTip"
                                        [tooltipInputData]="getBulletinsTipData(reference)"
                                        [delayClose]="true"></div>
                                }
                                @if (hasActiveThreads(reference.component)) {
                                    <div>({{ reference.component.activeThreadCount }})</div>
                                }
                            </div>
                        }
                    </div>
                </li>
            }
        </ng-template>
        <ng-template #service let-references>
            @if (references.length > 0) {
                <li>
                    <h4 class="tertiary-color">Controller Services ({{ references.length }})</h4>
                    <div class="references">
                        @for (service of references; track service) {
                            <div class="flex flex-col">
                                <div class="flex items-center gap-x-2">
                                    @if (isServiceInvalid(service.component)) {
                                        <div
                                            class="invalid fa fa-warning caution-color"
                                            nifiTooltip
                                            [tooltipComponentType]="ValidationErrorsTip"
                                            [tooltipInputData]="getValidationErrorTipData(service.component)"></div>
                                    } @else {
                                        <div [ngClass]="getServiceStateIcon(service.component)"></div>
                                    }

                                    @if (!disabledLinks) {
                                        <a (click)="goToReferencingComponentClicked($event, service.component)">{{
                                            service.component.name
                                        }}</a>
                                    } @else {
                                        <div>{{ service.component.name }}</div>
                                    }

                                    @if (hasBulletins(service)) {
                                        <div
                                            class="pointer fa fa-sticky-note"
                                            [ngClass]="getBulletinSeverityClass(service)"
                                            nifiTooltip
                                            [delayClose]="true"
                                            [tooltipComponentType]="BulletinsTip"
                                            [tooltipInputData]="getBulletinsTipData(service)"></div>
                                    }
                                </div>
                                <div>
                                    @if (service.component.referenceCycle) {
                                        <div class="unset neutral-color">Reference cycle detected</div>
                                    } @else {
                                        @if (service.component.referencingComponents.length > 0) {
                                            <ng-container
                                                *ngTemplateOutlet="
                                                    referenceListing;
                                                    context: {
                                                        $implicit: service.component.referencingComponents,
                                                        nested: true
                                                    }
                                                "></ng-container>
                                        }
                                    }
                                </div>
                            </div>
                        }
                    </div>
                </li>
            }
        </ng-template>
        <ng-template #unauthorized let-references>
            @if (references.length > 0) {
                <li>
                    <h4 class="tertiary-color">Unauthorized ({{ references.length }})</h4>
                    <div class="references">
                        @for (reference of references; track reference) {
                            <div class="flex">
                                <div class="unset neutral-color">{{ reference.id }}</div>
                            </div>
                        }
                    </div>
                </li>
            }
        </ng-template>
    }
</div>
