{{#with data-object}}
  <section class="grid--fluid">

    {{#if title}}
      <h2>
        {{title}}
        {{#each status}}
          <div class="doc-status doc-status--{{ @key }}">
            {{ @key }}
            {{#ifcond @key '===' 'deprecated'}}
              <code>{{this}}</code>
            {{/ifcond}}
          </div>
        {{/each}}
      </h2>
    {{/if}}

    {{#if status.deprecated}}
       <p class="notice notice--error">This component is now deprecated and will be removed/refactored in {{status.deprecated}}</p>
    {{/if}}

    {{#if introduction}}
      <h3>Introduction</h3>
      {{#isarray introduction}}
        {{#each introduction as |introline|}}
          {{{introline}}}
        {{/each}}
      {{else}}
        {{{introduction}}}
      {{/isarray}}
    {{/if}}
    
    {{#if examples}}
      <h3>Examples</h3>
      {{#each examples as |example|}}
        <h4>{{description}}</h4>
        {{#if deprecate}}
          <p class="notice notice--error">This component is now deprecated and will be removed in<code>{{deprecate}}</code>.</p>
        {{/if}}
        {{#if template}}
{{dynamictemplate template template-data false}}
          <pre class="code--debug"><code class="language-html">{{dynamictemplate template template-data true}}</code></pre>
        {{/if}}
        {{#if inline}}
          {{{inline}}}
          <pre class="code--debug"><code class="language-html">{{inline}}</code></pre>
        {{/if}}
      {{/each}}
    {{else}}
      <h3>Examples</h3>
      <p>To display examples in your docs, include an <code>examples</code> attribute in your JSON file.</p>
      <p><code>examples: [ { 'description': 'your description', 'template': 'partial template', 'template-data': {}, 'inline': {}, 'deprecate': 'VERSION_NUMBER' } ]</code></p>
    {{/if}}
    
    {{#if dependencies}}
      <h3>Dependencies</h3>
      <ul>
        {{#each dependencies}}
        <li>
          <code class="language-html">{{this}}</code>
        </li>
        {{/each}}
      </ul>
    {{/if}}
    
    {{#if usages}}
      <h3>Usage</h3>
      <table class="table--debug">
        {{#if usages.head}}
        <thead>
          <tr>
            {{#each usages.head as |tr|}}
            <th>{{this}}</th>
            {{/each}}
          </tr>
        </thead>
        {{else}}
        <thead>
          <tr>
            <th>Class/JavaScript Hook</th>
            <th>Description</th>
            <th>Required?</th>
          </tr>
        </thead>
        {{/if}}{{#if usages.body}}
        <tbody>
          {{#each usages.body as |tr|}}
          <tr>
            {{#each tr}}
            <td>{{{this}}}</td>
            {{/each}}
          </tr>
          {{/each}}
        </tbody>
        {{/if}}
      </table>
    {{/if}}

  </section>
{{/with}}