<section class="WelcomeMainComponentContent" id="SystemFont">
  <section class="WelcomeAppComponentContent UserAppContent">
    <div class="WelcomeTitle" style="font-weight: 600;">{{GetCreatNewUserText}}</div>

    <form class="AppMainContent" [formGroup]="formData">
      <section>
        <div class="AppInputSegment">
          <div>{{GetUsernameText}}</div>
          <input class="NapicuOSSimpleInput" [ngClass]="{'NapicuOSSimpleInput-Red-Border': GetUsernameError()}"  spellcheck="false" type="text" name="username" formControlName="username"
                 autocomplete="off"/>
        </div>
        <div class="AppInputSegment">
          <div>{{GetHostNameText}}</div>
          <input class="NapicuOSSimpleInput" spellcheck="false" type="text" name="hostname" formControlName="hostname" autocomplete="off"/>
        </div>
      </section>

      <section formGroupName="passwords">
        <div class="AppInputSegment">
          <div>{{GetChosePasswordText}}</div>
          <input class="NapicuOSSimpleInput" [ngClass]="{'NapicuOSSimpleInput-Red-Border': GetMainPasswordError()}" spellcheck="false" type="password" name="password" formControlName="pass1" autocomplete="off"/>
        </div>
        <div class="AppInputSegment">
          <div>{{GetConfirmPasswordText}}</div>
          <input class="NapicuOSSimpleInput" [ngClass]="{'NapicuOSSimpleInput-Red-Border': GetPasswordError()}"  spellcheck="false" type="password" name="password2" formControlName="pass2" autocomplete="off"/>
        </div>
      </section>
    </form>

  </section>
  <section class="BottomContent NapicuOSSimpleButton NapicuSimpleButtonVariables">
    <button (click)="back()">{{GetBackButtonText}}</button>
    <button (click)="next()" [disabled]="!checkSubmit()">{{GetNextButtonText}}</button>
  </section>
</section>
