<!--
  ~ 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="parameter-references">
    @if (parameterReferenceMap == null || parameterReferenceMap.size == 0) {
        <div class="tertiary-color font-medium">No referencing components</div>
    } @else {
        @for (pg of processGroups; track pg.id) {
            <ng-container *ngTemplateOutlet="pgListing; context: { $implicit: pg }"></ng-container>
        }
        <ng-template #pgListing let-pg>
            <ul>
                <li>
                    <h4 class="primary-color">
                        <b>{{ pg.name }}</b>
                    </h4>
                    @if (parameterReferenceMap.get(pg.id); as references) {
                        <ul class="nested">
                            <ng-container
                                *ngTemplateOutlet="
                                    processor;
                                    context: { $implicit: getReferencesByType(references, 'PROCESSOR') }
                                "></ng-container>
                            <ng-container
                                *ngTemplateOutlet="
                                    service;
                                    context: { $implicit: getReferencesByType(references, 'CONTROLLER_SERVICE') }
                                "></ng-container>
                            <ng-container
                                *ngTemplateOutlet="
                                    unauthorized;
                                    context: { $implicit: getUnauthorized(references) }
                                "></ng-container>
                        </ul>
                    }
                </li>
            </ul>
        </ng-template>
        <ng-template #processor let-references>
            @if (references.length > 0) {
                <li>
                    <h4 class="tertiary-color">Processors ({{ references.length }})</h4>
                    <div class="references">
                        @for (reference of references; track reference.component.id) {
                            <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)"></div>
                                } @else {
                                    <div [ngClass]="getNonServiceStateIcon(reference.component)"></div>
                                }
                                <a [routerLink]="getRouteForReference(reference.component)">{{
                                    reference.component.name
                                }}</a>
                                @if (hasBulletins(reference)) {
                                    <div
                                        class="pointer fa fa-sticky-note-o primary-color"
                                        nifiTooltip
                                        [tooltipComponentType]="BulletinsTip"
                                        [tooltipInputData]="getBulletinsTipData(reference)"></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.component.id) {
                            <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>
                                    }
                                    <a [routerLink]="getRouteForReference(service.component)">
                                        {{ service.component.name }}
                                    </a>
                                    @if (hasBulletins(service)) {
                                        <div
                                            class="pointer fa fa-sticky-note-o primary-color"
                                            nifiTooltip
                                            [tooltipComponentType]="BulletinsTip"
                                            [tooltipInputData]="getBulletinsTipData(service)"></div>
                                    }
                                </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.id) {
                            <div class="flex">
                                <div class="unset neutral-color">{{ reference.id }}</div>
                            </div>
                        }
                    </div>
                </li>
            }
        </ng-template>
    }
</div>
