extends layout

append style
  link(rel="stylesheet", href=`${versions.versionedPath}/docs/css/api.css`)
  script(src=`${versions.versionedPath}/docs/js/api-bold-current-nav.js`)
  script(src=`${versions.versionedPath}/docs/js/convert-old-anchorid.js`)

block content
  .article-header
    h1 #{title}
    <a class="edit-docs-link" href="#{editLink}" target="_blank">
      <img src="#{versions.versionedPath}/docs/images/pencil.svg" />
    </a>

  div.api-nav
    div.api-nav-content
      each item in docs
        - if (!item.hideFromNav || item.title === title)
          div.nav-item(id='nav-' + item.title)
            - if (item.title === title)
              div.nav-item-title(style="font-weight: bold")
                a(href=item.fileName + '.html')
                  | #{item.title}
              ul.nav-item-sub
                each prop in item.props
                  li
                    a(href='#' + prop.anchorId)
                      | <code>#{prop.string}</code>
            - else
              div.nav-item-title
                a(href=item.fileName + '.html')
                  | #{item.title}

  div.api-content
    ul
      each prop in props
        li
          a(href='#' + prop.anchorId)
            | <code>#{prop.string}</code>
    each prop in props
      hr.separate-api-elements
      h3(id=prop.anchorId)
        a(href='#' + prop.anchorId)
          | <code>#{prop.string}</code>
      if prop.deprecated
        <span class="deprecated">~DEPRECATED~</span>
      if prop.param != null
        h5 Parameters:
        ul.params
          each param in prop.param
            - if (param.nested)
              ul(style="margin-top: 0.5em")
                li
                  | <code>#{param.name}</code>
                  | <span class="method-type">&laquo;#{param.types}&raquo;</span> !{param.description}
            - else
              li.param
                | <code>#{param.name}</code>
                | <span class="method-type">&laquo;#{param.types}&raquo;</span> !{param.description}
      if prop.return != null
        h5 Returns:
        ul
          li <span class="method-type">&laquo;#{prop.return.types}&raquo;</span> !{prop.return.description}
      if prop.type != null && prop.type !== 'method' && prop.type !== 'function'
        h5 Type:
        ul
          li <span class="method-type">&laquo;#{prop.type}&raquo;</span>
      if prop.inherits != null
        h5 Inherits:
        ul
          li <span class="method-type"><a href="#{prop.inherits.url}">&laquo;#{prop.inherits.text}&raquo;</a></span>
      if prop.see != null && prop.see.length > 0
        h5 See:
        ul
          each see in prop.see
            li <span class="method-type"><a href="#{see.url}">#{see.text}</a></span>
      div
        | !{prop.description}