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

<ion-content>
  <ion-grid>

    <ion-row class="main-status-row" justify-content-center text-center>
      <ion-col>
        <div class="main-status">
          <h3 class="status-heading">Current Status:</h3>
          <ion-badge class="device-status-badge" color="primary" *ngIf="mainSunBlindsAuto == false">{{mainSunBlindsStatus}}</ion-badge>   
          <ion-badge class="device-status-badge" color="primary" *ngIf="mainSunBlindsAuto == true">{{mainSunBlindsStatus}} | Auto Opens on {{mainSunBlindsAutoTime}}</ion-badge>   
        </div>
      </ion-col>
    </ion-row>

    <ion-row class="main-control-row">
      <ion-col>
          
          <ion-row justify-content-center text-center>
            <ion-col size="4">
              <ion-button class="control-button" shape="round" (click)="mainBlindsUp()" *ngIf="doingAction == false"><ion-icon name="ios-arrow-up"></ion-icon></ion-button>
              <ion-button class="control-button" shape="round" (click)="mainBlindsUp()" *ngIf="doingAction == true"><ion-icon name="hand"></ion-icon></ion-button>
            </ion-col>
          </ion-row>

          <ion-row justify-content-center text-center>
            <ion-col size="4">
              <ion-button class="control-button-preset" shape="round" (click)="openPresetPicker()">Preset</ion-button>
            </ion-col>
          </ion-row>

          <ion-row justify-content-center text-center>
            <ion-col size="4">
              <ion-button class="control-button" shape="round" (click)="mainBlindsDown()" *ngIf="doingAction == false"><ion-icon name="ios-arrow-down"></ion-icon></ion-button>
              <ion-button class="control-button" shape="round" (click)="mainBlindsDown()" *ngIf="doingAction == true"><ion-icon name="hand"></ion-icon></ion-button>
            </ion-col>
          </ion-row>
    
      </ion-col>
    </ion-row>

    <ion-row class="main-timer-row" justify-content-center text-center>
      <ion-col>
        <ion-button class="control-button-preset" shape="round" (click)="openAutoTimerPicker()">Set Auto Time</ion-button>
      </ion-col>
    </ion-row>

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