<div class="container">
  <div class="row">
    <div class="col-12">

      <h1>{{headerMessage | translate: {id: item.handle} }}</h1>
      <p>{{descriptionMessage | translate}}</p>
      <ds-modify-item-overview [item]="item"></ds-modify-item-overview>

      <ng-container>

        @if ((typeDTOs$ | async) && (typeDTOs$ | async).length > 0) {
          <div class="mb-4">
            {{'virtual-metadata.delete-item.info' | translate}}
            @for (typeDto of (typeDTOs$ | async); track typeDto) {
              <div class="mb-4">
                <div *ngVar="(typeDto.isSelected$ | async) as selected"
                  class="d-flex flex-row">
                  <div class="m-2" (click)="setSelected(typeDto.relationshipType, !selected)">
                    <label>
                      <input type="checkbox" [checked]="selected" [disabled]="isDeleting$ | async">
                    </label>
                  </div>
                  <div class="flex-column flex-grow-1">
                    <h5 (click)="setSelected(typeDto.relationshipType, !selected)">
                      {{getRelationshipMessageKey(typeDto.label$ | async) | translate}}
                    </h5>
                    @for (relationshipDto of (typeDto.relationshipDTOs$ | async); track relationshipDto.relationship.id) {
                      <div
                        class="d-flex flex-row">
                        <ng-container *ngVar="(relationshipDto.relatedItem$ | async) as relatedItem">
                          @if (relatedItem) {
                            <ds-listable-object-component-loader
                              [object]="relatedItem"
                              [viewMode]="viewMode">
                            </ds-listable-object-component-loader>
                          }
                          <div class="ms-auto">
                            <div class="btn-group">
                              <button class="btn btn-outline-info btn-sm"
                                (click)="openVirtualMetadataModal(virtualMetadataModal)">
                                <i class="fas fa-info fa-fw"></i>
                              </button>
                            </div>
                          </div>
                          <ng-template #virtualMetadataModal>
                            <div class="thumb-font-1">
                              <div class="modal-header">
                                {{'virtual-metadata.delete-item.modal-head' | translate}}
                                <button type="button" class="btn-close"
                                  (click)="closeVirtualMetadataModal()" aria-label="Close">
                                </button>
                              </div>
                              <div class="modal-body">
                                @if (relatedItem) {
                                  <ds-listable-object-component-loader
                                    [object]="relatedItem"
                                    [viewMode]="viewMode">
                                  </ds-listable-object-component-loader>
                                }
                                @for (metadata of (relationshipDto.virtualMetadata$ | async); track metadata) {
                                  <div>
                                    <div>
                                      <div class="fw-bold">
                                        {{metadata.metadataField}}
                                      </div>
                                      <div>
                                        {{metadata.metadataValue.value}}
                                      </div>
                                    </div>
                                  </div>
                                }
                              </div>
                            </div>
                          </ng-template>
                        </ng-container>
                      </div>
                    }
                  </div>
                </div>
              </div>
            }
          </div>
        }

      </ng-container>

      <div class="space-children-mr">
        <button [dsBtnDisabled]="isDeleting$ | async" (click)="performAction()"
          class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
        </button>
        <button [dsBtnDisabled]="isDeleting$ | async" [routerLink]="[itemPageRoute, 'edit']"
          class="btn btn-outline-secondary cancel">
          {{cancelMessage| translate}}
        </button>
      </div>

    </div>
  </div>
</div>
