<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">
    <p *ngIf="sasjsRequests?.length! < 1" class="no-reqs">No requests made</p>

    <clr-stack-view *ngIf="opened && sasjsRequests?.length! > 0">
      <clr-stack-block
        *ngFor="let programLog of sasjsRequests; let i = index"
        [id]="'request_' + i"
        [clrStackViewLevel]="1"
      >
        <clr-stack-label>
          {{ programLog.serviceLink }}
          <span class="ml-10">
            <span *ngIf="programLog.logWarnings?.length! > 0">
              <clr-icon
                class="mb-5 color-green"
                shape="exclamation-circle"
              ></clr-icon>
            </span>

            <span *ngIf="programLog.logErrors?.length! > 0">
              <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>
                      <clr-tree-node
                        *ngIf="programLog.logErrors"
                        class="err-links"
                      >
                        <clr-icon
                          class="color-red"
                          shape="exclamation-triangle"
                        ></clr-icon>
                        Errors ({{ programLog.logErrors.length! }})
                        <clr-tree-node
                          (click)="goToLogLine(err, 'request_' + i, 'error')"
                          *ngFor="let err of programLog.logErrors || []"
                        >
                          <button class="clr-treenode-link">
                            {{ err }}
                          </button>
                        </clr-tree-node>
                      </clr-tree-node>

                      <clr-tree-node
                        *ngIf="programLog.logWarnings"
                        class="err-links"
                      >
                        <clr-icon
                          class="color-green"
                          shape="exclamation-circle"
                        ></clr-icon>
                        Warnings ({{ programLog.logWarnings.length! }})
                        <clr-tree-node
                          (click)="
                            goToLogLine(warning, 'request_' + i, 'warning')
                          "
                          *ngFor="let warning of programLog.logWarnings || []"
                        >
                          <button class="clr-treenode-link">
                            {{ warning }}
                          </button>
                        </clr-tree-node>
                      </clr-tree-node>
                    </clr-tree>

                    <div
                      *ngIf="serverType !== 'SASVIYA'"
                      class="log-wrapper saslog"
                      [innerHTML]="programLog.logFile"
                    ></div>

                    <div
                      *ngIf="serverType === 'SASVIYA'"
                      class="log-wrapper saslog viya"
                      [textContent]="programLog.logFile"
                    ></div>

                    <button
                      *ngIf="programLog.logFile?.length! > 0"
                      (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>
                    <button
                      *ngIf="programLog.sourceCode?.length! > 0"
                      (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>
                    <button
                      *ngIf="programLog.generatedCode?.length! > 0"
                      (click)="downloadGeneratedCode(programLog.generatedCode)"
                      type="button"
                      class="btn btn-link"
                    >
                      Download
                    </button>
                  </clr-tab-content>
                </ng-template>
              </clr-tab>

              <clr-tab *ngIf="programLog.SASWORK">
                <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>
                    <div
                      *ngFor="let table of programLog.SASWORK | keyvalue"
                      (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>
                    <p *ngIf="programLog.selectedTable" class="mt-10">
                      <strong
                        >{{ programLog.selectedTable }} (first 10 rows)
                      </strong>
                    </p>

                    <div class="min-h-50vh">
                      <table
                        *ngIf="programLog.selectedTable"
                        class="table mt-10"
                      >
                        <thead>
                          <tr>
                            <th
                              *ngFor="
                                let column of programLog.SASWORK[
                                  programLog.selectedTable
                                ].first10rows[0] | keyvalue
                              "
                            >
                              {{ column.key }}
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr
                            *ngFor="
                              let row of programLog.SASWORK[
                                programLog.selectedTable
                              ].first10rows
                            "
                          >
                            <td
                              *ngFor="
                                let column of programLog.SASWORK[
                                  programLog.selectedTable
                                ].first10rows[0] | keyvalue
                              "
                            >
                              {{ 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>
