<section class="WindowContent BackgroundColor" id="WindowScrollBar">
  <!--Loading screen-->
  <ng-container *ngIf="apiError === null && !words.length">
    <section>
      <div  class="MainContent LoadScreen">
        <img [src]="GetKeyBoardIcon" alt="Keyboard icon">
      </div>
    </section>
  </ng-container>

  <!--Error screen-->
  <ng-container *ngIf="apiError">
    <section>
      <div  class="MainContent" >
        <img [src]="GetKeyBoardIcon" alt="Weather icon">
        <div class="text">
          <h1>{{apiErrorText}}</h1>
        </div>
      </div>
      <div class="NapicuOSSimpleButton" style="text-align: center">
        <button (click)="loadApiData()">{{GetTryAgaiButton}}</button>
      </div>
    </section>
  </ng-container>

    <!--Words-->
  <ng-container *ngIf="apiError === false && words.length">
  <div class="Container">
    <div class="WordsBox Box">
      <div class="Words">
      <span class="Word" *ngFor="let word of words; let index = index"
            [ngClass]="{
                'selectedWord': index == selectedWordIndex && !word.mistake,
                'errorWord': word.mistake
             }"
            [class]="'napicuWord-' + index">
        {{word.value}}
      </span>
      </div>
    </div>

    <div class="MainInput Box">
      <div class="Box WhiteBox SquareBox" (click)="switchDisplayTimer()">
        <ng-container *ngIf="showTimer">
          {{ timer.minutes }}:{{ timer.seconds }}
        </ng-container>
      </div>
      <input type="text" [(ngModel)]="inputValue" (ngModelChange)="onInputChange($event)" [attr.disabled]="showScore ? '' : null ">
      <div class="Box WhiteBox SquareBox" (click)="clickRestart()">
        reset
      </div>
    </div>
  </div>
  </ng-container>


  <!--Words-->
  <ng-container *ngIf="showScore">
    <div class="Container Score">
      <h1 class="MainTitle">WPM: {{getWPM()}}</h1>
      <h1>{{GetAccuaracyText}}: {{GetAccurately()}}%</h1>
      <h1>{{GetCharsText}}: <span class="green">{{GetChars()}}</span>/<span class="red">{{GetBadChars()}}</span></h1>
      <h1>{{GetBadWordsText}}: {{GetBadWords()}}</h1>
      <h1>{{GetCorrectWordsText}}: {{GetCorrectWords()}}</h1>
    </div>
  </ng-container>

</section>
