  <%
    var githubUrl =
      'https://github.com/' +
      config.github_repo +
      '/tree/' +
      // If on a version, use the `version-X` branch, not `master`.
      (config.version ? 'version-' + config.version : (config.edit_branch ? config.edit_branch : 'master')) +
      (config.edit_path ? '/' + config.edit_path : '') +
      '/' +
      (config.content_root || 'content') +
      '/' +
      page.path.replace(/\.html$/, '.md');
  %>

  <div class="nav <%- config.nav_class %>">
    <div class="nav-group left">
      <div class="nav-item mobile-button js-sidebar-toggle show-mobile">
        <span class="icon-menu"></span>
      </div>
      <div class="nav-item nav-item-logo">
        <% logo = config.logo || theme.logo %>
        <a class="logo-wrapper" href="<%- logo.url %>" title="<%- logo.title %> <%- logo.subtitle %>" <%- logo.target && 'target=' + logo.target %> >
          <img src="<%- relative_url(page.path, logo.nav_mobile) %>" alt="<%- logo.title %>" class="logo"/>
          <% if (logo && logo.subbrand) { %>
            <img src="<%- relative_url(page.path, logo.subbrand) %>" class="logo-subbrand" alt="<%- logo.subtitle %>"/>
          <% } else { %>
            <span><%- logo && logo.subtitle %></span>
          <% } %>
        </a>
      </div>
    </div>


    <% if (config.apollo_nav) { %>
      <div class="nav-group right">
        <div id="nav-container" class="show-desktop"></div>
        <script src="https://apollographql-nav.netlify.com/index.js"></script>
        <script>ApolloNav.initNav({ theme: 'light' }, 'nav-container')</script>
      </div>
    <% } else { %>
      <div class="nav-group right">
        <% _.each(config.nav_links || theme.nav_links, function (link, title) { %>
          <div class="nav-item show-desktop <%- link.active && 'active' %> <%- link.separator && 'separator' %>">
            <a class="link" href="<%- link.url || link %>" <%- link.target && 'target=' + link.target %> >
              <span><%- title %></span>
            </a>
          </div>
        <% }) %>
    <% } %>
    </div>
  </div>

  <%- partial('partials/sidebar') %>
    <div class="content">

      <div class="header-content">
        <div class="header-wrapper">
          <div class="title-wrapper">
            <h1 class="title-page">
              <%- page.title %>
            </h1>
            <% if (page.description) { %>
              <div class="subtitle-page">
                <%- page.description %>
              </div>
              <% } %>
          </div>
        </div>
      </div>

      <div class="content-wrapper">
        <div class="document-formatting">
          <%- page.content %>
        </div>
      </div>

      <div class="pagination">
        <div class="content-wrapper">
          <%
            function findAdjacent (direction) {
              var pagePaths = _.flatten(_.map(config.sidebar_categories, function(vals) { return vals; }));
              var pages = _.map(pagePaths, function (val) { return site.pages.findOne({path: val + '.html'}); });
              var i = pages.length
              while (i--) {
                if (pages[i] && pages[i].title === page.title) {
                  break
                }
              }
              return direction > 0
                ? pages[i + 1]
                : pages[i - 1]
            }
          %>
          <% var prev = findAdjacent(-1); if (prev) { %>

              <a class="link primary prev" href="<%- relative_url(page.path, prev.path) %>">
                <span class="icon-arrow-left-alt"></span>
                <span class="subtitle-pagination">Previous</span>
                <%- prev.title %>
              </a>

          <% } %>
          <% var next = findAdjacent(1); if (next) { %>

              <a class="link primary next" href="<%- relative_url(page.path, next.path) %>">
                <span class="subtitle-pagination">Next</span>
                <%- next.title %>
                  <span class="icon-arrow-right-alt"></span>
              </a>

          <% } %>
        </div>
      </div>

      <div class="github">
        <a class="link tertiary " href="<%- githubUrl %>" target="_blank">
          <span class="icon-github"></span>Edit on GitHub</a>
      </div>

      <% if (page.discourseTopicId) { %>
        <div class="discourse-comments-wrapper content-wrapper">
          <div id='discourse-comments'></div>
        </div>

        <script type="text/javascript">
          DiscourseEmbed = {
            discourseUrl: 'http://forums.meteor.com/',
            topicId: <%- page.discourseTopicId %> };

          (function () {
            var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
            d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
          })();
        </script>
        <% } %>
    </div>
