<main
  class="docs-px-4 md:docs-px-8 lg:docs-px-20 docs-mx-auto md:docs-mx-0 docs-mt-6 md:docs-mt-12 md:docs-min-w-0 md:docs-flex-1"
  {{did-insert this.setupElement}}
  {{will-destroy this.teardownElement}}
  ...attributes
>
  <div data-current-page-index-target>
    {{yield}}

    {{#if this.editCurrentPageUrl}}
      <div class="docs-mt-16 docs-mb-8" data-test-edit-page-link>
        <a
          href={{this.editCurrentPageUrl}}
          class="docs-transition docs-text-grey-darkest docs-opacity-50 docs-text-xs hover:docs-opacity-75 docs-no-underline docs-border-b docs-border-grey hover:docs-border-grey-darkest"
        >
          Edit this page
        </a>
      </div>
    {{/if}}
  </div>

  <div
    class="docs-mt-16 docs-pb-16 docs-border-t docs-border-grey-lighter docs-pt-4 docs-flex"
  >
    <div class="docs-w-1/2">
      {{#if this.docsRoutes.previous}}
        <div class="docs-text-xs docs-text-grey-dark">
          Previous
        </div>
        <LinkTo
          class="docs-text-grey-darkest docs-text-large-4 docs-font-light docs-no-underline docs-border-b docs-border-grey hover:docs-border-grey-darkest docs-transition"
          @route={{this.docsRoutes.previous.route}}
          @models={{this.docsRoutes.previous.models}}
        >
          {{this.docsRoutes.previous.label}}
        </LinkTo>
      {{/if}}
    </div>

    <div class="docs-w-1/2 docs-text-right" data-test-next-link>
      {{#if this.docsRoutes.next}}
        <div class="docs-text-xs docs-text-grey-dark">
          Next
        </div>
        <LinkTo
          class="docs-text-grey-darkest docs-text-large-4 docs-font-light docs-no-underline docs-border-b docs-border-grey hover:docs-border-grey-darkest docs-transition"
          @route={{this.docsRoutes.next.route}}
          @models={{this.docsRoutes.next.models}}
        >
          {{this.docsRoutes.next.label}}
        </LinkTo>
      {{/if}}
    </div>
  </div>
</main>