<div class="content-area">
  <div
    class="card p-10 d-flex clr-flex-column clr-align-items-center clr-justify-content-center"
  >
    <h4 class="text-center m-0">System information</h4>
    <hr class="w-100 light" />
    <div class="content-box d-flex clr-flex-column">
      <div
        class="sys-info d-flex clr-justify-content-center clr-flex-column clr-flex-lg-row"
      >
        <div>
          <h6 cds-text="subsection" class="mb-10">
            Environment Details <span class="dark"></span>
          </h6>
          <p cds-text="label" class="m-0">
            SYSSITE: <span class="dark">{{ environmentInfo?.SYSSITE }}</span>
          </p>
          <p cds-text="label" class="m-0">
            SYSSCPL: <span class="dark">{{ environmentInfo?.SYSSCPL }}</span>
          </p>
          <p cds-text="label" class="m-0">
            SYSTCPIPHOSTNAME:
            <span class="dark">{{ environmentInfo?.SYSTCPIPHOSTNAME }}</span>
          </p>
          <p cds-text="label" class="m-0">
            SYSVLONG: <span class="dark">{{ environmentInfo?.SYSVLONG }}</span>
          </p>
          <p cds-text="label" class="m-0">
            MEMSIZE: <span class="dark">{{ environmentInfo?.MEMSIZE }}</span>
          </p>
          <p cds-text="label" class="m-0">
            SYSPROCESSMODE:
            <span class="dark">{{ environmentInfo?.SYSPROCESSMODE }}</span>
          </p>
          <p cds-text="label" class="m-0">
            SYSHOSTNAME:
            <span class="dark">{{ environmentInfo?.SYSHOSTNAME }}</span>
          </p>
          <p cds-text="label" class="m-0">
            SYSUSERID:
            <span class="dark">{{ environmentInfo?.SYSUSERID }}</span>
          </p>
          <p cds-text="label" class="m-0">
            SYSHOSTINFOLONG:
            <span class="dark">{{ environmentInfo?.SYSHOSTINFOLONG }}</span>
          </p>
          <p cds-text="label" class="m-0">
            SYSENCODING:
            <span class="dark">{{ environmentInfo?.SYSENCODING }}</span>
          </p>
          <p cds-text="label" class="m-0">
            AUTOEXEC: <span class="dark">{{ environmentInfo?.AUTOEXEC }}</span>
          </p>
        </div>

        <div class="d-flex clr-justify-content-lg-center">
          <div>
            <h6 cds-text="subsection" class="mb-10">
              Data Controller Details <span class="dark"></span>
            </h6>
            <p cds-text="label" class="m-0">
              Application version:
              <span class="dark">{{ appInfo.appVersion }}</span>
            </p>
            <p cds-text="label" class="m-0">
              Build timestamp:
              <span class="dark">{{ appInfo.buildTimestamp }}</span>
            </p>
            <p cds-text="label" class="m-0">
              Adapter version:
              <span class="dark">{{ appInfo.adapterVersion }}</span>
            </p>
            <p cds-text="label" class="m-0">
              HTTP: <span class="dark">{{ http ? 'YES' : 'NO' }}</span>
            </p>
            <p cds-text="label" class="m-0">
              DC Admin Group:
              <span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
            </p>
            <p cds-text="label" class="m-0">
              App Location:
              <span class="dark">{{ environmentInfo?.APP_LOC }}</span>
            </p>
          </div>
        </div>

        <div>
          <h6 cds-text="subsection" class="mb-10">
            Licence details <span class="dark"></span>
          </h6>
          <p cds-text="label" class="m-0">
            Valid until:
            <span class="dark">{{ licenceInfo?.valid_until }}</span>
          </p>
          <p cds-text="label" class="m-0">
            Users allowed:
            <span class="dark">{{ licenceInfo?.users_allowed }}</span>
          </p>
          <p cds-text="label" class="m-0">
            Site IDs:
            <span class="dark">{{ licenceInfo?.site_id_multiple }}</span>
          </p>
          <p cds-text="label" class="m-0">
            Free Tier:
            <span class="dark">{{ licenceInfo?.demo ? 'YES' : 'NO' }}</span>
          </p>
          <p
            *ngIf="licenceState.value.viewer_rows_allowed !== Infinity"
            class="m-0"
          >
            Viewer rows limit:
            <span class="dark">{{
              licenceState.value.viewer_rows_allowed
            }}</span>
          </p>
          <p
            *ngIf="licenceState.value.editor_rows_allowed !== Infinity"
            class="m-0"
          >
            Editor rows limit:
            <span class="dark">{{
              licenceState.value.editor_rows_allowed
            }}</span>
          </p>
          <p
            *ngIf="licenceState.value.stage_rows_allowed !== Infinity"
            class="m-0"
          >
            Stage rows limit:
            <span class="dark">{{
              licenceState.value.stage_rows_allowed
            }}</span>
          </p>
          <p
            *ngIf="licenceState.value.history_rows_allowed !== Infinity"
            class="m-0"
          >
            History rows limit:
            <span class="dark">{{
              licenceState.value.history_rows_allowed
            }}</span>
          </p>
          <p
            *ngIf="licenceState.value.submit_rows_limit !== Infinity"
            class="m-0"
          >
            Submit rows limit:
            <span class="dark">{{ licenceState.value.submit_rows_limit }}</span>
          </p>
          <p
            *ngIf="licenceState.value.tables_in_library_limit !== Infinity"
            class="m-0"
          >
            Tables in library limit:
            <span class="dark">{{
              licenceState.value.tables_in_library_limit
            }}</span>
          </p>
          <p *ngIf="licenceState.value.viewbox_limit !== Infinity" class="m-0">
            Viewboxes limit:
            <span class="dark">{{ licenceState.value.viewbox_limit }}</span>
          </p>
          <p
            *ngIf="licenceState.value.lineage_daily_limit !== Infinity"
            class="m-0"
          >
            Lineage daily limit:
            <span class="dark">{{
              licenceState.value.lineage_daily_limit
            }}</span>
          </p>
          <p cds-text="label" class="m-0">
            Viewboxes:
            <span class="dark">{{
              licenceState.value.viewbox ? 'YES' : 'NO'
            }}</span>
          </p>
          <p cds-text="label" class="m-0">
            File Upload:
            <span class="dark">{{
              licenceState.value.fileUpload ? 'YES' : 'NO'
            }}</span>
          </p>
          <p cds-text="label" class="m-0">
            Edit record:
            <span class="dark">{{
              licenceState.value.editRecord ? 'YES' : 'NO'
            }}</span>
          </p>
          <p cds-text="label" class="m-0">
            Add record:
            <span class="dark">{{
              licenceState.value.addRecord ? 'YES' : 'NO'
            }}</span>
          </p>
        </div>
      </div>

      <hr class="w-100 light" />

      <!-- Keep the logic in case we in future have more then 2 themes (light, dark) -->
      <!-- -->
      <!-- <div class="user-action">
        Keep selected theme after reload

        <clr-checkbox-wrapper>
        <input [(ngModel)]="settings.persistSelectedTheme" (change)="settingChange($event)" value="persistDarkMode" type="checkbox" clrToggle />
        </clr-checkbox-wrapper>
      </div> -->

      <ng-container *ngIf="environmentInfo?.ISADMIN === 1">
        <div *ngIf="serverType === 'SAS9'" class="admin-action">
          Refresh Data Lineage

          <button
            (click)="refreshDataLineage()"
            [clrLoading]="refreshingDataLineage"
            class="btn btn-info btn-sm"
          >
            REFRESH
          </button>
        </div>

        <div class="admin-action">
          Refresh Data Catalog

          <button
            (click)="refreshDataCatalog()"
            [clrLoading]="refreshingDataCatalog"
            class="btn btn-info btn-sm"
          >
            REFRESH
          </button>
        </div>

        <div class="admin-action">
          Download Configuration

          <div class="libref-group">
            <clr-tooltip class="libref-tooltip">
              <label clrTooltipTrigger class="libref-label">
                Target DC Library
                <cds-icon shape="info-circle" size="16"></cds-icon>
              </label>
              <clr-tooltip-content
                clrPosition="bottom-left"
                clrSize="md"
                *clrIfOpen
              >
                Enter the target DC library and the downloaded files will
                contain this, instead of the original.
              </clr-tooltip-content>
            </clr-tooltip>

            <input
              type="text"
              class="clr-input libref-input"
              maxlength="8"
              [ngModel]="dcLib"
              (ngModelChange)="targetLibref = $event.toUpperCase()"
              placeholder="e.g. MYLIB"
            />
          </div>
          <button
            (click)="downloadConfiguration()"
            [disabled]="targetLibref !== dcLib && !isValidLibref(targetLibref)"
            class="btn btn-info btn-sm"
          >
            DOWNLOAD
          </button>
        </div>

        <div class="admin-action">
          Update Licence Key

          <button routerLink="/licensing/update" class="btn btn-info btn-sm">
            UPDATE
          </button>
        </div>
      </ng-container>
    </div>
  </div>
</div>

<clr-modal [(clrModalOpen)]="responseModal">
  <h3 class="modal-title">Response</h3>
  <div class="modal-body">
    {{ response }}
  </div>
  <div class="modal-footer">
    <button
      type="button"
      class="btn btn-sm btn-primary"
      (click)="responseModal = false"
    >
      Ok
    </button>
  </div>
</clr-modal>
