<ion-content [fullscreen]="true" class="ion-padding">

  <!-- Tree image -->
  <div class="image-container">
    <img [src]="getImageSource()" [alt]="selectedScene">
  </div>

  <!-- Title and time display -->
  <ion-row>
    <ion-col>
      <div class="info-container">
        <h2>{{ getTitle() }}</h2>
      </div>
    </ion-col>
    <ion-col>
      <div class="timer-container">
        <div class="timer-display">
          <span>{{ minutes }}:{{ seconds | number: '2.0' }}</span>
        </div>
      </div>
    </ion-col>
  </ion-row>
  

  <!-- Icon buttons -->
  <div class="icon-buttons ion-text-center">
    <ion-button fill="solid" [color]="selectedScene === 'tree' ? 'primary' : 'medium'" class="i-button" (click)="selectScene('tree')">
      <ion-icon name="leaf"></ion-icon>
    </ion-button>
    <ion-button fill="solid" [color]="selectedScene === 'rain' ? 'primary' : 'medium'" class="i-button" (click)="selectScene('rain')">
      <ion-icon name="water"></ion-icon>
    </ion-button>
    <ion-button fill="solid" [color]="selectedScene === 'sunny' ? 'primary' : 'medium'" class="i-button" (click)="selectScene('sunny')">
      <ion-icon name="sunny"></ion-icon>
    </ion-button>
    <ion-button fill="solid" [color]="selectedScene === 'cloudy' ? 'primary' : 'medium'" class="i-button" (click)="selectScene('cloudy')">
      <ion-icon name="cloudy"></ion-icon>
    </ion-button>
    <ion-button fill="solid" [color]="selectedScene === 'night' ? 'primary' : 'medium'" class="i-button" (click)="selectScene('night')">
      <ion-icon name="moon"></ion-icon>
    </ion-button>
  </div>

  <!-- Control buttons -->
  <div class="control-buttons ion-text-center">
    <ion-button fill="solid" [color]="isPlayingMusic ? 'primary' : 'medium'" class="ctrl-button" (click)="toggleMusic()">
      <ion-icon name="musical-notes-outline"></ion-icon>
    </ion-button>
    <ion-button fill="solid" [color]="isPaused ? 'primary' : 'medium'" class="ctrl-button" (click)="togglePauseResume()">
      <ion-icon [name]="isPaused ? ( (minutes === 0 && seconds === 0) ? 'play-outline' : 'pause-outline') : 'pause-outline'"></ion-icon>
    </ion-button>
    <ion-button fill="solid" [color]="exitButtonColor()" class="ctrl-button" (click)="confirmExit()">
      <ion-icon name="stop-outline"></ion-icon>
    </ion-button>
  </div>
  
</ion-content>
