<div mat-dialog-content>
  <div class="form-fields">
    <div class="form-field">
      <mat-form-field appearance="outline" style="width: 100%">

        <mat-label><span>Occupation</span></mat-label>

        <input type="text"
               matInput
               [formControl]="experience.controls.occupation"
               [matAutocomplete]="autoOccupation"
               [errorStateMatcher]="matcher">

        <mat-autocomplete #autoOccupation="matAutocomplete" [displayWith]="occupationTranslate">
          <mat-option *ngFor="let option of occupations" [value]="option">
            <span>{{option.name}}</span>
          </mat-option>
        </mat-autocomplete>

      </mat-form-field>
    </div>
  </div>

  <div class="form-fields">
    <div class="form-field">
      <mat-form-field appearance="outline" style="width: 100%">
        <mat-label><span>Categories</span></mat-label>
        <mat-select [(ngModel)]="jobCategoriesSelected" multiple [compareWith]="equalsCat">

          <mat-select-trigger>
            {{jobCategoriesSelected[0] ? jobCategoriesSelected[0].name : ''}} {{jobCategoriesSelected[1] ? (', ' + jobCategoriesSelected[1].name) : ''}}
            <span *ngIf="(jobCategoriesSelected.length || 0) > 2" class="additional-selection">
              (+{{(jobCategoriesSelected.length || 0) - 2}} {{jobCategoriesSelected.length === 3 ? 'other' : 'others'}}
              )
            </span>
          </mat-select-trigger>

          <mat-option *ngFor="let cat of categories" [value]="cat">
            {{cat.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>

  <div class="form-field">
    <mat-form-field appearance="outline" style="width: 100%">

      <mat-label><span>Company</span></mat-label>

      <input type="text"
             matInput
             [formControl]="experience.controls.company"
             [matAutocomplete]="autoCompany">

      <mat-autocomplete #autoCompany="matAutocomplete" [displayWith]="companyDisplay">
        <mat-option *ngFor="let option of companies" [value]="option">
          {{option.companyName}}
        </mat-option>
      </mat-autocomplete>

    </mat-form-field>
  </div>


  <div class="form-field">
    <div class="form-field">
      <date-range [dateRange]="experience.controls.dateRange" [fieldAppearance]="'outline'"></date-range>
    </div>
  </div>

</div>
<dialog-actions [submitText]="'Save experience'" (onSubmit)="createExperience()"
                (onCancel)="safeClose()"></dialog-actions>
