<!--
~ 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-provider-references">
    @if (!parameterProviderReferences || parameterProviderReferences.length === 0) {
        <div class="accent-color font-medium">No referencing components</div>
    } @else {
        <ul>
            <ng-container
                *ngTemplateOutlet="
                    parameterContexts;
                    context: {
                        $implicit: getAuthorized(parameterProviderReferences),
                        label: 'Parameter Contexts'
                    }
                "></ng-container>
            <ng-container
                *ngTemplateOutlet="
                    unauthorized;
                    context: {
                        $implicit: getUnauthorized(parameterProviderReferences),
                        label: 'Unauthorized'
                    }
                "></ng-container>
        </ul>
    }

    <ng-template #parameterContexts let-references let-label="label">
        @if (references.length > 0) {
            <li>
                <h4 class="accent-color">{{ label }} ({{ references.length }})</h4>
                <div class="references">
                    @for (reference of references; track reference) {
                        <div class="flex items-center gap-x-2">
                            <a (click)="goToParameterContextClicked($event, reference)">{{
                                reference.component?.name
                            }}</a>
                        </div>
                    }
                </div>
            </li>
        }
    </ng-template>

    <ng-template #unauthorized let-references let-label="label">
        @if (references.length > 0) {
            <li>
                <h4 class="accent-color">{{ label }} ({{ references.length }})</h4>
                <div class="references">
                    @for (reference of references; track reference) {
                        <div class="flex items-center gap-x-2">
                            <div class="unset surface-color">{{ reference.id }}</div>
                        </div>
                    }
                </div>
            </li>
        }
    </ng-template>
</div>
