<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{assets}}/validation.css">
  </head>
  <body>
    <div class="container">
      <section id="validate"></section>

      <hr>
      <!-- pagination -->
      <h4>pagination</h4>
      {{pagination pagination modifier="pagination-lg"}}
      <hr>
      <h4>pagination-justified</h4>
      {{pagination pagination modifier="pagination-lg justified"}}
      <hr>
      <!-- paginate -->
      <h4>paginate</h4>
      {{paginate pagination}}
      <hr>


      <div class="row">
        <div class="col-md-3">
          <div class="bs-sidebar hidden-print" role="complementary">
            <!-- navigation -->
            {{navigation pagination}}
            <hr>


            <!-- pagination -->
            {{pager pagination}}
            <hr>


            <!-- Summaries -->
            <h4>Sanity Check</h4>
            <ul class="list-group">
              <li class="list-group-item">
                <span class="badge">{{length categories}}</span>
                Total Categories
              </li>
              <li class="list-group-item">
                <span class="badge">{{length tags}}</span>
                Total Tags
              </li>
            </ul>

          </div>
        </div>
        <div class="col-md-9" role="main">
          <div class="row">
            <div class="col-md-4">

              <!-- Pages -->
              <div class="docs-section">
                <div class="docs-header" id="content">
                  <h4>\{{relative}} helper</h4>
                  <strong>Page title: {{ title }}</strong>
                </div>
                <ul class="nav nav-pills nav-stacked">
                {{#each pages}}
                  <li{{#is ../page.dest this.dest}} class="active"{{/is}}>
                    <a href="{{relative ../page.dest this.dest}}">{{{data.title}}}</a>
                  </li>
                {{/each}}
                </ul>
              </div>
              <hr>


              <!-- Pages -->
              <div class="docs-section">
                <div class="docs-header" id="content">
                  <h4>\{{rel}} helper</h4>
                  <strong>Page title: {{ title }}</strong>
                </div>
                <ul class="nav nav-pills nav-stacked">
                {{#each pages}}
                  <li{{#is ../page.dest this.dest}} class="active"{{/is}}>
                    <a href="{{rel ../page.dest}}">{{{data.title}}}</a>
                  </li>
                {{/each}}
                </ul>
              </div>
            </div>
            <div class="col-md-4">

              <!-- Tags Collection -->
              <div class="panel panel-default">
                <div class="panel-heading">Tags</div>
                <div class="panel-body">
                {{#each tags}}
                  <div>Related pages for: <span class="label label-warning">{{tag}}</span></div>
                  <ul>
                  {{#each pages}}
                    <li{{#is ../../page.dest this.dest}} class="active"{{/is}}>
                      <a href="{{rel ../../page.dest}}">{{{data.title}}}</a>
                    </li>
                  {{/each}}
                  </ul>
                {{/each}}
                </div>
              </div>
            </div>
            <div class="col-md-4">

              <!-- Categories Collection -->
              <div class="panel panel-default">
                <div class="panel-heading">Categories</div>
                <div class="panel-body">
                {{#each categories}}
                  <div>Related pages for: <span class="label label-warning">{{category}}</span></div>
                  <ul>
                  {{#each pages}}
                    <li{{#is ../../page.dest this.dest}} class="active"{{/is}}>
                      <a href="{{rel ../../page.dest}}">{{{data.title}}}</a>
                    </li>
                  {{/each}}
                  </ul>
                {{/each}}
                </div>
              </div>
            </div>
          </div>

          <!-- Content -->
          {{> body }}

          <hr>
        </div>
      </div>
    </div>
  </body>
</html>