<div class="scribe-widget" data-name="{{ field.name }}"
     {%- if kw.allowed_tags %} data-allowed-tags="{{ kw.allowed_tags | tojson |forceescape }}"{%- endif %}
     {%- if kw.rows %} data-rows="{{ kw.rows }}"{%- endif %}>
  <input type="hidden" name="{{ field.name }}" value="{{ value }}" />

  <div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle select"
          data-toggle="dropdown">
        {{ _('Paragraph') }}
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#" data-command-name="formatBlock"
            data-command-value="&lt;p&gt;">{{ _('Paragraph') }}</a></li>
        <li><a href="#" class="h1"
            data-command-name="h1">{{ _('Heading 1') }}</a></li>
        <li><a href="#" class="h2"
            data-command-name="h2">{{ _('Heading 2') }}</a></li>
        <li><a href="#" class="h3"
            data-command-name="h3">{{ _('Heading 3') }}</a></li>
      </ul>
    </div>

    <div class="btn-group">
      <button type="button" class="btn btn-default" title="{{ _('bold') }}"
          data-command-name="bold"><i class="fa fa-bold"></i></button>
      <button type="button" class="btn btn-default" title="{{ _('italic') }}"
          data-command-name="italic"><i class="fa fa-italic"></i></button>
      <button type="button" class="btn btn-default" title="{{ _('underline') }}"
          data-command-name="underline"><i class="fa fa-underline"></i></button>
    </div>

    {# default implementation (native) uses style=""; we could implement a
    patchedCommand to use bootstrap's classes (text-center etc), but scribes
    default sanitizer plugin filters attributes on name, not content #}
    {#
    <div class="btn-group">
      <button type="button" class="btn btn-default" data-command-name="justifyLeft"><i class="fa fa-align-left"></i></button>
      <button type="button" class="btn btn-default" data-command-name="justifyCenter"><i class="fa fa-align-center"></i></button>
      <button type="button" class="btn btn-default" data-command-name="justifyRight"><i class="fa fa-align-right"></i></button>
      <button type="button" class="btn btn-default" data-command-name="justifyFull"><i class="fa fa-align-justify"></i></button>
    </div>
    #}
    <div class="btn-group">
      <button type="button" class="btn btn-default" title="{{ _('bulleted list') }}" data-command-name="insertUnorderedList"><i class="fa fa-list-ul"></i></button>
      <button type="button" class="btn btn-default" title="{{ _('numbered list') }}" data-command-name="insertOrderedList"><i class="fa fa-list-ol"></i></button>
    </div>

    <div class="btn-group">
      <button type="button" class="btn btn-default" data-command-name="linkPrompt" title="{{ _('Add link') }}">
        <i class="fa fa-link"></i>
      </button>
      <button type="button" class="btn btn-default" title="{{ _('Remove link') }}" data-command-name="unlink"><i class="fa fa-unlink"></i></button>
      <button type="button" class="btn btn-default" title="{{ _('cite') }}" data-command-name="blockquote"><i class="fa fa-quote-left"></i></button>
    </div>

    <div class="btn-group pull-right">
      <button type="button" class="btn btn-default" title="{{ _('undo') }}" data-command-name="undo">
        <i class="fa fa-undo"></i>
      </button>
      <button type="button" class="btn btn-default" title="{{ _('redo') }}" data-command-name="redo">
        <i class="fa fa-repeat"></i>
      </button>
    </div>
  </div>

  <div class="form-control textarea resizeable-vertical editor">
    {{ value | safe }}
  </div>

</div>
