<app-sidebar>
  <div class="api-collection-dropdown">
    <clr-select-container>
      <label>API Collection</label>
      <select
        clrSelect
        id="repository"
        [(ngModel)]="collection"
        (change)="updateSelectedCollection()"
      >
        @for (collection of collections | keyvalue; track collection) {
          <optgroup [label]="collection.key">
            @for (
              endpoint of collections[collection.key] | keyvalue;
              track endpoint
            ) {
              <option value="{{ endpoint.value }}">
                {{ endpoint.key }}
              </option>
            }
          </optgroup>
        }
      </select>
    </clr-select-container>
  </div>

  @if (endpointLinks.length < 1 && !collectionLoading) {
    <p class="w-100 text-center">Select collection to start</p>
  }

  <div class="d-flex clr-justify-content-center">
    @if (collectionLoading) {
      <clr-spinner clrMedium></clr-spinner>
    }
  </div>

  <clr-tree>
    @if (endpointLinks.length > 0) {
      <clr-tree-node class="search-node">
        <div class="tree-search-wrapper">
          <input
            appStealFocus
            clrInput
            #searchLinksTreeInput
            placeholder="Search links"
            name="input"
            [(ngModel)]="linksSearch"
            (keyup)="linksListOnFilter()"
            autocomplete="off"
          />
          @if (searchLinksTreeInput.value.length < 1) {
            <clr-icon shape="search"></clr-icon>
          }
          @if (searchLinksTreeInput.value.length > 0) {
            <clr-icon
              (click)="linksSearch = ''; linksListOnFilter()"
              shape="times"
            ></clr-icon>
          }
        </div>
      </clr-tree-node>
    }
    @for (link of endpointLinks; track link) {
      @if (!link['hidden']) {
        <clr-tree-node
          (click)="treeNodeClicked($event, link, endpointLinks)"
          [(clrExpanded)]="link['expanded']"
          [clrLoading]="!!link['loadingTables'] && !link.tables"
        >
          <p (click)="linkOnClick(link)" class="m-0 cursor-pointer">
            <clr-icon shape="block"></clr-icon>
            {{ link.method }} {{ link.rel }}
          </p>
        </clr-tree-node>
      }
    }
  </clr-tree>

  <clr-tree>
    @if (endpointItems.length > 0) {
      <clr-tree-node class="search-node">
        <div class="tree-search-wrapper">
          <input
            clrInput
            #searchItemsTreeInput
            placeholder="Search items"
            name="input"
            [(ngModel)]="itemsSearch"
            (keyup)="itemsListOnFilter()"
            autocomplete="off"
          />
          @if (searchItemsTreeInput.value.length < 1) {
            <clr-icon shape="search"></clr-icon>
          }
          @if (searchItemsTreeInput.value.length > 0) {
            <clr-icon
              (click)="itemsSearch = ''; itemsListOnFilter()"
              shape="times"
            ></clr-icon>
          }
        </div>
      </clr-tree-node>
    }
    @for (item of endpointItems; track item) {
      @if (!item['hidden']) {
        <clr-tree-node
          (click)="treeNodeClicked($event, item, endpointItems)"
          [(clrExpanded)]="item['expanded']"
          [clrLoading]="!!item['loadingTables'] && !item.tables"
        >
          <p (click)="itemOnClick(item)" class="m-0 cursor-pointer">
            <clr-icon shape="block"></clr-icon>
            {{ item.name || item.id }}
          </p>
        </clr-tree-node>
      }
    }
  </clr-tree>
</app-sidebar>

<div class="content-area">
  <div class="card h-100 p-10 d-flex clr-flex-column">
    <div
      class="w-100 d-flex clr-align-items-center clr-justify-content-center sition-relative"
    >
      <div class="json-toggle d-flex clr-align-items-center">
        <clr-toggle-container class="m-0">
          <clr-toggle-wrapper>
            <input [(ngModel)]="rawJson" type="checkbox" clrToggle />
            <label>RAW Json</label>
          </clr-toggle-wrapper>
        </clr-toggle-container>

        <button (click)="copyJson()" type="button" class="btn btn-link btn-sm">
          <clr-icon shape="copy"></clr-icon>
        </button>
      </div>

      <h4 class="text-center m-0">
        API Explorer
        @if (endpointLoading) {
          <clr-spinner clrSmall></clr-spinner>
        }
      </h4>
    </div>
    <hr class="w-100 light" />

    @if (collection.length > 0) {
      <div class="d-flex clr-align-items-center clr-justify-content-between">
        <span class="d-flex clr-align-items-center">
          GET
          <p
            (click)="onBreadcumsClick($event)"
            class="text-center endpoint-breadcrums"
            [innerHTML]="endpoint.url | linkinze"
          ></p>
          <button
            (click)="copyBreadcrums()"
            type="button"
            class="btn btn-link btn-sm"
          >
            <clr-icon shape="copy"></clr-icon>
          </button>
        </span>
        <div class="d-flex clr-align-items-center query-params">
          <clr-input-container class="m-0">
            <label>Start</label>
            <input
              clrInput
              type="number"
              [(ngModel)]="endpoint.start"
              [disabled]="endpoint.start === undefined"
            />
          </clr-input-container>
          <clr-input-container class="m-0">
            <label>Limit</label>
            <input
              clrInput
              type="number"
              [(ngModel)]="endpoint.limit"
              [disabled]="endpoint.limit === undefined"
            />
          </clr-input-container>
          <button
            (click)="applyQueryParams()"
            type="button"
            class="btn btn-link btn-sm"
            [disabled]="
              endpoint.limit === undefined && endpoint.start === undefined
            "
          >
            <clr-icon shape="play"></clr-icon>
          </button>
        </div>
      </div>
      <pre class="json-area">
        @if (endpointJson) {
          @if (!rawJson) {
            <ngx-json-viewer class="d-block" [json]="endpointJson" [expanded]="false" (segmentLinkClicked)="onJsonLinkClick($event)"></ngx-json-viewer>
          }
          @if (rawJson) {
            {{ endpointJson | prettyjson }}
          }
        }
      </pre>
    }
  </div>
</div>

./viya-api-explorer.component.scss