<div id="basic-handbook" v-cloak>
  <div purpose="handbook-template" style="max-width: 1000px;" class="container-fluid p-0 px-lg-3 mb-5">
    <div class="d-flex flex-column flex-md-row pt-lg-4 pb-lg-4 m-0">

      <div purpose="right-sidebar" class="order-md-last d-none d-md-block pb-3 pb-lg-0 pr-xl-0 right-sidebar">
        <div purpose="maintainer" class="mb-lg-3">
          <h4>Maintained by:</h4>
          <img class="maintainer-image" alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
          <a style="margin-top: 24px;" :href="'https://github.com/fleetdm/fleet/edit/main/handbook/'+thisPage.sectionRelativeRepoPath"> Edit this page</a>
        </div>
        <div v-if="!isHandbookLandingPage">
          <h4 class="font-weight-bold pb-2 m-0 mb-2" v-if="!_.isEmpty(subtopics)">On this page:</h4>
          <div purpose="subtopics">
            <ul class="p-0 m-0">
              <li v-for="(subtopic, index) in subtopics" class="subtopic" :key="index">
                <a :href="subtopic.url" :class="_isCurrentSection(subtopic, this.window.location) ? 'active' : 'pl-md-3'" @click="forceRender()">{{subtopic.title}}</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="border-bottom py-3 d-flex d-md-none"></div>
      </div>

      <div class="d-flex flex-column pl-lg-5 handbook-content">

        <div purpose="breadcrumbs" class="d-flex m-0 align-items-center breadcrumbs">
          <div class="d-flex" v-if="breadcrumbs.length > 1">
            <a :href="'/' + breadcrumbs[0]" class="pr-3">
              {{breadcrumbs[0] === 'handbook' ? 'Introduction' : breadcrumbs[0]}}
            </a>
            <div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length === 3">
              <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png" />
              <a :href="'/' + breadcrumbs[0] + '/' + breadcrumbs[1]" class="px-3">
                {{_getTitleFromUrl(breadcrumbs[1])}}
              </a>
            </div>
            <div class="d-flex p-0 m-0 align-items-center" v-if="breadcrumbs.length > 1">
              <img style="width: 6px; height: 9px;" alt="right chevron" src="/images/chevron-right-6x9@2x.png"/>
              <p class="px-3 m-0">
                {{thisPage.title}}
              </p>
            </div>
          </div>
          <div v-else>
            <strong>Introduction</strong>
          </div>
        </div>

        <div purpose="search" class="d-flex">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text border-0 bg-transparent pl-3" >
                <img style="height: 16px; width: 16px;" class="search" alt="search" src="/images/icon-search-16x16@2x.png">
              </span>
            </div>
            <div class="form-control border-0 ">
            <input id="docsearch-query" class="docsearch-input pr-1"
              placeholder="Search the handbook..." aria-label="Search the handbook"
              />
            </div>
          </div>
        </div>

        <div purpose="right-sidebar" class="d-block d-md-none pb-3 pb-lg-0 pr-xl-0 right-sidebar">
          <div purpose="maintainer" class="mb-lg-3">
            <h4>Maintained by:</h4>
            <img class="maintainer-image" alt="The page maintainer's github profile picture" :src="'https://github.com/'+thisPage.meta.maintainedBy+'.png?size=200'">
            <a style="margin-top: 24px;" :href="'https://github.com/fleetdm/fleet/tree/main/handbook/'+thisPage.sectionRelativeRepoPath"> Edit this page</a>
          </div>
          <div v-if="!isHandbookLandingPage">
            <h4 class="font-weight-bold pb-2 m-0 mb-2" v-if="!_.isEmpty(subtopics)">On this page:</h4>
            <div purpose="subtopics">
              <ul class="p-0 m-0">
                <li v-for="(subtopic, index) in subtopics" class="subtopic" :key="index">
                  <a :href="subtopic.url" :class="_isCurrentSection(subtopic, this.window.location) ? 'active' : 'pl-md-3'" @click="forceRender()">{{subtopic.title}}</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="border-bottom py-3 d-flex d-md-none"></div>
        </div>

        <div purpose="content" id="body-content" class="content" parasails-has-no-page-script>

          <%- partial(
            path.relative(
              path.dirname(__filename),
              path.resolve(
                sails.config.appPath,
                path.join(
                  sails.config.builtStaticContent.compiledPagePartialsAppPath,
                  thisPage.htmlId
                )
              )
            )
          ) %>

        </div>
      </div>
    </div>
  </div>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
