mixin navitem(name)
  li(ng-class="{active: isActive('#{name}')}")
    a.navlink.text-capitalize(href='##{name}' no-scroll)= name

doctype html
html
  head
    title API Console
    script.
      var START_PAGE = "#{showEditor ? '#editor' : '#documentation'}";
      var OPTIONS = !{JSON.stringify(options)};
    include ./includes/head.jade

    for css in cssIncludes
      link(href=css rel='stylesheet')
    for js in jsIncludes
      script(src=js)

    link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,200,300,700,600')

  body(ng-app="App")
    #Body(ng-controller="Body")
      #Portal(ng-controller="Portal")
        #nav.navbar.navbar-secondary.navbar-inverse.square
          .container-fluid
            if galleryInfo
              .navbar-header
                if galleryInfo.logo
                  a.navbar-brand(href="/")
                    img(src=galleryInfo.logo)
            ul.nav.navbar-nav
              li(ng-show="spec")
                if isAnyAPI
                  a.api-title(href="https://any-api.com" target="_parent")
                    span Any
                    span.fa.fa-bolt
                    span API - 
                    span {{ spec.info.title }}
                else
                  a.no-click.api-title(
                    ng-bind-template="{{ spec.info.title }} {{ spec.info.title.toUpperCase().indexOf('API') === -1 ? 'API' : '' }}")
              li
                include ./includes/spec-link.jade
            .navbar-collapse
              ul.nav.navbar-nav.navbar-right
                if showEditor
                  +navitem('Editor')
                +navitem('README')
                +navitem('Documentation')
                +navitem('Console')
        .container-fluid(ng-if="!spec")
          .row.spec-loading
            .col-md-4.col-md-offset-4.text-center
              i.fa.fa-spin.fa-spinner
        .container-fluid.ng-cloak(ng-if="spec" ng-cloak)
          div(ng-if="oauthDefinition")
            include ./oauth2-modal.jade
          #README.portal-page
            div(ng-if="isActive('README')" ng-cloak)
              include ./readme.jade
          #Console.portal-page(ng-controller="Console")
            div(ng-if="isActive('Console')" ng-cloak)
              include ./console.jade
          #Recipes.portal-page
            div(ng-show="isActive('Recipes')")
              include ./recipes.jade
          #Docs.portal-page(ng-controller="Docs")
            div(ng-if="isActive('Documentation')" ng-cloak)
              include ./documentation.jade
            if showEditor
              div(ng-if="isActive('Editor')" ng-cloak)
                include ./edit-documentation.jade