<div class="createCustomer">
  <div class="createCustomer-header">
    <button class="back__btn" (click)="goBackToLeads()">Back to Lead</button>
  </div>
  <div class="createCustomer-unsavedheader" *ngIf="unsavedLeadForm">
    <div class="row">
      <div class="col">
        <h3>Unsaved Changes</h3>
        <span>Do you want to save the changes you've made to this Lead?</span>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <button class="btn btn-secondary" (click)="cancelChanges()">Cancel</button>
      </div>
      <div class="col text-right">
        <button class="btn btn-secondary" (click)="ignoreChanges()">Ignore Changes</button>
        <button class="btn btn-primary" (click)="createLeadFormSubmit()">Save Changes</button>
      </div>
    </div>
  </div>
  <div class="createCustomer-form">
    <ng-container *ngIf="showSpinner">
      <sts-spinner [message]="'Creating Lead...'"></sts-spinner>
    </ng-container>
    
    <sts-form-message-panel [status]="status" [message]="message"></sts-form-message-panel>

    <form [formGroup]="leadForm" (ngSubmit)="leadForm.valid && createLeadFormSubmit()">
      <div class="row">
        <div class="col">
          <label for="brand"><span class="mandatory">*</span> <b>{{leadLabels?.leadCreation_formLabelBrand}}</b></label>
          <select formControlName="brand" required>
            <option value="" disabled>{{leadLabels?.leadCreation_formLabelBrand_placeholder}}</option>
            <option *ngFor="let obj of leadLabels.leadCreation_formLabelBrand_source">{{obj}}</option>
          </select>
          <div
            *ngIf="leadForm.controls['brand'].invalid && (leadForm.controls['brand'].dirty || leadForm.controls['brand'].touched)"
            class="error-msg">
            <div *ngIf="leadForm.controls['brand'].errors.required">
              {{leadLabels?.leadCreation_formLabelBrand_validation}}
            </div>
          </div>
        </div>
        <div class="col">
          <label for="modelClass"><span class="mandatory">*</span>
            <b>{{leadLabels?.leadCreation_formLabelModelClass}}</b></label>
          <select formControlName="modelClass" required>
            <option value="" disabled>{{leadLabels?.leadCreation_formLabelModelClass_placeholder}}</option>
            <option *ngFor="let obj of leadLabels.leadCreation_formLabelModelClass_source">{{obj}}</option>
          </select>
          <div
            *ngIf="leadForm.controls['modelClass'].invalid && (leadForm.controls['modelClass'].dirty || leadForm.controls['modelClass'].touched)"
            class="error-msg">
            <div *ngIf="leadForm.controls['modelClass'].errors.required">
              {{leadLabels?.leadCreation_formLabelModelClass_validation}}
            </div>
          </div>
        </div>
      </div>
      <div class="row createCustomer-phoneContainer">
        <div class="col">
          <label for="variantCode"><span class="mandatory">*</span>
            <b>{{leadLabels?.leadCreation_formLabelVariantCode}}</b></label>
          <select formControlName="variantCode" required>
            <option value="" disabled>{{leadLabels?.leadCreation_formLabelVariantCode_placeholder}}</option>
            <option *ngFor="let obj of leadLabels.leadCreation_formLabelVariantCode_source">{{obj}}</option>
          </select>
          <div
            *ngIf="leadForm.controls['variantCode'].invalid && (leadForm.controls['variantCode'].dirty || leadForm.controls['variantCode'].touched)"
            class="error-msg">
            <div *ngIf="leadForm.controls['variantCode'].errors.required">
              {{leadLabels?.leadCreation_formLabelVariantCode_validation}}
            </div>
          </div>
        </div>
        <div class="col">
          <label for="dataSource"><span class="mandatory">*</span>
            <b>{{leadLabels?.leadCreation_formLabelLeadDataSource}}</b></label>
          <select formControlName="dataSource" required>
            <option value="" disabled>{{leadLabels?.leadCreation_formLabelLeadDataSource_placeholder}}</option>
            <option *ngFor="let obj of leadLabels.leadCreation_formLabelLeadDataSource_source">{{obj}}</option>
          </select>
          <div
            *ngIf="leadForm.controls['dataSource'].invalid && (leadForm.controls['dataSource'].dirty || leadForm.controls['dataSource'].touched)"
            class="error-msg">
            <div *ngIf="leadForm.controls['dataSource'].errors.required">
              {{leadLabels?.leadCreation_formLabelLeadDataSource_validation}}
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
        </div>
        <div class="col createCustomer-btncontainer">
          <button _ngcontent-c4="" class="btn-primary" type="submit">
            <i _ngcontent-c4="" class="fa fa-save"></i> {{leadLabels?.leadCreation_buttonSubmit}}</button>
        </div>
      </div>
    </form>
  </div>
</div>