{{#if data.label}}
  <p><span class="label label-admin">{{toUpperCase data.label}}</span></p>
{{/if}}

{{#if data.help}}
  {{{t data.help markdown=true}}}
{{/if}}

{{#if data.release}}
  <div class="release-notes alert alert-warning">
    {{{t data.release markdown=true}}}
  </div>
{{/if}}

{{#unless data.empty}}
  <div class="code-example">
    <div class="example-output">
      {{{material @key @root}}}

      <button type="button" class="show-code" data-toggle="collapse" data-target="#code-{{replace '(\.)' '-' @key}}" aria-expanded="{{#if data.expanded}}true{{else}}false{{/if}}" role="button-show-code">&lt;/&gt;</button>
    </div>

    <div class="code-block collapse{{#if data.expanded}} in{{/if}}" aria-expanded="{{#if data.expanded}}true{{else}}false{{/if}}" id="code-{{replace '(\.)' '-' @key}}">
      <pre><code class="language-markup">{{material @key @root}}</code></pre>
    </div>
  </div>
{{/unless}}

{{#if data.javascript}}
  <div class="code-block js-example">
    <pre><code class="language-javascript">{{renderFile 'javascripts/' data.javascript}}</code></pre>
  </div>
{{/if}}

{{#if data.complement}}
  {{{renderFile 'complements/' data.complement}}}
{{/if}}

{{#if data.label}}
  <p><span class="label label-admin">{{toUpperCase data.label}}</span></p>
{{/if}}

{{#if data.help}}
  {{{t data.help markdown=true}}}
{{/if}}

{{#if data.release}}
  <div class="release-notes alert alert-warning">
    {{{t data.release markdown=true}}}
  </div>
{{/if}}

{{#unless data.empty}}
  <div class="code-example">
    <div class="example-output">
      {{{material @key @root}}}

      <button type="button" class="show-code" data-toggle="collapse" data-target="#code-{{replace '(\.)' '-' @key}}" aria-expanded="{{#if data.expanded}}true{{else}}false{{/if}}">&lt;/&gt;</button>
    </div>

    <div class="code-block collapse{{#if data.expanded}} in{{/if}}" aria-expanded="{{#if data.expanded}}true{{else}}false{{/if}}" id="code-{{replace '(\.)' '-' @key}}" role="markup-code-block">
      <pre><code class="language-markup">{{material @key @root}}</code></pre>
    </div>
  </div>
{{/unless}}

{{#if data.javascript}}
  <div class="code-block js-example" role="js-code-block">
    <pre><code class="language-javascript">{{renderFile 'javascripts/' data.javascript}}</code></pre>
  </div>
{{/if}}

{{#if data.complement}}
  {{{renderFile 'complements/' data.complement}}}
{{/if}}

Add role on code block
Add role on code block
