<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="Bold"
    class="mobiledoc-toolbar__button {{if @editor.activeMarkupTagNames.isStrong 'active'}}"
    {{on 'click' (fn @editor.toggleMarkup 'strong')}}>
    Bold
  </button>
</li>
<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="Italic"
    class="mobiledoc-toolbar__button {{if @editor.activeMarkupTagNames.isEm 'active'}}"
    {{on 'click' (fn @editor.toggleMarkup 'em')}}>
    Italic
  </button>
</li>
<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="Link"
    class="mobiledoc-toolbar__button {{if @editor.activeMarkupTagNames.isA 'active'}}"
    {{on 'click' @editor.toggleLink}}>
    Link
  </button>
</li>
<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="Heading"
    class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isH1 'active'}}"
    {{on 'click' (fn @editor.toggleSection 'h1')}}>
    Headline
  </button>
</li>
<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="Subheading"
    class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isH2 'active'}}"
    {{on 'click' (fn @editor.toggleSection 'h2')}}>
    Subheadline
  </button>
</li>
<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="Block Quote"
    class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isBlockquote 'active'}}"
    {{on 'click' (fn @editor.toggleSection 'blockquote')}}>
    <i class="icon-quote-block"></i>
    Blockquote
  </button>
</li>
<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="Pull Quote"
    class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isPullQuote 'active'}}"
    {{on 'click' (fn @editor.toggleSection 'pull-quote')}}>
    Pull-quote
  </button>
</li>
<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="List"
    class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isUl 'active'}}"
    {{on 'click' (fn @editor.toggleSection 'ul')}}>
    Unordered List
  </button>
</li>
<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="Numbered List"
    class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isOl 'active'}}"
    {{on 'click' (fn @editor.toggleSection 'ol')}}>
    Ordered List
  </button>
</li>
<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="Align Left"
    class="mobiledoc-toolbar__button {{if (includes @editor.activeSectionAttributes.textAlign 'left') 'active'}}"
    {{on 'click' (fn @editor.setAttribute 'text-align' 'left')}}>
    Align Left
  </button>
</li>
<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="Align Center"
    class="mobiledoc-toolbar__button {{if (includes @editor.activeSectionAttributes.textAlign 'center') 'active'}}"
    {{on 'click' (fn @editor.setAttribute 'text-align' 'center')}}>
    Align Center
  </button>
</li>
<li class="mobiledoc-toolbar__control">
  <button
    type="button"
    title="Align Right"
    class="mobiledoc-toolbar__button {{if (includes @editor.activeSectionAttributes.textAlign 'right') 'active'}}"
    {{on 'click' (fn @editor.setAttribute 'text-align' 'right')}}>
    Align Right
  </button>
</li>

{{yield}}
