<!--
  ~ 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="process-group-references">
    @if (!hasBoundProcessGroups()) {
        <div class="tertiary-color font-medium">No referencing Process Groups</div>
    } @else {
        <ul>
            @if (authorizedProcessGroupReferences.length > 0) {
                <li>
                    <h4 class="primary-color">
                        <b>Process Groups ({{ authorizedProcessGroupReferences.length }})</b>
                    </h4>
                    <ul class="nested">
                        <ng-container
                            *ngTemplateOutlet="
                                processGroups;
                                context: { $implicit: authorizedProcessGroupReferences }
                            "></ng-container>
                    </ul>
                </li>
            }
            @if (unauthorizedProcessGroupReferences.length > 0) {
                <li>
                    <h4 class="primary-color">
                        <b>Unauthorized ({{ unauthorizedProcessGroupReferences.length }})</b>
                    </h4>
                    <ul class="nested">
                        <ng-container
                            *ngTemplateOutlet="
                                unauthorized;
                                context: { $implicit: unauthorizedProcessGroupReferences }
                            "></ng-container>
                    </ul>
                </li>
            }
        </ul>
        <ng-template #processGroups let-references>
            @if (references.length > 0) {
                @for (reference of references; track reference) {
                    <li>
                        <a [routerLink]="getRouteForReference(reference)">{{ reference.component.name }}</a>
                    </li>
                }
            }
        </ng-template>
        <ng-template #unauthorized let-references>
            @if (references.length > 0) {
                @for (reference of references; track reference) {
                    <li>
                        <div class="unset neutral-color">{{ reference.id }}</div>
                    </li>
                }
            }
        </ng-template>
    }
</div>
