<div class="container"> 
    <input
      [type]="hidePassword ? 'password' : 'text'"
      [placeholder]="'COMPONENT.CONNECT.PASSWORD' | transloco"
      spellcheck="false"
      [(ngModel)]="password"
      (keydown.enter)="connect()"
    >
    <span class="save-password">
      <input 
        type="checkbox"
        id="save-password"
        [(ngModel)]="savePassword"
      />
      <label for="save-password">{{ 'COMPONENT.CONNECT.SAVE_PASSWORD' | transloco }}</label>
    </span>

    <span class="hide-password">
      <input 
        type="checkbox"
        id="hide-password"
        [(ngModel)]="hidePassword"
      />
      <label for="hide-password">{{ 'COMPONENT.CONNECT.HIDE_PASSWORD' | transloco }}</label>
    </span>


    <app-action-buttons>
      <button [disabled]="connecting" (click)="connect()" data-style-ornament="simple">
        {{ 'COMPONENT.CONNECT.CONNECT' | transloco }}
      </button>
      <button [disabled]="connecting" (click)="cancel()" data-style-ornament="simple">
        {{ 'COMPONENT.CONNECT.CANCEL' | transloco }}
      </button>
    </app-action-buttons>
  </div>
