doctype html
html
  head
    title API Gallery
    link(href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css')
    | !{assetManager.renderCSS('gallery')}
    for css in cssIncludes
      link(href=css rel='stylesheet')
    | !{assetManager.renderJS('gallery')}
    for js in jsIncludes
      script(src=js)
    script.
      var BASE_PATH = "#{basePath}";
      var TAGS = !{JSON.stringify(tags)};
      var GALLERY_INFO = !{JSON.stringify(galleryInfo)};
  body(ng-app="App" ng-cloak)
    #APIs(ng-controller="APIs")
      .heading
        .container
          .row
            .col-xs-12.col-md-5.gallery-info
              span.gallery-title= galleryInfo.title
            .col-xs-12.col-md-7.list-controls
              div(ng-class="{'input-group': tags.length}")
                input.form-control(type="text" ng-model="query" placeholder="Search for APIs..." ng-change="queryChanged()")
                .input-group-btn(ng-show="tags.length")
                  button.btn.btn-default.dropdown-toggle.tag-dropdown(type='button' data-toggle="dropdown")
                    | {{ tags.active ? tags.active.name : 'All' }}
                    span   
                    i.caret
                  ul.dropdown-menu
                    li
                      a(ng-click="tags.active = null") All
                    li(ng-repeat="tag in tags")
                      a(ng-click="tags.active = tag") {{ tag.name }}
      div(ng-controller="Body")
        if galleryInfo.description
          .gallery-description
            .container
              .row
                .col-xs-12
                  div !{Marked(galleryInfo.description)}
        .gallery
          .container(ng-controller="Body")
            .row(ng-if="loading")
              .col-xs-12.col-sm-8.col-sm-offset-2.col-lg-4.col-lg-offset-4
                .alert.alert-default
                  p Loading...
                    span.fa.fa-refresh.fa-spin.pull-right
            mixin apilink
              a.link-fill(ng-if="!api.disabled" href="#{basePath}/{{ api.name }}" target="_blank")
              a.link-fill(ng-if="api.disabled" ng-mouseover="toggleDisabled()" ng-mouseleave="toggleDisabled()" disabled)
            mixin disabled-message
              .alert.alert-info Sorry, documentation for this API is not currently available.
            mixin apidisplay
              .filter-guard(ng-show="shouldShow()")
                .list-view.hidden-xs
                  include ./list-view.jade
                .xs-view.visible-xs
                  include ./list-view.jade
            .apis.infinite-scroll(infinite-scroll="showNext()" infinite-scroll-distance="3")
              .tag-view(ng-show="tags.length")
                ul.nav.nav-tabs.nav-justified.tag-tabs(ng-show="tags.active")
                  li(role="presentation" ng-repeat="tag in tags" ng-class="{active: tag === tags.active}")
                    a.hidden-xs.hidden-sm.btn-lg(ng-click="tags.active = tag") {{ tag.name }}
                    a.visible-xs.visible-sm(ng-click="tags.active = tag") {{ tag.name }}
                .row(ng-repeat="tag in tags" ng-show="!tags.active || tags.active === tag")
                  .col-xs-12(ng-show="!tags.active")
                    h2 {{ tag.name }}
                    hr
                  .api-col-container(ng-repeat="api in apis | filter:{tags: tag.name}:true"
                                     ng-if="$index < apisToShow || apisToShow === -1"
                                     ng-controller="API")
                    +apidisplay
              .row(ng-show="!tags.length")
                .api-col-container(ng-repeat="api in apis"
                                   ng-if="$index < apisToShow || apisToShow === -1"
                                   ng-controller="API")
                  +apidisplay