<div *ngIf="autodeploying" class="auto-deploy">
  <div class="spinner-box">
    <ng-container *ngIf="!autodeployDone">
      <span class="spinner spinner-md"> Loading... </span>
      <p>Deploying...</p>
    </ng-container>

    <ng-container *ngIf="autodeployDone">
      <p class="m-0 align-self-start">Done</p>
      <hr class="w-100" />

      <div
        *ngIf="autoDeployStatus.deployServicePack !== null"
        class="deploy-status-row"
      >
        <clr-icon
          *ngIf="autoDeployStatus.deployServicePack === true"
          class="deploy-success"
          shape="success-standard"
        ></clr-icon>
        <clr-icon
          *ngIf="!autoDeployStatus.deployServicePack === false"
          class="deploy-error"
          shape="times-circle"
        ></clr-icon>
        <p>Deploy SAS Jobs</p>
      </div>

      <div
        *ngIf="autoDeployStatus.runMakeData !== null"
        class="deploy-status-row"
      >
        <clr-icon
          *ngIf="autoDeployStatus.runMakeData"
          class="deploy-success"
          shape="success-standard"
        ></clr-icon>
        <clr-icon
          *ngIf="autoDeployStatus.runMakeData === false"
          class="deploy-error"
          shape="times-circle"
        ></clr-icon>
        <p>Create database</p>
      </div>

      <hr class="w-100" />

      <div class="buttons">
        <button (click)="navigateToHome()" class="btn btn-primary mt-15 mr-0">
          <clr-icon
            *ngIf="
              autoDeployStatus.deployServicePack === false ||
              autoDeployStatus.runMakeData === false
            "
            class="deploy-error"
            shape="times-circle"
          ></clr-icon>
          LAUNCH
        </button>

        <button
          (click)="downloadFile(makeDataResponse, 'create-database-log', 'txt')"
          class="btn btn-primary-outline mt-15 mr-0"
        >
          Download log
        </button>
      </div>

      <hr class="w-100" />

      <div class="buttons">
        <button
          (click)="autodeploying = false; autodeployDone = false"
          class="btn btn-primary-outline mt-15 mr-0 align-self-end"
        >
          Close
        </button>

        <button
          (click)="openSasRequestsModal()"
          class="btn btn-primary-outline mt-15 mr-0 align-self-end"
        >
          SAS Requests
        </button>
      </div>
    </ng-container>
  </div>
</div>

<h4 class="text-center my-15">Viya Deploy</h4>
<hr />
<label for="dcloc" class="mt-20 clr-control-label">App Loc</label>
<div class="mb-10 clr-control-container">
  <div class="clr-input-wrapper">
    <p class="mt-0">{{ appLoc }}</p>
  </div>
</div>

<label for="dcloc" class="mt-20 clr-control-label">DC Loc</label>
<div class="mb-10 clr-control-container dc-loc-input-wrapper">
  <div class="clr-input-wrapper small-mt">
    <input clrInput name="dcloc" [(ngModel)]="dcPath" />
  </div>
</div>

<label for="dcloc" class="mt-20 clr-control-label">SAS Admin group</label>
<div class="mb-10 clr-control-container">
  <div class="clr-input-wrapper small-mt">
    <select
      *ngIf="!adminGroupsLoading"
      clrSelect
      name="options"
      [(ngModel)]="selectedAdminGroup"
    >
      <option *ngFor="let adminGroup of adminGroups" [value]="adminGroup.id">
        {{ adminGroup.name }}
      </option>
    </select>
    <clr-spinner
      clrInline
      class="spinner-sm"
      *ngIf="adminGroupsLoading"
    ></clr-spinner>
  </div>
</div>

<label for="computeContext" class="mt-20 clr-control-label"
  >Compute Context</label
>
<div class="mb-10 clr-control-container">
  <div class="clr-input-wrapper small-mt">
    <select
      *ngIf="!computeContextsLoading"
      clrSelect
      name="options"
      (ngModelChange)="onComputeContextChange($event)"
      [(ngModel)]="selectedComputeContext"
    >
      <option
        *ngFor="let computeContext of computeContexts"
        [value]="computeContext.id"
      >
        {{ computeContext.name }}
      </option>
    </select>
    <clr-spinner
      clrInline
      class="spinner-sm"
      *ngIf="computeContextsLoading"
    ></clr-spinner>
  </div>
</div>

<ng-container *ngIf="runningAsUser">
  <label for="dcloc" class="mt-20 clr-control-label">Running as user:</label>
  <div class="mb-10 clr-control-container">
    <div class="clr-input-wrapper">
      <p class="mt-0">{{ runningAsUser }}</p>
    </div>
  </div>
</ng-container>

<!-- Keeping this for a reference in case future VIYA changes and starts allowing separate backend and frontend) -->

<!-- <clr-checkbox-wrapper>
  <input
    clrCheckbox
    [(ngModel)]="recreateDatabase"
    (click)="recreateDatabaseClicked($event)"
    type="checkbox"
    checked
  />
  <label>Recreate database</label>
</clr-checkbox-wrapper> -->

<hr />

<button
  (click)="runAutoDeploy()"
  class="btn-autodeploy btn btn-primary d-inline-block mr-10"
>
  Deploy
</button>

<!-- Keeping this for a reference in case future VIYA changes and starts allowing separate backend and frontend) -->

<!-- <button
  (click)="executeJson()"
  class="btn-autodeploy btn btn-primary d-inline-block mr-10"
  [disabled]="!jsonFile"
>
  Deploy {{ !jsonFile ? '(json file is not available)' : '' }}
</button> -->

<!-- <button
  (click)="uploadJsonAuto.click()"
  class="btn-autodeploy btn btn-primary d-inline-block mr-10"
>
  Upload different file to deploy
</button>
<input
  #uploadJsonAuto
  type="file"
  hidden
  (click)="clearUploadInput($event)"
  (change)="onJsonFileChange($event)"
/> -->

<clr-modal [(clrModalOpen)]="recreateDatabaseModal" [clrModalClosable]="false">
  <h3 class="modal-title">Warning</h3>
  <div class="modal-body">
    This action will recreate the database (if it exists). For an initial
    deployment, this is expected. If this is a re-deployment, you will lose any
    existing tables in <strong>{{ dcPath }}</strong
    >.
  </div>
  <div class="modal-footer">
    <button
      type="button"
      class="btn btn-sm btn-primary"
      (click)="recreateDatabaseModal = false; recreateDatabase = false"
    >
      Cancel
    </button>
    <button
      type="button"
      class="btn btn-sm btn-primary"
      (click)="recreateDatabaseModal = false; recreateDatabase = true"
    >
      Ok
    </button>
  </div>
</clr-modal>
