<div class="email-form">
  <mat-form-field hintLabel="">
    <input matInput #input maxlength="10" placeholder="{{'SMTP host'|trans}}">
  </mat-form-field>
  <mat-form-field hintLabel="">
    <input matInput #input maxlength="10" placeholder="{{'SMTP port'|trans}}">
  </mat-form-field>
  <mat-form-field hintLabel="">
    <input matInput #input maxlength="10"
           [formControl]="emailFormControl"
           [errorStateMatcher]="matcher"
           placeholder="{{'SMTP user'|trans}}">
    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
      {{'Please enter a valid email address'|trans}}
    </mat-error>
    <mat-error *ngIf="emailFormControl.hasError('required')">
      <strong>{{'Email is required'|trans}}</strong>
    </mat-error>
  </mat-form-field>
  <mat-form-field hintLabel="{{'Some provider use token except password'|trans}}">
    <input matInput #input maxlength="10"
           [type]="hide ? 'password' : 'text'"
           placeholder="{{'SMTP password'|trans}}">
    <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>

  </mat-form-field>
  <mat-form-field
    [hideRequiredMarker]="options.value.hideRequired"
    [floatLabel]="options.value.floatLabel">
    <mat-select required>
      <mat-option value="yes">{{'Yes'|trans}}</mat-option>
      <mat-option value="no">{{'No'|trans}}</mat-option>
    </mat-select>
    <mat-placeholder>
      <b>{{'Use SSL'|trans}}</b>
    </mat-placeholder>
    <mat-hint>{{'If SMTP port is 465, may be select'|trans}}</mat-hint>
  </mat-form-field>
  <mat-form-field
    [hideRequiredMarker]="options.value.hideRequired"
    [floatLabel]="options.value.floatLabel">
    <mat-select required>
      <mat-option value="yes">{{'Yes'|trans}}</mat-option>
      <mat-option value="no">{{'No'|trans}}</mat-option>
    </mat-select>
    <mat-placeholder>
      <b>{{'Use TLS'|trans}}</b>
    </mat-placeholder>
    <mat-hint>{{'If SMTP port is 587, may be select'|trans}}</mat-hint>
  </mat-form-field>
  <br>
  <div class="button-row">
    <button mat-raised-button>{{ 'Test connection' | trans }}</button>
    <button mat-raised-button>{{ 'Reset' | trans }}</button>
    <button mat-raised-button color="primary">{{ 'Submit' | trans }}</button>
  </div>
  <br/>
</div>
