<div class="form-row">
    <div class="col">
      <form class="form-group form-inline">
        <mat-form-field class="example-full-width">
          <mat-label *ngIf="this.subjectsControl.value !=null" >Subject : {{this.subjectsControl.value.slice(0, this.subjectsControl.value.indexOf(':'))}}</mat-label>
          <input type="text"
                placeholder="Pick one"
                aria-label="Number"
                matInput
                [formControl]="subjectsControl"
                [matAutocomplete]="automainsub"
                style="width: 100%;">
            <mat-autocomplete autoActiveFirstOption #automainsub="matAutocomplete" showPanel="true" [displayWith]="displayFn">
            <mat-option *ngFor="let option of subjectsfilteredOptions | async" [value]="option">
              {{option.split(" : ").pop()}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>
    </div>
    <div class="col">
        <form class="form-group form-inline" [ngStyle]="(stateitemControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}"> 
          <mat-form-field class="example-full-width">
            <mat-label *ngIf="this.stateitemControl.value !=null">State or Item : {{this.stateitemControl.value.slice(0, this.stateitemControl.value.indexOf(':'))}}</mat-label>
            <input type="text"
                  placeholder="Pick one"
                  aria-label="Number"
                  matInput
                  [formControl]="stateitemControl"
                  [matAutocomplete]="autostateitem"
                  >
            <mat-autocomplete autoActiveFirstOption #autostateitem="matAutocomplete" showPanel="true" [displayWith]="displayFn">
              <mat-option *ngFor="let option of stateitemfilteredOptions  | async" [value]="option">
              {{option.split(" : ").pop()}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
      </div>
      <div class="col">
        <form class="form-group form-inline" [ngStyle]="(statevalueControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}"> 
          <mat-form-field class="example-full-width">
            <mat-label *ngIf="statevalueControl.value !=null">State Value : {{statevalueControl.value.slice(0, statevalueControl.value.indexOf(':'))}}</mat-label>
            <input type="text"
                  placeholder="Pick one"
                  aria-label="Number"
                  matInput
                  [formControl]="statevalueControl"
                  [matAutocomplete]="autostatevalue"
                  >
            <mat-autocomplete autoActiveFirstOption #autostatevalue="matAutocomplete" showPanel="true" [displayWith]="displayFn">
              <mat-option *ngFor="let option of statevaluefilteredOptions  | async" [value]="option">
              {{option.split(" : ").pop()}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
      </div>
</div>       
<div class="form-row">
      <div class="col">
        <form class="form-group form-inline">
          <mat-form-field class="example-full-width">
            <mat-label>Shall/shall not</mat-label>
            <input type="text"
                  placeholder="Pick one"
                  aria-label="Number"
                  matInput
                  [formControl]="shallControl"
                  [matAutocomplete]="autoshall"
                  >
            <mat-autocomplete autoActiveFirstOption #autoshall  ="matAutocomplete">
              <mat-option *ngFor="let option of shallfilteredOptions  | async" [value]="option">
                {{option}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
      </div>
      <div class="col">
        <form class="form-group form-inline">
          <mat-form-field class="example-full-width">
            <mat-label>Verb</mat-label>
            <input type="text"
                  placeholder="Pick one"
                  aria-label="Number"
                  matInput
                  [formControl]="verbControl"
                  [matAutocomplete]="autoverb"
                  >
            <mat-autocomplete autoActiveFirstOption #autoverb  ="matAutocomplete">
              <mat-option *ngFor="let option of verbfilteredOptions  | async" [value]="option">
                {{option}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
      </div>
      <div class="col" >
        <form class="form-group form-inline" [ngStyle]="(quantifierControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}">
          <mat-form-field class="example-full-width">
            <mat-label>Quantifier</mat-label>
            <input 
                  placeholder="Pick one"
                  aria-label="Number"
                  matInput
                  [formControl]="quantifierControl"
                  type="text"
                  [matAutocomplete]="autoquantifier"
                  >
            <mat-autocomplete autoActiveFirstOption #autoquantifier  ="matAutocomplete">
              <mat-option *ngFor="let option of quantifierfilteredOptions  | async" [value]="option">
                {{option}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
      </div>
      <!--NUmber Value-->
      <div class="col" >
        <form class="form-group form-inline" [ngStyle]="(numericalisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}"> 
            <mat-form-field class="example-full-width">
              <mat-label>Numerical Value</mat-label>
              <input type="number" matInput value=0 [(ngModel)]="currentmain.numerical" name="numerical">
            </mat-form-field>
          </form>
      </div>
      <div class="col">
        <form class="form-group form-inline" [ngStyle]="(numunitControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}"> 
          <mat-form-field class="example-full-width">
            <mat-label>Number Unit</mat-label>
            <input type="text"
                  placeholder="Pick one"
                  aria-label="Number"
                  matInput
                  [formControl]="numunitControl"
                  [matAutocomplete]="autonumunit"
                  >
            <mat-autocomplete autoActiveFirstOption #autonumunit  ="matAutocomplete">
              <mat-option *ngFor="let option of numunitfilteredOptions  | async" [value]="option">
                {{option}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
      </div>
</div>
<!-- <mat-label *ngIf=".value !=null">State or Item : {{.value.slice(0, .value.indexOf(':'))}}</mat-label> -->
<div class="form-row">
      <div class="col">
        <form class="form-group form-inline">
          <mat-form-field class="example-full-width">
            <mat-label *ngIf="fifuintsysstatsetControl.value !=null">Object : {{fifuintsysstatsetControl.value.slice(0, fifuintsysstatsetControl.value.indexOf(':'))}}</mat-label>
            <input type="text"
                  placeholder="Pick one"
                  aria-label="Number"
                  matInput
                  [formControl]="fifuintsysstatsetControl"
                  [matAutocomplete]="autofifuintsysstatset"
                  >
            <mat-autocomplete autoActiveFirstOption #autofifuintsysstatset ="matAutocomplete" showPanel="true" [displayWith]="displayFn">
              <mat-option *ngFor="let option of fifuintsysstatsetfilteredOptions  | async" [value]="option">
                {{option.split(" : ").pop()}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
      </div>
      <div class="col">
        <form class="form-group form-inline" [ngStyle]="(stsysconsetControlisDivVisible) ? {'visibility': 'visible'} : {'visibility': 'hidden'}"> 
          <mat-form-field class="example-full-width">
            <mat-label *ngIf="stsysconsetControl.value !=null">Connection : {{stsysconsetControl.value.slice(0, stsysconsetControl.value.indexOf(':'))}}</mat-label>
            <input 
                  placeholder="Pick one"
                  aria-label="Number"
                  type="text"
                  matInput
                  [formControl]="stsysconsetControl"
                  [matAutocomplete]="autostsysconset"
                  >
            <mat-autocomplete autoActiveFirstOption #autostsysconset  ="matAutocomplete" showPanel="true" [displayWith]="displayFn">
              <mat-option *ngFor="let option of stsysconsetfilteredOptions  | async" [value]="option">
                {{option.split(" : ").pop()}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </form>
      </div>
      <div class="col">
        <input class="btn btn-success" 
                type="button" 
                value="Update Main"
                (click)="updateMain()"/>
      </div>
</div>