<!--
  ~ 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">
    <div *ngIf="!hasBoundProcessGroups(); else hasReferences" class="value">No referencing Process Groups</div>

    <ng-template #hasReferences>
        <ul>
            <li *ngIf="authorizedProcessGroupReferences.length > 0">
                <h4>
                    <b>Process Groups ({{ authorizedProcessGroupReferences.length }})</b>
                </h4>
                <ul class="nested">
                    <ng-container
                        *ngTemplateOutlet="
                            processGroups;
                            context: { $implicit: authorizedProcessGroupReferences }
                        "></ng-container>
                </ul>
            </li>
            <li *ngIf="unauthorizedProcessGroupReferences.length > 0">
                <h4>
                    <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>
            <ng-container *ngIf="references.length > 0">
                <li *ngFor="let reference of references">
                    <a [routerLink]="getRouteForReference(reference)" mat-dialog-close="ROUTED">{{
                        reference.component.name
                    }}</a>
                </li>
            </ng-container>
        </ng-template>
        <ng-template #unauthorized let-references>
            <ng-container *ngIf="references.length > 0">
                <li *ngFor="let reference of references">
                    <div class="unset">{{ reference.id }}</div>
                </li>
            </ng-container>
        </ng-template>
    </ng-template>
</div>
