<h4 style="font-weight: 300;display: inline;"><b>FORM EXTENSION</b></h4>
<span class="label label-light-blue" style="display: inline;margin-left: 30px;">Edit Mode</span><br>
<hr>


<div class="container">
   <form (ngSubmit)="onSubmit()">
      <div class="clr-row">
          <div class="clr-col-md-4 clr-col-sm-12">
              <label for="type">Type</label>
              <select id="type" name="type" [(ngModel)]="extensionField.type" class="clr-dropdown">
                  <option *ngFor="let type of types" [ngValue]="type">{{ type | uppercase }}</option>
              </select>
          </div>

          <div class="clr-col-md-4 clr-col-sm-12">
              <label for="actionType1">Field Name:</label>
              <input type="text" name="field_name" [(ngModel)]="extensionField.field_name" class="clr-input">
          </div>

          <div class="clr-col-md-4 clr-col-sm-12">
              <label for="mapping">Mapping</label>
              <select id="mapping" name="mapping" [(ngModel)]="extensionField.mapping" class="clr-dropdown">
                  <option *ngFor="let lookup of lookups" [ngValue]="lookup">{{ lookup | uppercase }}</option>
              </select>
          </div>

          <div class="clr-col-md-4 clr-col-sm-12">
              <label for="data_type">Data Type</label>
              <select id="data_type" name="data_type" [(ngModel)]="extensionField.data_type" class="clr-dropdown">
                  <option *ngFor="let dt of datatypes" [ngValue]="dt">{{ dt | uppercase }}</option>
              </select>
          </div>
      </div>
      <br>
      <div class="center">
          <button type="submit" form-control class="btn btn-primary">UPDATE</button>
      </div>
  </form>
</div>
