<ion-view view-title="{{ 'Home' | translate }}" class="home-page">
  <ion-content class="btn-controls padding-10" style="{{homectrl.styleTop}}">

    <div class="row daystart-section-bar" ng-show="homectrl.showStyleBar">
      <div class="row">
        <div class="col">
          <div>
            <div class="col title-color">
              {{'Style' | translate}}
            </div>
          </div>
          <div>
            <div class="col value-color">
              <label class="item item-input item-select item-icon-right" ng-click="homectrl.showStylePopup()" style="border-width: 0 ; padding-left: 0">
              <input id="style" readonly type="text" required ng-model="homectrl.displayStyle"
                     placeholder="{{'PleaseSelect' | translate}} {{homectrl.displayStyle | translate}}" required capitalize>
            </div>
          </div>
        </div>
        <div class="col">
          <div>
            <div class="col title-color">
              {{'PO' | translate}}
            </div>
          </div>
          <div>
            <div class="col value-color">
              <label class="item item-input item-select item-icon-right" ng-click="homectrl.showPoPopup()" style="border-width: 0; padding-left: 0">
              <input type="text" readonly required ng-model="homectrl.displayKey2"
                     placeholder="{{'PleaseSelect' | translate}} {{homectrl.displayKey2 | translate}}" required capitalize>
            </div>
          </div>
        </div>
        <div class="col">
          <div>
            <div class="col title-color">
              {{'Color' | translate}}
            </div>
          </div>
          <div>
            <div class="col value-color">
              <label class="item item-input item-select item-icon-right" ng-click="homectrl.showColourPopup()" style="border-width: 0; padding-left: 0px">
              <input type="text" readonly ng-model="homectrl.displayKey1"
                     placeholder="{{'PleaseSelect' | translate}} {{homectrl.displayKey1 | translate}}" required capitalize>
            </div>
          </div>
        </div>
        <div class="col">
          <div>
            <div class="col title-color">
              {{'Members' | translate}}
            </div>
          </div>
          <div>
            <div class="col value-color" style="padding-top: 5%;">
              {{homectrl.displayMember}}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div ng-show="homectrl.showStyleBar" class="row row-center button-row {{row.style.class}}" ng-repeat="row in homectrl.layoutDef.home" style="margin-top: -4%;">
      <div class="col padding {{homectrl.styleBottom}}" ng-repeat="column in row.children" on-last-repeat=""
           data-type="{{column.dataType}}">
        <div class="card height-100 ink  {{column.style.class}}"
             ng-mobile-click="homectrl.click(column);">
          <div class="item height-100 item-text-wrap">
            <div class="btn-label padding">{{column.title | translate }}</div>
            <div class="btn-value padding">{{column.value}}</div>
          </div>
        </div>
      </div>
    </div>

    <div ng-show="!homectrl.showStyleBar" class="row row-center button-row {{row.style.class}}" ng-repeat="row in homectrl.layoutDef.home">
      <div class="col padding {{homectrl.styleBottom}}" ng-repeat="column in row.children" on-last-repeat=""
           data-type="{{column.dataType}}">
        <div class="card height-100 ink  {{column.style.class}}"
             ng-mobile-click="homectrl.click(column);">
          <div class="item height-100 item-text-wrap">
            <div class="btn-label padding">{{column.title | translate }}</div>
            <div class="btn-value padding">{{column.value}}</div>
          </div>
        </div>
      </div>
    </div>

  </ion-content>
</ion-view>
