<section class="WindowContent BackgroundColor" id="WindowScrollBar" [ngStyle]="{'background-image': 'url(' + GetWallpaper + ')'}">

  <!--Loading screen-->
  <ng-container *ngIf="GetApiError === null">
    <section>
      <div  class="MainContent LoadScreen" >
        <img [src]="GetWeatherIcon" alt="Weather icon">
      </div>
    </section>
  </ng-container>

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

  <!--Welcome screen-->
  <ng-container *ngIf="!GetApiData && GetApiError === false">
    <section>
      <div  class="MainContent" >
        <img [src]="GetWeatherIcon" alt="Weather icon">
        <div class="text">
          <h1>{{GetWelcomeText}}</h1>
          <h2>{{GetOnStartText}}</h2>
        </div>
        <input #Input type="text" class="NapicuOSSimpleInput" [ngStyle]="{'--NapicuSimpleButtonColor': 'white', '--NapicuTitleTextColor': 'black'}" (keydown.enter)="submitCity(Input.value)">
       </div>
<!--      <div>-->
<!--        {{GetApiErrorText}}-->
<!--      </div>-->
    </section>
  </ng-container>

  <!--Main weather screen-->
  <ng-container *ngIf="GetApiData && GetApiError === false">
    <section class="weather" clickable="false">
        <div>
          <app-drop-down-input placeholderValue="City" class="drop-down-input-center city" [onSubmit]="submitCity">{{GetApiData.name}}</app-drop-down-input>
         <div class="date">{{GetTimeFormat}}</div>
        </div>
      <img [src]="GetOpenWeatherIcon" alt="OpenWeather Icon" >
        <div>
          <h1 class="temp">{{GetApiData.temp}}°C</h1>
          <div class="temp-b">-------------</div>
        </div>

      <div class="inf">
        <div>{{GetApiData.description}}</div>
        <div>{{GetApiData.temp_min}}°C/{{GetApiData.temp_max}}°C</div>
      </div>
      <div class="status">
        <div>{{GetLastUpdate}}</div>
        <div>{{GetDataFromTest}} <a href="https://openweathermap.org/">OpenWeather</a></div>
      </div>
    </section>
  </ng-container>
</section>
