@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>
<p class="deploy-intro">
  Configure and deploy Data Controller to your Viya environment. Deployment
  creates the backend SAS services and the control library used by the
  application.
</p>
<hr />

<div class="deploy-field">
  <label class="clr-control-label">App Loc</label>
  <p class="deploy-field-description">
    The SAS drive folder in which the Data Controller frontend and services are
    deployed. Derived from your deployment configuration &mdash; it cannot be
    changed here.
  </p>
  <div class="clr-control-container">
    <div class="clr-input-wrapper">
      <p class="m-0">{{ appLoc }}</p>
    </div>
  </div>
</div>

<div class="deploy-field">
  <label for="dcloc" class="clr-control-label">DC Loc</label>
  <p class="deploy-field-description">
    A physical directory on the compute server to which the deployment user can
    write. Data Controller stores its control tables, staging area and audit
    history here.
  </p>
  <div class="clr-control-container dc-loc-input-wrapper">
    <div class="clr-input-wrapper small-mt">
      <input clrInput name="dcloc" [(ngModel)]="dcPath" />
    </div>
  </div>
</div>

<div class="deploy-field">
  <label for="adminGroup" class="clr-control-label">SAS Admin group</label>
  <p class="deploy-field-description">
    The group you select becomes the Data Controller Admin Group &mdash;
    everyone in it will have unrestricted access to Data Controller. By default
    the list is filtered to the groups your identity
    @if (currentUserInfo?.id) {
      (<strong>{{ currentUserInfo?.id }}</strong
      >)
    }
    is a member of. Toggle below to list every group on the Viya server.
  </p>
  <clr-toggle-container class="mt-0">
    <clr-toggle-wrapper>
      <input
        id="show-all-groups-toggle"
        type="checkbox"
        [(ngModel)]="showAllGroups"
        (ngModelChange)="onShowAllGroupsChange()"
        clrToggle
      />
      <label for="show-all-groups-toggle">Show all groups</label>
    </clr-toggle-wrapper>
  </clr-toggle-container>
  <div class="clr-control-container">
    <div class="clr-input-wrapper small-mt">
      @if (!adminGroupsLoading) {
        <select clrSelect name="adminGroup" [(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>
</div>

@if (!showAllContexts) {
  <div class="deploy-field">
    <label for="batchId" class="clr-control-label">Batch ID</label>
    <p class="deploy-field-description">
      The batch identity (<code>runServerAs</code>) under which Data Controller
      jobs will execute. It is used to filter the Compute Context dropdown below
      to only the contexts running as this identity.
    </p>
    <div class="clr-control-container">
      <div class="clr-input-wrapper small-mt">
        @if (!computeContextsLoading) {
          <select
            clrSelect
            name="batchId"
            [(ngModel)]="selectedBatchId"
            (ngModelChange)="onBatchIdChange()"
          >
            @for (batchId of batchIds; track batchId) {
              <option [value]="batchId">
                {{ batchId }}
              </option>
            }
          </select>
        }
        @if (computeContextsLoading) {
          <clr-spinner clrInline class="spinner-sm"></clr-spinner>
        }
      </div>
    </div>
  </div>
}

<div class="deploy-field">
  <label for="computeContext" class="clr-control-label">Compute Context</label>
  <p class="deploy-field-description">
    The compute context used to run the Data Controller services (including the
    <code>makedata</code> deployment job). Only reusable contexts matching the
    selected Batch ID are shown, unless the toggle below is enabled.
  </p>
  <clr-toggle-container class="mt-0">
    <clr-toggle-wrapper>
      <input
        id="show-all-contexts-toggle"
        type="checkbox"
        [(ngModel)]="showAllContexts"
        (ngModelChange)="onShowAllContextsChange()"
        clrToggle
      />
      <label for="show-all-contexts-toggle">Show all compute contexts</label>
    </clr-toggle-wrapper>
  </clr-toggle-container>
  <div class="clr-control-container">
    <div class="clr-input-wrapper small-mt">
      @if (!computeContextsLoading) {
        <select
          clrSelect
          name="computeContext"
          (ngModelChange)="onComputeContextChange($event)"
          [(ngModel)]="selectedComputeContext"
        >
          @for (
            computeContext of getFilteredComputeContexts();
            track computeContext
          ) {
            <option [value]="computeContext.id">
              {{ computeContext.name }}
            </option>
          }
        </select>
      }
      @if (computeContextsLoading) {
        <clr-spinner clrInline class="spinner-sm"></clr-spinner>
      }
    </div>
  </div>
</div>

@if (runningAsUser) {
  <div class="deploy-field">
    <label class="clr-control-label">Running as user</label>
    <p class="deploy-field-description">
      The identity under which Data Controller jobs will run with the selected
      compute context. This user must be able to write to the DC Loc above.
    </p>
    <div class="clr-control-container">
      <div class="clr-input-wrapper">
        <p class="m-0">
          <strong>{{ runningAsUser }}</strong>
        </p>
      </div>
    </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>