<ion-header>
  <ion-toolbar>
    <ion-title>Dashboard</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>

    <ion-row>
      <ion-col size="2">
        <img src="../../assets/profile/profile_nick.jpeg" class="profile-picture">
      </ion-col>
      <ion-col>
        <p class="welcome-text">Hi, <span class="welcome-name">Nick!</span></p>
      </ion-col>
    </ion-row>
    
    <ion-row>
      <ion-col>
        <div class="content-box">
          <p class="time-display">{{currentTimeHour}}:{{currentTimeMinute}}</p>
          <p class="date-display">{{currentDateDay}} {{currentMonth}}, {{currentYear}}</p>
        </div>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <p class="status-text connected" *ngIf="echoConnectionError == false">Phone connected to Echo Main Hub!</p>
        <p class="status-text not-connected" *ngIf="echoConnectionError == true">Error occured with the connection to Echo Main Hub!</p>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <div class="dashboard-status left-status">
          <ion-icon name="thermometer" class="status-icon"></ion-icon><span class="status-heading">Temperature</span>
          <p class="status-value">{{getTemperature()}} °C</p>
        </div>
      </ion-col>
        
      <ion-col>
        <div class="dashboard-status">
          <ion-icon name="water" class="status-icon"></ion-icon><span class="status-heading">Humidity</span>
          <p class="status-value">{{getHumidity()}}%</p>
        </div>
      </ion-col>

      <ion-col>
        <div class="dashboard-status right-status">
          <ion-icon name="sunny" class="status-icon"></ion-icon><span class="status-heading">Light</span>
          <p class="status-value">{{getLight()}}%</p>
        </div>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col><p class="overview-heading">Connected Devices</p></ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <div class="device">
          <ion-icon name="bulb" class="device-icon"></ion-icon><span class="device-heading">Main Light</span> <ion-toggle [(ngModel)]="mainLightToggle" (ngModelChange)="switchMainLight()" class="device-toggle" color="success"></ion-toggle>
          <p class="device-text">Lights</p>
        </div>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <div class="device">
          <ion-icon name="snow" class="device-icon"></ion-icon><span class="device-heading">Airconditioner</span> <ion-toggle [(ngModel)]="mainAirConditionerToggle" (ngModelChange)="switchMainAirConditioner()" class="device-toggle" color="success"></ion-toggle>
          <p class="device-text">Climate - Set to {{getTargetTemp()}} °C</p>
        </div>
      </ion-col>
    </ion-row>

  </ion-grid>
</ion-content>