<div ng-controller="IndexController">

  <super-navbar>
    <super-navbar-title>Supersonic Kitchensink</super-navbar-title>
  </super-navbar>

  <div class="index__welcome-message">
    <b>Welcome to AppGyver kitchensink app!</b>
    <br>
    This app was handcrafted for you, the mobile developer, to explore the possibilities and performance of Steroids and Supersonic.
  </div>

  <div class="list">

    <!-- Navigation & transitions -->

    <div class="item item-divider">
      Navigation &amp; transitions
    </div>

    <super-navigate view-id="navigation-layerPush" class="item item-icon-left item-icon-right">
      <i class="icon icon-accessory super-arrow-right-c"></i>
      Navigate to another view
      <i class="icon icon-accessory super-chevron-right"></i>
    </super-navigate>

    <super-modal-show view-id="navigation-modalWindow" class="item item-icon-left item-icon-right">
      <i class="icon icon-accessory super-ios-browsers-outline"></i>
      Open modal
      <i class="icon icon-accessory super-chevron-right"></i>
    </super-modal-show>

    <div class="item item-icon-left item-icon-right" ng-click="supersonic.ui.drawers.open('left')">
      <i class="icon icon-accessory super-navicon"></i>
      Open drawer menu
      <i class="icon icon-accessory super-chevron-right"></i>
    </div>

    <super-navigate view-id="navigation-transitions" class="item item-icon-left item-icon-right">
      <i class="icon icon-accessory super-arrow-graph-up-right"></i>
      Transition animations
      <i class="icon icon-accessory super-chevron-right"></i>
    </super-navigate>

    <!-- App -->

    <div class="item item-divider">
      App
    </div>

    <div class="item item-toggle">
       Status bar
       <label class="toggle toggle-royal">
         <input type="checkbox" ng-model="statusBarEnabled">
         <div class="track">
           <div class="handle"></div>
         </div>
       </label>
    </div>

    <div class="item item-toggle">
       Tabs
       <label class="toggle toggle-royal">
         <input type="checkbox" ng-model="tabsEnabled">
         <div class="track">
           <div class="handle"></div>
         </div>
       </label>
    </div>

    <div class="item item-icon-right" ng-click="showSplashScreen()">
      Show splashscreen (1s)
      <i class="icon icon-accessory super-eye"></i>
    </div>

    <!-- Sensors -->

    <div class="item item-divider">
      Sensors
    </div>

    <super-navigate view-id="sensors-geolocation" class="item item-icon-left item-icon-right">
      <i class="icon icon-accessory super-location"></i>
      Geolocation
      <i class="icon icon-accessory super-chevron-right"></i>
    </super-navigate>

    <super-navigate view-id="sensors-compass" class="item item-icon-left item-icon-right">
      <i class="icon icon-accessory super-compass"></i>
      Compass
      <i class="icon icon-accessory super-chevron-right"></i>
    </super-navigate>

    <super-navigate view-id="sensors-accelerometer" class="item item-icon-left item-icon-right">
      <i class="icon icon-accessory super-speedometer"></i>
      Accelerometer
      <i class="icon icon-accessory super-chevron-right"></i>
    </super-navigate>

    <!-- Device status -->

    <div class="item item-divider">
      Device status
    </div>

    <super-navigate view-id="status-network" class="item item-icon-left item-icon-right">
      <i class="icon icon-accessory super-wifi"></i>
      Network
      <i class="icon icon-accessory super-chevron-right"></i>
    </super-navigate>

  </div>

</div>
