cibernox/ember-power-select

<article class="code-example" ...attributes>
  <nav class="code-example-tabs">
    {{#if @hbs}}
      <div class="code-example-tab {{if (eq this.activeTab "hbs") 'active'}}" role="button" {{on "click" (fn this.setActiveTab "hbs")}}>Template</div>
    {{/if}}
    {{#if @hbs2}}
      <div class="code-example-tab {{if (eq this.activeTab "hbs2") 'active'}}" role="button" {{on "click" (fn this.setActiveTab "hbs2")}}>Template 2</div>
    {{/if}}
    {{#if @js}}
      <div class="code-example-tab {{if (eq this.activeTab "js") 'active'}}" role="button" {{on "click" (fn this.setActiveTab "js")}}>Javascript</div>
    {{/if}}
    {{#if @css}}
      <div class="code-example-tab {{if (eq this.activeTab "css") 'active'}}" role="button" {{on "click" (fn this.setActiveTab "css")}}>CSS</div>
    {{/if}}
    {{#if this.showResult}}
      <div class="code-example-tab {{if (eq this.activeTab "result") 'active'}}" role="button" {{on "click" (fn this.setActiveTab "result")}}>Result</div>
    {{/if}}
  </nav>
  {{#if (and @hbs (eq this.activeTab 'hbs'))}}
    {{#let (get-code-snippet @hbs) as |snippet|}}
      <CodeBlock @language="markup" @code={{snippet.source}} />
    {{/let}}
  {{/if}}
  {{#if @hbs2}}
    {{#let (get-code-snippet @hbs2) as |snippet|}}
      <CodeBlock @language="markup" @code={{snippet.source}} />
    {{/let}}
  {{/if}}
  {{#if (and @js (eq this.activeTab 'js'))}}
    {{#let (get-code-snippet @js) as |snippet|}}
      <CodeBlock @language={{snippet.language}} @code={{snippet.source}} />
    {{/let}}
  {{/if}}
  {{#if (and @css (eq this.activeTab 'css'))}}
    {{#let (get-code-snippet @css) as |snippet|}}
      <CodeBlock @language={{snippet.language}} @code={{snippet.source}} />
    {{/let}}
  {{/if}}
  {{#if (and this.showResult (has-block))}}
    <div class="code-example-snippet result {{if (eq this.activeTab 'result') 'active'}}">
      {{yield this.partialName}}
    </div>
  {{/if}}
</article>