<ion-view view-title="Book">
  <ion-content>
    <div class="list">
      <div class="item item-input-inset" style="background-color: #2784c9; border-top: 0px">
        <label class="item-input-wrapper">
          <input type="text" placeholder="What service are you after?" style="width: 100%;" ng-click="showBookingForm=true; showServiceList=true">
        </label>
        <button class="button button-positive button-small" ng-click="showBookingForm=false; showServiceList=false"><i class="ion-close"></i></button>
      </div>

      <!-- Date, time, number of people attending -->
      <div ng-hide="showBookingForm">
        <label class="item item-input">
          <input type="text" placeholder="Date">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Time">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Number of people attending">
        </label>
      </div>

      <!-- List of services -->
      <ion-scroll direction="y">
        <div ng-show="showServiceList">
          <ul class="list">
            <li class="item" style="line-height: 16px; padding-top: 13px; font-size: 14px;" ng-repeat="service in businessServiceList">
              <p>{{service.title}}</p>
            </li>
            <li class="item" style="line-height: 16px; padding-top: 13px; font-size: 14px;" ng-repeat="service in businessServiceList">
              <p>{{service.title}}</p>
            </li>
          </ul>
        </div>
        </<ion-scroll>
    </div>
  </ion-content>

  <div style="position: absolute; bottom: 0px; width: 100%;">
    <div class="row">
      <div class="col">
        <a href="#/app/confirm/1/1" class="button button-full button-balanced" style="margin-bottom: 0px">Confirm</a>
      </div>
    </div>
  </div>
</ion-view>