<div class="iscroll-wrapper" iscroll>
  <div class="iscroll-scroller">
    <div class="home container-fluid">
      <div class="row">
        <div class="col-xs-12">
          <h1>Core Layout: Demo App</h1>

          <div class="well">
            <div class="row">
              <div class="col-xs-12 col-sm-6">
                <p>This app shows how the <a
                    href="https://github.com/mtr/core-layout/">core-layout</a>
                  and <a
                      href="https://github.com/mtr/angular-iscroll/">angular-iscroll</a>
                  module can be combined to create a responsive <a
                      href="https://angularjs.org/">AngularJS</a>
                  web app
                  that renders and behaves well both on large (laptop) and small
                  (mobile phone) screens. The use of <a
                      href="http://iscrolljs.com/">iScroll</a> ensures that the
                  top
                  and bottom "navigation bars" stay on the screen, as with the
                  CSS
                  <code>position: fixed</code> declaration, even on older iOS
                  and
                  Android devices that doesn't support <code>fixed</code>
                  properly.
                </p>

                <p>During initialization, the angular-iscroll package tried
                  to determine whether or not it should use native scrolling
                  instead of iScroll. For your current browser the answer
                  was to use
                  <span
                      ng-if="iScrollState.autoDetectedUseNativeScroll"><em>native
                    scrolling</em> (you can still turn on iScroll in the menu below)
                  </span><span
                      ng-if="!iScrollState.autoDetectedUseNativeScroll"><em>iScroll
                  </em> (you can turn off iScroll in the menu below)</span>.
                </p>

                <p ng-if="$root.platform">
                  Current platform:
                <pre ng-bind="toJson($root.platform, true)"></pre>
                </p>

                <p>Feel free to check out
                  <a href="https://github.com/mtr/core-layout/">core-layout</a>
                  on GitHub.
                </p>
              </div>
              <div class="col-xs-12 col-sm-6">
                <p>You may also toggle some states that define how this demo is
                  rendered:</p>

                <ul class="list-group ">
                  <li class="list-group-item">
                    <label><input type="checkbox"
                                  ng-model="iScrollState.useIScroll"
                                  ng-click="toggleIScroll(true)">
                      Use iScroll</label>
                  </li>
                  <li class="list-group-item">
                    <label><input type="checkbox"
                                  ng-model="drawers.leftDrawer.enabled">
                      Enable left drawer</label>
                  </li>
                  <li class="list-group-item">
                    <label><input type="checkbox"
                                  ng-model="drawers.leftDrawer.show">
                      Open left drawer</label>
                  </li>
                  <li class="list-group-item">
                    <label><input type="checkbox"
                                  ng-model="drawers.rightDrawer.enabled">
                      Enable right drawer</label>
                  </li>
                  <li class="list-group-item">
                    <label><input type="checkbox"
                                  ng-model="drawers.rightDrawer.show">
                      Open right drawer</label>
                  </li>
                </ul>

              </div>
            </div>
            <div class="row">
              <div class="col-xs-12">
                <table class="table">
                  <caption>Toggle visible and hidden header and footer
                    states for the <code>main</code> view.
                  </caption>
                  <thead>
                  <tr>
                    <th>What</th>
                    <th>All</th>
                    <th>
                      <span class="hidden-xs">Extra-small</span>
                      <span class="visible-xs-inline">XS</span>
                    </th>
                    <th>
                      <span class="hidden-xs">Small</span>
                      <span class="visible-xs-inline">SM</span>
                    </th>
                    <th>
                      <span class="hidden-xs">Medium</span>
                      <span class="visible-xs-inline">MD</span>
                    </th>
                    <th>
                      <span class="hidden-xs">Large</span>
                      <span class="visible-xs-inline">LG</span>
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <th scope="row">Show Header</th>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.header.visible.all">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.header.visible.xs">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.header.visible.sm">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.header.visible.md">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.header.visible.lg">
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">Hide Header</th>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.header.hidden.all">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.header.hidden.xs">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.header.hidden.sm">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.header.hidden.md">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.header.hidden.lg">
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">Show Footer</th>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.footer.visible.all">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.footer.visible.xs">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.footer.visible.sm">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.footer.visible.md">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.footer.visible.lg">
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">Hide Footer</th>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.footer.hidden.all">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.footer.hidden.xs">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.footer.hidden.sm">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.footer.hidden.md">
                    </td>
                    <td>
                      <input type="checkbox" autocomplete="off"
                             ng-model="$root.coreLayout.main.footer.hidden.lg">
                    </td>
                  </tr>

                  </tbody>
                </table>
              </div>
            </div>
            <div class="row hidden-xs">
              <div class="col-xs-12">

                <p>The letters in parenthesis on each button indicate the
                  corresponding modal's size.</p>
                <p>
                <div class="btn-group" role="group" aria-label="...">
                  <button class="btn btn-primary" type="button"
                          ui-sref="home.modal.first">Open Modal (L)
                  </button>
                  <button class="btn btn-primary" type="button"
                          ui-sref="home.modal.shared-state">Explore Shared Model
                    (M)
                  </button>
                  <button class="btn btn-primary" type="button"
                          ui-sref="home.modal.small">Sign In (S)
                  </button>
                </div>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
