<!--
  ~ 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="flex flex-col gap-y-4">
    <div class="flex flex-col mb-5">
        <div>From Processor</div>
        <div [title]="name" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
            {{ name }}
        </div>
    </div>
    <div class="flex flex-col mb-5">
        <div>Within Group</div>
        <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
            {{ groupName }}
        </div>
    </div>
    <div class="flex flex-col">
        <div>Relationships</div>
        <div class="flex flex-col gap-y-3">
            @for (item of relationshipItems; track item; let i = $index) {
                @if ((isDisabled && item.selected) || !isDisabled) {
                    <div class="flex flex-col gap-y-1.5">
                        <div class="flex items-center gap-x-2">
                            <mat-checkbox
                                color="primary"
                                [(ngModel)]="item.selected"
                                name="selected-{{ i }}"
                                (change)="handleChanged()"
                                [disabled]="isDisabled">
                                <span [class.surface-color]="!item.available" [class.unset]="!item.available">{{
                                    item.relationshipName
                                }}</span>
                            </mat-checkbox>
                        </div>
                    </div>
                }
            }
        </div>
    </div>
</div>
