<div *ngIf="loading" class="thinProgress progresStatic progress loop">
  <progress></progress>
</div>

<h4 class="text-center my-15">Sasjs Deploy</h4>
<hr class="light" />

<p class="m-0">
  To configure Data Controller for SAS©, please provide the following details:
</p>

<p class="m-0 mt-10">
  Please specify a physical directory (on the
  <strong> {{ SYSHOSTNAME }}</strong>
  compute server) below, to which user
  <strong>{{ SYSUSERID }}</strong> can write, on behalf of Data Controller.
</p>

<label class="mt-20 clr-control-label">DC Staging Directory</label>
<div class="mb-10 clr-control-container">
  <div class="clr-input-wrapper">
    <input
      class="clr-input"
      placeholder="Type in directory"
      [(ngModel)]="dcDirectory"
    />
  </div>

  <!-- <button
		(click)="directoryBrowse.click()"
		class="mt-15 text-center"
		class="btn btn-sm btn-outline"
	>
		Browse
	</button>
	<input #directoryBrowse hidden (change)="dirChange($event)" type="file" id="ctrl" webkitdirectory directory multiple/> -->
</div>

<p class="m-0 mt-10">
  Below are the list of groups to which you belong. The group you select will
  become the Data Controller Admin Group, and everyone in it will have
  unrestricted access to Data Controller.
</p>

<label class="mt-20 clr-control-label">Data Controller Admin group</label>
<clr-select-container class="mb-10 mt-0 w-50vw">
  <select [(ngModel)]="dcAdminGroup" clrSelect>
    <option
      *ngFor="let adminGroup of dcAdminGroupList"
      [value]="adminGroup.GROUPNAME"
    >
      {{ adminGroup.GROUPNAME }} - {{ adminGroup.GROUPDESC }}
    </option>
  </select>
</clr-select-container>

<p class="m-0 mt-10">
  Now, create the target directory and deploy the control library using the
  admin group selected above:
</p>

<div class="clr-flex">
  <button (click)="makeData()" class="btn btn-success mt-15 text-center">
    SUBMIT
  </button>
</div>

<hr class="light" />

<div class="card-text pb-10">
  <p>You are connected with the following credentials:</p>
  <ul>
    <li>METAPERSON: {{ METAPERSON }}</li>
    <li>SYSUSERID: {{ SYSUSERID }}</li>
    <li>SYSHOSTNAME: {{ SYSHOSTNAME }}</li>
    <li>SYSVLONG: {{ SYSVLONG }}</li>
  </ul>
</div>
