<div class="container-fluid" >
  <div class="row">
    <ng-include src="'views/helpers/sidebar.html'"></ng-include>
    <div class="col-sm-4 col-md-3 col-md-offset-2 col-sm-offset-3 sidebar sidebar-secondary">
      <ul class="nav nav-sidebar">
        <li ng-repeat="page in pageList" ng-class="{ active: isActive(page.pageUrl)}">
          <a ui-sref="rest-api-v1({ id: page.slug })">
            <b>{{page.title}}</b><br>
            <p ng-hide="page.type == 'page'" class="api-endpoint">
              <small><span ng-class="callTypeBadge(page.endpoint.type)" >{{page.endpoint.type}}</span><samp>{{page.endpoint.base}}</samp></small>
            </p>
            <p  ng-show="page.type == 'page'" style="margin-bottom: 10px;"><i>{{page.tagline}}</i></p>
          </a>
        </li>

      </ul>
    </div>
    <div class="col-sm-5 col-sm-offset-7 col-md-7 col-md-offset-5 main">
      <div class="api-endpoint" ng-hide="pageData.type == 'page'">
        <h2 style="margin-bottom: 0px;">{{pageData.title}}</h2>
        <small class="api-endpoint"><span ng-class="callTypeBadge(pageData.endpoint.type)">{{pageData.endpoint.type}}</span> <samp>{{pageData.endpoint.base}}</samp></small>
        <hr>

        <div ng-if="pageData.description != undefined">
          <p ng-bind-html="pageData.description"></p>
        </div>

        <ng-include src="'views/helpers/under-construction.html'" ng-hide="pageData.implemented"></ng-include>

        <div ng-if="pageData.variables.length > 0">
          <h5 class="top-spacer">Parameters</h5>
          <table class="table table-bordered top-spacer">
            <tr ng-repeat="variable in pageData.variables">
              <th>{{variable.name}}</th>
              <td ng-bind-html="variable.description"></td>
            </tr>
          </table>
        </div>

        <div ng-if="pageData.examples.length > 0">
          <h5>Examples</h5>
          <tabset class="top-spacer">
            <tab ng-repeat="example in pageData.examples" heading="{{example.name}}">
              <div hljs language="{{example.language}}" include="example.code" onload="hljs"></div>
            </tab>
          </tabset>
        </div>

        <div ng-show="pageData.implemented">
          <h5>Responses</h5>
          <form class="top-spacer">
            <ng-include src="'views/helpers/api-token-field.html'"></ng-include>
            <div  class="row">
                <div class="col-sm-3" ng-repeat="variable in pageData.variables">
                  <fieldset class="form-group">
                    <label for="{{variable.name}}">{{variable.name}}</label>
                    <input type="text" class="form-control" id="{{variable.name}}" placeholder="{{variable.placeholder}}" ng-model="variable.value">
                  </fieldset>
                </div>
            </div>
            <ng-include src="'views/helpers/api-endpoint-field.html'"></ng-include>
          </form>
          <ng-include src="'views/helpers/api-response.html'"></ng-include>
        </div>

    </div>
    <div ng-show="pageData.type == 'page'">
      <h2 style="margin-bottom: 0px;">{{pageData.title}}</h2>
      <hr>
      <div btf-markdown ng-include="pageData.content"></div>
    </div>
  </div>
</div>