<%
  const hasOwn = Object.prototype.hasOwnProperty;
  function isOutsidePath(path) {
    return hasOwn.call(path, "href") && hasOwn.call(path, "title");
  }

  function pathDetails(path) {
    // If it's a link to an outside URL we don't have any page information
    // so we just obey what we've been provided.
    if (isOutsidePath(path)) {
      return path;
    }

    // The path we've been told to find from _config.yaml.
    const htmlPath = `${path}.html`

    const extraClasses = [];

    // Highlight this link if it's the page we're on.
    if (page.path === htmlPath) {
      extraClasses.push("current");
    }

    // Lookup information about this page.
    const doc = site.pages.findOne({ path: htmlPath });

    // Display nothing if there are no DB details available.
    if (!doc) {
      return;
    }

    let href = doc.path && relative_url(page.path, doc.path);

    // Make sure we don't link to /docs/thing/index.html, and instead link to /docs/thing/
    if (href.endsWith('index.html')) {
      href = href.replace(/index.html$/, '.');
    }

    return {
      href,
      title: doc.sidebar_title || doc.title || path,
      extraClasses: extraClasses.join(" "),
    };
  }
%>

<div class="sidebar <% if (config.apollo_nav) { %>charcoal<% } %>">
  <div class="panel">
    <% if (config.apollo_nav) { %>
      <div id="sidebar-panel-nav"></div>
      <script>ApolloNav.initNav({ theme: 'light', id: 'mobile-nav' }, 'sidebar-panel-nav')</script></a>
    <% } else { %>
      <div class="panel-item">
        <a class="" href="<%- relative_url(page.path, theme.logo.url) %>" title="<%- theme.logo.title %>" <%- theme.logo.target && 'target=' + theme.logo.target %> >
          <span><%- theme.logo.title %> <%- theme.logo.subtitle %></span>
        </a>
      </div>
      <% _.each(config.nav_links || theme.nav_links, function (link, title) { %>
        <div class="panel-item <%- link.active && 'active' %>">
          <a class="" href="<%- link.url || link %>" <%- link.target && 'target=' + link.target %> >
            <span><%- title %></span>
          </a>
        </div>
      <% }) %>
    <% } %>
  </div>

  <div class="sidebar-content">
    <div class="topcap">
      <span class="title-sidebar"><%- config.title %></span>
      <% if (config.versions && config.versions.length > 1) { %>
        <span class="select version-sidebar nochrome">
          <select class="version-select">
            <% config.versions.forEach(function (v) { %>
              <option value="v<%- v %>"><%- v %></option>
            <% }) %>
          </select>
        </span>
      <% } %>
    </div>

    <% if (config.apis && config.apis.docsearch) { %>
    <div class="wrapper-search">
      <div class="input-area">
        <div class="input-symbol small round">
          <input type="text" placeholder="Search <%- config.subtitle %>" id="desktop-search-input" />
          <span class="icon-search"></span>
        </div>
      </div>
      <div class="wrapper-desktop-search-results"></div>
    </div>

    <% } %>

    <ul class="toc">
      <% _.each(config.sidebar_categories, function(pages, category) { %>

        <li>
          <% if (category !== 'null') { %>
            <div class="heading-toc"><%- category %></div>
          <% } %>

          <ul class="list-toc">
            <% pages.forEach(function(path) { %>
              <% const details = pathDetails(path) %>
              <% if (details) { %>
              <li class="item-toc <%- details.extraClasses %>">
                <a
                  href="<%- details.href %>"
                  class="sidebar-link <%- details.extraClasses %>"
                >
                  <span><%- details.title %></span>
                </a>
              </li>
              <% } %>
            <% }); %>
          </ul>
        </li>

        <hr />
      <% }); %>
    </ul>
  </div>
</div>
