<h1 mat-dialog-title>{{data.name}}</h1>
<mat-divider></mat-divider>

<div
  *ngIf="!data.isInstance && data.currentSection !== 'StateValue' && data.currentSection !== 'State' && data.currentSection !== 'Item'"
  class="text-center" mat-dialog-content>
  <div style="margin-top: 8px; ">
    <mat-form-field appearance="fill">
      <mat-label>Instance name</mat-label>
      <input matInput required [(ngModel)]="data.instance">
    </mat-form-field>
  </div>
  <div style="margin-top: 8px;">
    <mat-form-field appearance="fill">
      <mat-label>Instance comment</mat-label>
      <textarea matInput required [(ngModel)]="data.comment"></textarea>
    </mat-form-field>
  </div>
</div>

<div *ngIf="data.isInstance">
  <mat-grid-list cols="2" rowHeight="2:1">
    <mat-grid-tile>
      <div mat-dialog-content>
        <div style="margin-top: 8px; ">
          <mat-form-field appearance="fill">
            <mat-label>Instance name</mat-label>
            <input matInput required [(ngModel)]="data.instance">
          </mat-form-field>
        </div>
        <div style="margin-top: 8px;">
          <mat-form-field appearance="fill">
            <mat-label>Instance comment</mat-label>
            <textarea matInput required [(ngModel)]="data.comment"></textarea>
          </mat-form-field>
        </div>
      </div>
      <div style="margin-left: 100px;">
        <mat-divider vertical style="height:250px"></mat-divider>
      </div>
    </mat-grid-tile>
    <mat-grid-tile>
      <div class="col" *ngIf="data.currentSection == 'Function'">
        <p>The current instance will add the above requirement in the ontology :</p>
        <h1><u>{{data.currentInstance}} shall invoke {{data.instance}}</u></h1>
      </div>
      <div class="col" *ngIf="data.currentSection == 'System'">
        <p>The current instance will add the above requirement in the ontology :</p>
        <h1><u>{{data.currentInstance}} shall contain {{data.instance}}</u></h1>
      </div>
      <div class="col" *ngIf="data.currentSection == 'Item'">
        <p>The current instance will add the above requirement in the ontology :</p>
        <mat-form-field style="width: 100%;" appearance="fill">
          <mat-label>Select System</mat-label>
          <mat-select required [(ngModel)]="data.selectedValue" name="system">
            <mat-option *ngFor="let system of system" [value]="system">
              {{system}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <h1><u> {{data.currentInstance}} shall be composed from {{data.instance}}</u></h1>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</div>

<div *ngIf="data.currentSection === 'StateValue'">
  <mat-grid-list cols="2" rowHeight="2:1">
    <mat-grid-tile>
      <div mat-dialog-content>
        <div style="margin-top: 8px; ">
          <mat-form-field appearance="fill">
            <mat-label>Instance name</mat-label>
            <input matInput required [(ngModel)]="data.instance">
          </mat-form-field>
        </div>
        <div style="margin-top: 8px;">
          <mat-form-field appearance="fill">
            <mat-label>Instance comment</mat-label>
            <textarea matInput required [(ngModel)]="data.comment"></textarea>
          </mat-form-field>
        </div>
      </div>
      <div style="margin-left: 100px;">
        <mat-divider vertical style="height:250px"></mat-divider>
      </div>
    </mat-grid-tile>
    <mat-grid-tile>
      <div class="col">
        <p>The current instance will add the above requirement in the ontology :</p>
        <h1><u>{{data.instance}} belongs to </u></h1>
        <mat-form-field style="width: 100%;" appearance="fill">
          <mat-label>Select StateSet</mat-label>
          <mat-select required [(ngModel)]="data.selectedValue" name="stateset">
            <mat-option *ngFor="let stateset of stateSet" [value]="stateset">
              {{stateset}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
  <div mat-dialog-actions>
    <button mat-button color="warn" (click)="onNoClick()">Cancel</button>
    <button [disabled]="!data.selectedValue" mat-button color="primary" [mat-dialog-close]="data"
      cdkFocusInitial>Add</button>
  </div>
</div>

<div *ngIf="data.currentSection === 'State'">
  <mat-grid-list cols="2" rowHeight="2:1">
    <mat-grid-tile>
      <div mat-dialog-content>
        <div style="margin-top: 8px; ">
          <mat-form-field appearance="fill">
            <mat-label>Instance name</mat-label>
            <input matInput required [(ngModel)]="data.instance">
          </mat-form-field>
        </div>
        <div style="margin-top: 8px;">
          <mat-form-field appearance="fill">
            <mat-label>Instance comment</mat-label>
            <textarea matInput required [(ngModel)]="data.comment"></textarea>
          </mat-form-field>
        </div>
      </div>
      <div style="margin-left: 100px;">
        <mat-divider vertical style="height:250px"></mat-divider>
      </div>
    </mat-grid-tile>
    <mat-grid-tile>
      <div class="col">
        <p>The current instance will add the above requirement in the ontology :</p>
        <mat-form-field style="width: 100%;" appearance="fill">
          <mat-label>Select System</mat-label>
          <mat-select required [(ngModel)]="data.selectedValue" name="system1">
            <mat-option *ngFor="let system1 of system" [value]="system1">
              {{system1}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <h1><u>shall have state {{data.instance}} with values </u></h1>
        <mat-form-field style="width: 100%;" appearance="fill">
          <mat-label>Select StateSet</mat-label>
          <mat-select required [(ngModel)]="data.selectedValue2" name="stateset">
            <mat-option *ngFor="let stateset of stateSet" [value]="stateset">
              {{stateset}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
  <div mat-dialog-actions>
    <button mat-button color="warn" (click)="onNoClick()">Cancel</button>
    <button [disabled]="!data.selectedValue || !data.selectedValue2" mat-button color="primary"
      [mat-dialog-close]="data" cdkFocusInitial>Add</button>
  </div>
</div>


<div *ngIf="data.currentSection === 'Item' && !data.isInstance">
  <mat-grid-list cols="2" rowHeight="2:1">
    <mat-grid-tile>
      <div mat-dialog-content>
        <div style="margin-top: 8px; ">
          <mat-form-field appearance="fill">
            <mat-label>Instance name</mat-label>
            <input matInput required [(ngModel)]="data.instance">
          </mat-form-field>
        </div>
        <div style="margin-top: 8px;">
          <mat-form-field appearance="fill">
            <mat-label>Instance comment</mat-label>
            <textarea matInput required [(ngModel)]="data.comment"></textarea>
          </mat-form-field>
        </div>
      </div>
      <div style="margin-left: 100px;">
        <mat-divider vertical style="height:250px"></mat-divider>
      </div>
    </mat-grid-tile>
    <mat-grid-tile>
      <div class="col">
        <section class="example-section">
          <mat-checkbox class="example-margin" [(ngModel)]="checked">Checked if the item can have State Values
          </mat-checkbox>
        </section>
        <div *ngIf="checked">
          <p>The current instance will add the above requirement in the ontology :</p>
          <mat-form-field style="width: 100%;" appearance="fill">
            <mat-label>Select System</mat-label>
            <mat-select required [(ngModel)]="data.selectedValue" name="system">
              <mat-option *ngFor="let system of system" [value]="system">
                {{system}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <h1><u>{{data.instance}} shall take values from </u></h1>
          <mat-form-field style="width: 100%;" appearance="fill">
            <mat-label>Select StateSet</mat-label>
            <mat-select required [(ngModel)]="data.selectedValue2" name="stateset">
              <mat-option *ngFor="let stateset of stateSet" [value]="stateset">
                {{stateset}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
  <div mat-dialog-actions>
    <button mat-button color="warn" (click)="onNoClick()">Cancel</button>
    <button [disabled]="checked && (!data.selectedValue || !data.selectedValue2)" mat-button color="primary"
      [mat-dialog-close]="data" cdkFocusInitial>Add</button>
  </div>
</div>


<div mat-dialog-actions
  *ngIf="data.currentSection != 'StateValue' && data.currentSection !== 'State' && !(data.currentSection === 'Item' && !data.isInstance) ">
  <button mat-button color="warn" (click)="onNoClick()">Cancel</button>
  <button [disabled]="data.currentSection == 'Item' && data.isInstance && !data.selectedValue" mat-button
    color="primary" [mat-dialog-close]="data" cdkFocusInitial>Add</button>
</div>