<app-sidebar>
  <div class="repo-dropdown">
    <clr-select-container>
      <label>Metadata Repository</label>
      <select
        clrSelect
        id="repository"
        [(ngModel)]="repository"
        (change)="updateSelectedRepository()"
      >
        @for (repository of repositories; track repository) {
          <option value="{{ repository }}">
            {{ repository }}
          </option>
        }
      </select>
    </clr-select-container>
  </div>

  <clr-tree>
    @if (metaDataList) {
      <clr-tree-node class="search-node">
        <div class="tree-search-wrapper">
          <input
            appStealFocus
            clrInput
            #searchLibTreeInput
            placeholder="search SAS Types"
            name="input"
            [(ngModel)]="metaDataSearch"
            (keyup)="metaListOnFilter()"
            autocomplete="off"
          />
          @if (searchLibTreeInput.value.length < 1) {
            <clr-icon shape="search"></clr-icon>
          }
          @if (searchLibTreeInput.value.length > 0) {
            <clr-icon
              (click)="metaDataSearch = ''; metaListOnFilter()"
              shape="times"
            ></clr-icon>
          }
        </div>
      </clr-tree-node>
    }
    @for (metaData of metaDataList; track metaData) {
      @if (!metaData['hidden']) {
        <clr-tree-node
          (click)="treeNodeClicked($event, metaData, metaDataList)"
          [(clrExpanded)]="metaData['expanded']"
          [clrLoading]="metaData['loadingTables'] && !metaData.tables"
        >
          <p
            (click)="
              metaDataId = metaData.ID; metaDataOnClick(metaDataId, metaData)
            "
            class="m-0 cursor-pointer"
          >
            <clr-icon shape="block"></clr-icon>
            {{ metaData.ID }}
          </p>
        </clr-tree-node>
      }
    }
  </clr-tree>
</app-sidebar>

<div class="content-area">
  <div class="card background-transparent-i">
    <h3 class="color-gray">{{ assoTypeSelected }}</h3>

    @if (!loading && !metaObjectList) {
      <div class="no-table-selected">
        <clr-icon
          shape="warning-standard"
          size="60"
          class="is-info icon-dc-fill"
        ></clr-icon>
        <p class="text-center color-gray mt-10" cds-text="section">
          Please select a type
        </p>
      </div>
    }

    @if (loading) {
      <div class="loadingSpinner">
        <span class="spinner"> Loading... </span>
        @if (loading) {
          <div>
            @if (metatypesLoading) {
              <h4>Loading metadata types</h4>
            }
            @if (!metatypesLoading) {
              <h4>Loading metadata objects</h4>
            }
          </div>
        }
      </div>
    }
    @if (showData) {
      <div class="clr-row clr-flex-grow-1">
        <div class="clr-col-6">
          @if (metaObjectList && !objectRoute) {
            <div class="search-input">
              <input
                clrInput
                #searchObjTreeInput
                placeholder="search"
                name="input"
                [(ngModel)]="metaObjectSearch"
                (keyup)="metaObjectOnFilter()"
                autocomplete="off"
              />
            </div>
          }
          <br />
          @if (!objectView) {
            <div class="objects-col">
              <clr-accordion>
                @for (metaObject of metaObjectShowList; track metaObject) {
                  @if (!metaObject['hidden']) {
                    <clr-accordion-panel
                      (clrAccordionPanelOpenChange)="
                        $event ? panelChange($event, metaObject) : ''
                      "
                    >
                      <clr-accordion-title
                        ><clr-icon shape="rack-server"></clr-icon>
                        {{ metaObject.NAME }}
                        <p class="float-right">{{ metaObject.ID }}</p>
                      </clr-accordion-title>
                      <clr-accordion-content *clrIfExpanded>
                        @if (showAcc) {
                          <clr-tree [clrLazy]="true">
                            <clr-tree-node
                              *clrRecursiveFor="
                                let entry of root$ | async;
                                getChildren: getChildren
                              "
                              [clrExpandable]="true"
                            >
                              <div
                                [class.object-header]="!entry.count"
                                class="full-width"
                              >
                                <div>
                                  @if (!entry.count) {
                                    <clr-icon shape="rack-server"></clr-icon>
                                  }
                                  @if (entry.count) {
                                    <clr-icon shape="block"></clr-icon>
                                  }
                                  {{ entry.display }}
                                </div>
                                @if (!entry.count) {
                                  <p class="float-right object-uri">
                                    {{ entry.URI }}
                                  </p>
                                }
                              </div>
                            </clr-tree-node>
                          </clr-tree>
                        }
                      </clr-accordion-content>
                    </clr-accordion-panel>
                  }
                }
              </clr-accordion>
            </div>
          }
          @if (objectView) {
            <div class="objects-col">
              @for (metaObject of metaObjectShowList; track metaObject) {
                <div class="cols-head">
                  <clr-icon shape="rack-server"></clr-icon>
                  <div class="object-text">
                    <p class="m-0 word-break mr-20">
                      {{ metaObject.NAME }}
                    </p>
                    <p class="float-right ml-3">
                      {{ metaObject.ID }}
                    </p>
                  </div>
                </div>
                @if (showAcc) {
                  <clr-tree [clrLazy]="true">
                    <clr-tree-node
                      *clrRecursiveFor="
                        let entry of root$ | async;
                        getChildren: getChildren
                      "
                      [clrExpandable]="true"
                    >
                      <div
                        [class.object-header]="!entry.count"
                        class="full-width"
                      >
                        <div>
                          @if (!entry.count) {
                            <clr-icon shape="rack-server"></clr-icon>
                          }
                          @if (entry.count) {
                            <clr-icon shape="block"></clr-icon>
                          }
                          {{ entry.display }}
                        </div>
                        @if (!entry.count) {
                          <p class="float-right object-uri">
                            {{ entry.URI }}
                          </p>
                        }
                      </div>
                    </clr-tree-node>
                  </clr-tree>
                }
              }
            </div>
          }
        </div>
        <div class="clr-col-6 text-center">
          <h3>{{ assoObjectSelected }}</h3>
          @if (showTable) {
            <clr-datagrid class="datagrid-custom-footer">
              <clr-dg-column>
                TYPE
                <clr-dg-string-filter
                  [clrDgStringFilter]="typeFilter"
                ></clr-dg-string-filter>
              </clr-dg-column>
              <clr-dg-column>
                NAME
                <clr-dg-string-filter
                  [clrDgStringFilter]="nameFilter"
                ></clr-dg-string-filter>
              </clr-dg-column>
              <clr-dg-column>
                VALUE
                <clr-dg-string-filter
                  [clrDgStringFilter]="valueFilter"
                ></clr-dg-string-filter>
              </clr-dg-column>
              <clr-dg-row
                *clrDgItems="let metaObjectAttribute of metaObjectAttributes"
              >
                <clr-dg-cell>{{ metaObjectAttribute.TYPE }}</clr-dg-cell>
                <clr-dg-cell>{{ metaObjectAttribute.NAME }}</clr-dg-cell>
                <clr-dg-cell>{{ metaObjectAttribute.VALUE }}</clr-dg-cell>
              </clr-dg-row>
              <clr-dg-footer>
                <clr-dg-pagination #pagination [clrDgPageSize]="10">
                  <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50, 100]"
                    >Attributes per page</clr-dg-page-size
                  >
                  {{ pagination.firstItem + 1 }} -
                  {{ pagination.lastItem + 1 }} of
                  {{ pagination.totalItems }} Attributes
                </clr-dg-pagination>
              </clr-dg-footer>
            </clr-datagrid>
          }
        </div>
      </div>
    }
  </div>
</div>
