hisptz/integration-app

<div class="row">
  <div class="col-12">
    <mat-tab-group mat-stretch-tabs appearance="outline" class="w-100" dynamicHeight="true">
      <mat-tab label="General" class="w-100">
        <div class="row mt-3">
          <div class="col-12">
            <mat-form-field class="w-100" appearance="outline">
              <mat-label>Name</mat-label>
              <input matInput placeholder="Integration name">
            </mat-form-field>
          </div>

          <div class="col-12">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Description</mat-label>
              <textarea matInput placeholder="Integration description"></textarea>
            </mat-form-field>
          </div>

          <div class="col-6">
            <mat-form-field class="w-100" appearance="outline">
              <mat-label>Integration Type</mat-label>
              <mat-select name="" value="SENDING">
                <mat-option *ngFor="let integrationType of integrationTypes" [value]="integrationType.id">
                  {{integrationType.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>

          <div class="col-6">
            <mat-form-field class="w-100" appearance="outline">
              <mat-label>Integration Strategy</mat-label>
              <mat-select name="" value="PASS_THROUGH">
                <mat-option [value]="'SENDING'" *ngFor="let integrationStrategy of integrationStrategies">
                  {{integrationStrategy.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
      </mat-tab>
      <mat-tab label="Local">
        <div class="row mt-3">
          <div class="col-12">
            <mat-form-field class="w-100" appearance="outline">
              <mat-label>Data source</mat-label>
              <mat-select name="" value="PASS_THROUGH">
                <mat-option [value]="dataSource.id" *ngFor="let dataSource of dataSources">
                  {{dataSource.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>

            <mat-form-field class="w-100" appearance="outline">
              <mat-label>Dataset or Program</mat-label>
              <mat-select name="" value="PASS_THROUGH">
                <mat-option [value]="dataSource.id" *ngFor="let dataSource of dataSources">
                  {{dataSource.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
      </mat-tab>
      <mat-tab label="Remote">
        <div class="row mt-3">
          <div class="col-12">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>URL</mat-label>
              <input matInput placeholder="Remote URL">
            </mat-form-field>
          </div>

          <div class="col-6">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Username</mat-label>
              <input matInput placeholder="Remote username">
            </mat-form-field>
          </div>

          <div class="col-6">
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Password</mat-label>
              <input matInput placeholder="Remote password" type="password">
            </mat-form-field>
          </div>

          <div class="col-6">
            <mat-form-field class="w-100" appearance="outline">
              <mat-label>Content Type</mat-label>
              <mat-select name="" value="json">
                <mat-option [value]="contentType.id" *ngFor="let contentType of contentTypes">
                  {{contentType.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
      </mat-tab>
    </mat-tab-group>

    <div class="row mt-3">
      <div class="col-12"><button mat-flat-button color="primary">Save Changes</button>
        <button class="ml-3" mat-stroked-button>Cancel</button></div>
    </div>
  </div>
</div>