<ol class="breadcrumb breadcrumb-arrow font-trirong">
  <li><a href="javascript://" [routerLink]="['/']">Home</a></li>
  <li><a href="javascript://">stepper</a></li>
</ol>

<div class="button-bar">

  <span class="spacer"></span>
  <button class="btn btn-sm btn-primary" (click)="reset()">Reset</button>

  <button class="btn btn-sm btn-primary" (click)="changeToHorizonTal()"
    *ngIf="layout.direction === 'vertical'">HorizonTal Layout</button>
  <button class="btn btn-sm btn-primary" (click)="changeToVertical()" *ngIf="layout.direction === 'horizontal'">Vertical
    Layout</button>

</div>

<div class="clr-row">
  <div [class]="layout.block1">
    <div class="card">
      <div class="card-header">
        <h3 style="text-align: center;"> Workflow</h3>
      </div>

      <div class=" card-block container">

        <clr-timeline [clrLayout]="layout.direction">
   <clr-timeline-step [clrState]="timelineStyle.step0.state">
            <clr-timeline-step-header>step 0</clr-timeline-step-header>
            <clr-timeline-step-title> <span *ngIf="!appToUpdate">Application</span><span *ngIf="appToUpdate"> Update
                Datagrid</span> </clr-timeline-step-title>
            <clr-timeline-step-description> <span>Create/sss<br> Information Of
                Customer</span></clr-timeline-step-description>
          </clr-timeline-step>  

 <clr-timeline-step [clrState]="timelineStyle.step1.state">
            <clr-timeline-step-header>Step 2</clr-timeline-step-header>
            <clr-timeline-step-title>Review And <br>Confirmation</clr-timeline-step-title>
            <clr-timeline-step-description>
              Finish .
            </clr-timeline-step-description>
          </clr-timeline-step></clr-timeline>
      </div>
    </div>
  </div>
  <div [class]="layout.block2">
    <!--STEP 0-->
    <div class="card" *ngIf="timelineStyle.step0.open">
      <div class="card-header">
        <h3 style="text-align: center;" *ngIf="!appToUpdate">sss</h3>
        <h3 style="text-align: center;" *ngIf="appToUpdate"> Update {{Adv2entryForm.name}}</h3>
        <div class="container">

          <br />

        
          <form [formGroup]="Adv2entryForm">

            <div class="container">

              <div class="clr-row"><div class="clr-col-sm-12">
 <label>  Name</label>
 <input class="clr-input"  type="text"  formControlName="name" />       
 </div>

 <div class="clr-col-sm-12">       
	   <label>sta mul</label>
							          <clr-combobox-container style="margin-top: 0; padding-top: 0;">
							            <clr-combobox [(ngModel)]="nodeEditPropertiessta_mul.addselectedAttributessta_mul"  formControlName="sta_mul" clrMulti="true">
							             <ng-container *clrOptionSelected="let selected">
							               {{selected}}          </ng-container>
							            <clr-options>
							                <clr-option *clrOptionItems="let item of selectsta_mul" [clrValue]="item"> {{item}}
							                </clr-option>            </clr-options> 
							           </clr-combobox>           
							          </clr-combobox-container>      </div> 


 
<div class="clr-col-sm-12">
	          <label>  dynamic</label> 
<select  formControlName="dynamic">  
  <option [value]="null">Choose dynamic</option>
				<option *ngFor="let item of selectdynamic" [value]="item.name">{{item.name}}</option>
	      </select>          </div>
 



 
<div class="clr-col-sm-12">           
<label>dyanmic mul</label>
	          <clr-combobox-container style="margin-top: 0; padding-top: 0;">
	            <clr-combobox [(ngModel)]="nodeEditPropertiesdyanmic_mul.addselectedAttributesdyanmic_mul"  formControlName="dyanmic_mul" clrMulti="true"             >
	             <ng-container *clrOptionSelected="let selected">
	               {{selected}}              </ng-container>
	             <clr-options>
	               <clr-option *clrOptionItems="let item of selectdyanmic_mul" [clrValue]="item. name"> {{item. name}}</clr-option></clr-options>
	           </clr-combobox>             
	          </clr-combobox-container>         </div>
 



 
<div class="clr-col-sm-12" >
	        <label>  Autocom</label>
	        <input type="text" list="autocomconfig" class="clr-input" formControlName="autocom">
	        <datalist id="autocomconfig"> <option *ngFor="let item of selectautocom" [value]="item.name">{{item. name }}</option>     </datalist>       </div>
 



 
<div class="clr-col-sm-12">           
<label>Auto mul</label>
	          <clr-combobox-container style="margin-top: 0; padding-top: 0;">
	            <clr-combobox [(ngModel)]="nodeEditPropertiesauto_mul.addselectedAttributesauto_mul"  formControlName="auto_mul" clrMulti="true"             >
	             <ng-container *clrOptionSelected="let selected">
	               {{selected}}              </ng-container>
	             <clr-options>
	               <clr-option *clrOptionItems="let item of selectauto_mul" [clrValue]="item. name"> {{item. name}}</clr-option></clr-options>
	           </clr-combobox>             
	          </clr-combobox-container>         </div>
 



              </div>













              <div class="clr-row">

              </div>
              <!-- end row -->
              <br>
<div class="button">
  <button type="submit" class="btn btn-primary" (click)="onsssSave()">Submit</button>
  <button type="button" class="btn btn-primary"
    (click)="this.timelineStyle.step0 = { state: 'success', open: false };
             this.timelineStyle.step1 = { state: 'current', open: true }; this.current()">Complete</button>
  <button type="button" class="btn btn-primary"
    (click)="this.timelineStyle.step0 = { state: 'current', open: false };
             this.timelineStyle.step1 = { state: 'not-started', open: true }">Next</button>
</div>  </div>
          </form>

        </div>

      </div>
    </div> 
 <!--STEP 1-->  <div class="card" *ngIf="timelineStyle.step1.open">
      <div class="card-header">
        <h3 style="text-align: center;" *ngIf="!appToUpdate"> Review And Confirmation</h3>
        <div class="container">

          <!--  Info -->
   <div class="clr-row mb-3">
            <div class="clr-col-12">
              <h5>Sss Summary:</h5><p><strong>Name : </strong> {{ Adv2entryForm.get('name')?.value | json}}</p>

<p><strong>sta mul : </strong> {{ Adv2entryForm.get('sta_mul')?.value | json}}</p>

<p><strong>dynamic : </strong> {{ Adv2entryForm.get('dynamic')?.value | json}}</p>

<p><strong>dyanmic mul : </strong> {{ Adv2entryForm.get('dyanmic_mul')?.value | json}}</p>

<p><strong>Autocom : </strong> {{ Adv2entryForm.get('autocom')?.value | json}}</p>

<p><strong>Auto mul : </strong> {{ Adv2entryForm.get('auto_mul')?.value | json}}</p>


            </div>
          </div><div class="button">
  <button class="btn btn-primary-outline"
    (click)="this.timelineStyle.step0 = { state: 'current', open: true };
             this.timelineStyle.step1 = { state: 'not-started', open: false }">Back</button>
  <button class="btn btn-primary"
    (click)="timelineStyle.step1 = { state: 'success', open: false }; current();
             alert('Process Finished Successfully!')">Finish</button>
</div></div>
      </div>
    </div>