<clr-modal
  [clrModalOpen]="opened"
  (clrModalOpenChange)="modalOpenChange($event)"
  clrModalSize="xl"
  class="requests-modal"
>
  <h3 class="modal-title">
    Request History
    <p class="mt-0 d-inline-block">App Location: {{ sasjsConfig.appLoc }}</p>
  </h3>
  <div class="modal-body h-70vh">
    @if (sasjsRequests.length < 1) {
      <p class="no-reqs">No requests made</p>
    }

    @if (opened && sasjsRequests.length > 0) {
      <clr-stack-view>
        @for (programLog of sasjsRequests; track programLog; let i = $index) {
          <clr-stack-block [id]="'request_' + i" [clrStackViewLevel]="1">
            <clr-stack-label>
              {{ programLog.serviceLink }}
              <span class="ml-10">
                @if (programLog.logWarnings?.length! > 0) {
                  <span>
                    <clr-icon
                      class="mb-5 color-green"
                      shape="exclamation-circle"
                    ></clr-icon>
                  </span>
                }
                @if (programLog.logErrors?.length! > 0) {
                  <span>
                    <clr-icon
                      class="mb-5 color-red"
                      shape="exclamation-triangle"
                    ></clr-icon>
                  </span>
                }
              </span>
            </clr-stack-label>
            <clr-stack-content>{{
              programLog.parsedTimestamp
            }}</clr-stack-content>
            <clr-stack-block class="content">
              <clr-stack-content>
                <clr-tabs>
                  <clr-tab>
                    <button clrTabLink>SAS Log</button>
                    <ng-template [(clrIfActive)]="sasLogActive">
                      <clr-tab-content>
                        <clr-tree>
                          @if (programLog.logErrors) {
                            <clr-tree-node class="err-links">
                              <clr-icon
                                class="color-red"
                                shape="exclamation-triangle"
                              ></clr-icon>
                              Errors ({{ programLog.logErrors.length! }})
                              @for (
                                err of programLog.logErrors || [];
                                track err
                              ) {
                                <clr-tree-node
                                  (click)="
                                    goToLogLine(err, 'request_' + i, 'error')
                                  "
                                >
                                  <button class="clr-treenode-link">
                                    {{ err }}
                                  </button>
                                </clr-tree-node>
                              }
                            </clr-tree-node>
                          }
                          @if (programLog.logWarnings) {
                            <clr-tree-node class="err-links">
                              <clr-icon
                                class="color-green"
                                shape="exclamation-circle"
                              ></clr-icon>
                              Warnings ({{ programLog.logWarnings.length! }})
                              @for (
                                warning of programLog.logWarnings || [];
                                track warning
                              ) {
                                <clr-tree-node
                                  (click)="
                                    goToLogLine(
                                      warning,
                                      'request_' + i,
                                      'warning'
                                    )
                                  "
                                >
                                  <button class="clr-treenode-link">
                                    {{ warning }}
                                  </button>
                                </clr-tree-node>
                              }
                            </clr-tree-node>
                          }
                        </clr-tree>
                        @if (serverType !== 'SASVIYA') {
                          <div
                            class="log-wrapper saslog"
                            [innerHTML]="programLog.logFile"
                          ></div>
                        }
                        @if (serverType === 'SASVIYA') {
                          <div
                            class="log-wrapper saslog viya"
                            [textContent]="programLog.logFile"
                          ></div>
                        }
                        @if (programLog.logFile.length > 0) {
                          <button
                            (click)="downloadLog(programLog.logFile)"
                            type="button"
                            class="btn btn-link"
                          >
                            Download
                          </button>
                        }
                      </clr-tab-content>
                    </ng-template>
                  </clr-tab>
                  <clr-tab>
                    <button clrTabLink>SAS Source Code</button>
                    <ng-template [(clrIfActive)]="sasSourceCodeActive">
                      <clr-tab-content>
                        <div class="log-wrapper">
                          {{ programLog.sourceCode }}
                        </div>
                        @if (programLog.sourceCode.length > 0) {
                          <button
                            (click)="downloadSourceCode(programLog.sourceCode)"
                            type="button"
                            class="btn btn-link"
                          >
                            Download
                          </button>
                        }
                      </clr-tab-content>
                    </ng-template>
                  </clr-tab>
                  <clr-tab>
                    <button clrTabLink>SAS Generated Code</button>
                    <ng-template [(clrIfActive)]="sasGeneratedCodeActive">
                      <clr-tab-content>
                        <div class="log-wrapper">
                          {{ programLog.generatedCode }}
                        </div>
                        @if (programLog.generatedCode.length > 0) {
                          <button
                            (click)="
                              downloadGeneratedCode(programLog.generatedCode)
                            "
                            type="button"
                            class="btn btn-link"
                          >
                            Download
                          </button>
                        }
                      </clr-tab-content>
                    </ng-template>
                  </clr-tab>
                  @if (programLog.SASWORK) {
                    <clr-tab>
                      <clr-dropdown
                        [clrCloseMenuOnItemClick]="true"
                        class="work-tables-dropdown"
                        clrTabLink
                      >
                        <button clrDropdownTrigger>
                          SAS Work Tables
                          <clr-icon shape="caret down"></clr-icon>
                        </button>
                        <clr-dropdown-menu *clrIfOpen>
                          @for (
                            table of programLog.SASWORK | keyvalue;
                            track table
                          ) {
                            <div
                              (click)="
                                programLog.selectedTable = $any(table).key
                              "
                              [class.selected]="
                                programLog.selectedTable === table.key
                              "
                              class="dropdown-item"
                              clrDropdownItem
                            >
                              {{ table.key }}
                            </div>
                          }
                        </clr-dropdown-menu>
                      </clr-dropdown>
                      <ng-template [(clrIfActive)]="tablesActive">
                        <clr-tab-content>
                          @if (programLog.selectedTable) {
                            <p class="mt-10">
                              <strong
                                >{{ programLog.selectedTable }} (first 10 rows)
                              </strong>
                            </p>
                          }
                          <div class="min-h-50vh">
                            @if (programLog.selectedTable) {
                              <table class="table mt-10">
                                <thead>
                                  <tr>
                                    @for (
                                      column of programLog.SASWORK[
                                        programLog.selectedTable
                                      ].first10rows[0] | keyvalue;
                                      track column
                                    ) {
                                      <th>
                                        {{ column.key }}
                                      </th>
                                    }
                                  </tr>
                                </thead>
                                <tbody>
                                  @for (
                                    row of programLog.SASWORK[
                                      programLog.selectedTable
                                    ].first10rows;
                                    track row
                                  ) {
                                    <tr>
                                      @for (
                                        column of programLog.SASWORK[
                                          programLog.selectedTable
                                        ].first10rows[0] | keyvalue;
                                        track column
                                      ) {
                                        <td>
                                          {{ row[$any(column).key] }}
                                        </td>
                                      }
                                    </tr>
                                  }
                                </tbody>
                              </table>
                            }
                          </div>
                        </clr-tab-content>
                      </ng-template>
                    </clr-tab>
                  }
                </clr-tabs>
              </clr-stack-content>
            </clr-stack-block>
          </clr-stack-block>
        }
      </clr-stack-view>
    }
  </div>
</clr-modal>
