{{!-- template-lint-disable no-inline-styles --}}
<div class="FreestyleGuide" ...attributes>
  <header class="FreestyleGuide-header">
    <a
      class="FreestyleGuide-cta FreestyleGuide-cta--nav {{unless this.showMenu 'FreestyleGuide-cta--active'}}"
      title="Show Nav"
      href="#"
      {{on 'click' this.toggleNav}}
    >
      <svg height="20px" class="FreestyleGuide-ctaIcon" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="20px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
    </a>
    <div class="FreestyleGuide-titleContainer">
      <h1 class="FreestyleGuide-title">{{@title}}</h1>
      <div class="FreestyleGuide-subtitle">{{@subtitle}}</div>
    </div>
    <button
      class="FreestyleGuide-cta FreestyleGuide-cta--aside {{unless this.showAside 'FreestyleGuide-cta--active'}}"
      type="button"
      {{on 'click' this.toggleAside}}
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="FreestyleGuide-ctaIcon" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 340.274 340.274" style="enable-background:new 0 0 340.274 340.274;" xml:space="preserve"><path d="M293.629,127.806l-5.795-13.739c19.846-44.856,18.53-46.189,14.676-50.08l-25.353-24.77l-2.516-2.12h-2.937 c-1.549,0-6.173,0-44.712,17.48l-14.184-5.719c-18.332-45.444-20.212-45.444-25.58-45.444h-35.765 c-5.362,0-7.446-0.006-24.448,45.606l-14.123,5.734C86.848,43.757,71.574,38.19,67.452,38.19l-3.381,0.105L36.801,65.032 c-4.138,3.891-5.582,5.263,15.402,49.425l-5.774,13.691C0,146.097,0,147.838,0,153.33v35.068c0,5.501,0,7.44,46.585,24.127 l5.773,13.667c-19.843,44.832-18.51,46.178-14.655,50.032l25.353,24.8l2.522,2.168h2.951c1.525,0,6.092,0,44.685-17.516 l14.159,5.758c18.335,45.438,20.218,45.427,25.598,45.427h35.771c5.47,0,7.41,0,24.463-45.589l14.195-5.74 c26.014,11,41.253,16.585,45.349,16.585l3.404-0.096l27.479-26.901c3.909-3.945,5.278-5.309-15.589-49.288l5.734-13.702 c46.496-17.967,46.496-19.853,46.496-25.221v-35.029C340.268,146.361,340.268,144.434,293.629,127.806z M170.128,228.474 c-32.798,0-59.504-26.187-59.504-58.364c0-32.153,26.707-58.315,59.504-58.315c32.78,0,59.43,26.168,59.43,58.315 C229.552,202.287,202.902,228.474,170.128,228.474z"/></svg>
    </button>
  </header>
  <main class="FreestyleGuide-body">
    <article class="FreestyleGuide-content" {{freestyle-scroll-spy}}>
      {{yield}}
      {{#if (and (not this.allowRenderingAllSections) (not this.isSectionSelected))}}
        <div class="FreestyleGuide-chooseSectionMessage" data-test-choose-section>
          <span>Choose a section from the menu</span>
        </div>
      {{/if}}
    </article>
    {{#if this.showMenu}}
      <nav class="FreestyleGuide-nav">
        <FreestyleMenu
          @includeAllOption={{this.allowRenderingAllSections}}
        />
      </nav>
    {{/if}}
    {{#if this.showAside}}
      <aside class="FreestyleGuide-aside"
        {{focus-trap
          focusTrapOptions=(hash
            onDeactivate=(fn (mut this.showAside) false)
            allowOutsideClick=true
            escapeDeactivates=true
          )
        }}
      >
        <FreestyleUsageControls />
      </aside>
    {{/if}}
  </main>
</div>