div(ng-cloak).banner
  dl.api-key
    dt Display:
    dd.directive(ng-class='{ active: appCtrl.apiType === "directive" }' ng-click='appCtrl.setType("directive")') Directive
    dd.class(ng-class='{ active: appCtrl.apiType === "class" }' ng-click='appCtrl.setType("class")') Class
    dd.interface(ng-class='{ active: appCtrl.apiType === "interface" }' ng-click='appCtrl.setType("interface")') Interface
    dd.function(ng-class='{ active: appCtrl.apiType === "function" }' ng-click='appCtrl.setType("function")') Function
    dd.const(ng-class='{ active: appCtrl.apiType === "const" }' ng-click='appCtrl.setType("const")') Const or Enum
    dd.var(ng-class='{ active: appCtrl.apiType === "var" }' ng-click='appCtrl.setType("var")') Variable
  input.api-filter(placeholder='Filter', ng-model='appCtrl.apiFilter')
article(class="l-content-small grid-fluid docs-content")
  div(ng-repeat='section in appCtrl.apiSections' ng-if="(appCtrl.apiList[section.name] | filter: { title: appCtrl.apiFilter, docType: appCtrl.apiType }).length" ng-cloak)
    h3 {{ section.title }}
    ul.api-list
      li.api-item(ng-repeat='item in appCtrl.apiList[section.name] | filter: { title: appCtrl.apiFilter, docType: appCtrl.apiType }')
        a(ng-href='{{ item.path }}')
          span(class='symbol {{ item.docType }}')
          | {{ item.title }}