@if (autodeploying) {
  <div class="auto-deploy">
    <div class="spinner-box">
      @if (!autodeployDone) {
        <span class="spinner spinner-md"> Loading... </span>
        <p>Deploying...</p>
      }
      @if (autodeployDone) {
        <p class="m-0 align-self-start">Done</p>
        <hr class="w-100" />
        @if (autoDeployStatus.deployServicePack !== null) {
          <div class="deploy-status-row">
            @if (autoDeployStatus.deployServicePack === true) {
              <clr-icon
                class="deploy-success"
                shape="success-standard"
              ></clr-icon>
            }
            @if (!autoDeployStatus.deployServicePack === false) {
              <clr-icon class="deploy-error" shape="times-circle"></clr-icon>
            }
            <p>Deploy SAS Jobs</p>
          </div>
        }
        @if (autoDeployStatus.runMakeData !== null) {
          <div class="deploy-status-row">
            @if (autoDeployStatus.runMakeData) {
              <clr-icon
                class="deploy-success"
                shape="success-standard"
              ></clr-icon>
            }
            @if (autoDeployStatus.runMakeData === false) {
              <clr-icon 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">
            @if (
              autoDeployStatus.deployServicePack === false ||
              autoDeployStatus.runMakeData === false
            ) {
              <clr-icon 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>
      }
    </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">
    @if (!adminGroupsLoading) {
      <select clrSelect name="options" [(ngModel)]="selectedAdminGroup">
        @for (adminGroup of adminGroups; track adminGroup) {
          <option [value]="adminGroup.id">
            {{ adminGroup.name }}
          </option>
        }
      </select>
    }
    @if (adminGroupsLoading) {
      <clr-spinner clrInline class="spinner-sm"></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">
    @if (!computeContextsLoading) {
      <select
        clrSelect
        name="options"
        (ngModelChange)="onComputeContextChange($event)"
        [(ngModel)]="selectedComputeContext"
      >
        @for (computeContext of computeContexts; track computeContext) {
          <option [value]="computeContext.id">
            {{ computeContext.name }}
          </option>
        }
      </select>
    }
    @if (computeContextsLoading) {
      <clr-spinner clrInline class="spinner-sm"></clr-spinner>
    }
  </div>
</div>

@if (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>
}

<!-- 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>