<section
  #AppScreen
  (click)="inputFocus()"
  (keydown.arrowdown)="onArrowDown($event)"
  (keydown.arrowup)="onArrowUp($event)"
  class="WindowContent BackgroundColor MainBoxPadding-15"
  id="WindowScrollBar"
>
  <section id="CommandShellInput">
    <div *ngFor="let i of GetLines; let index = index">
      <div>
        <span class="TerminalNames">{{ GetUserName }}&#64;{{ GetHostname }}</span>: <span
        class="TerminalPath"
      >{{ i.path }}</span
      >$<span class="inputMargin">{{ i.enteredCommand }}</span>
      </div>
      <div *ngFor="let x of i.lines" class="line">
        <pre [ngStyle]="{'color':'var(--NapicuTerminal-' + x.color +')'}">{{ x.Write().value }}</pre>
      </div>
    </div>
    <div [style.display]="GetActiveCommand ? 'none' : ''" class="line">
      <div>
        <span class="TerminalNames">{{ GetUserName }}&#64;{{ GetHostname }}</span>: <span
        class="TerminalPath"
      >{{ GetPath }}</span
      >$
      </div>
      <div
        #InputValue
        (keydown.enter)="onEnter($event)"
        accept="txt"
        autocapitalize="off"
        autocomplete="off"
        autocorrect="off"
        class="inputLine inputMargin single-line"
        contenteditable="true"
        id="inputLineID"
        spellcheck="false"
      ></div>
    </div>
  </section>
</section>
