{% load i18n %}
<div class="format-toolbar mt-2" @click.outside="showFormatting=false">
  <button type="button" class="btn btn-sm btn-outline-secondary format-toggle" :class="{'active':showFormatting}" @mousedown.prevent="currentEl=document.activeElement;showFormatting=!showFormatting" title="{% trans 'Formatting' %}" aria-label="{% trans 'Formatting' %}">Aa</button>
  <div class="format-options shadow-sm" x-show="showFormatting" x-cloak>
    <button type="button" class="btn btn-sm btn-light fw-bold" @mousedown.prevent="formatSelection('bold')" title="{% trans 'Bold' %}">B</button>
    <button type="button" class="btn btn-sm btn-light fst-italic" @mousedown.prevent="formatSelection('italic')" title="{% trans 'Italic' %}">I</button>
    <button type="button" class="btn btn-sm btn-light text-decoration-underline" @mousedown.prevent="formatSelection('underline')" title="{% trans 'Underline' %}">U</button>
    <span class="format-divider"></span>
    <button type="button" class="btn btn-sm btn-light font-monospace" @mousedown.prevent="formatSelection('code')" title="{% trans 'Inline code' %}">&lt;/&gt;</button>
    <button type="button" class="btn btn-sm btn-light" @mousedown.prevent="formatSelection('heading')" title="{% trans 'Heading' %}">H</button>
    <button type="button" class="btn btn-sm btn-light" @mousedown.prevent="formatSelection('quote')" title="{% trans 'Quote' %}">❯</button>
    <button type="button" class="btn btn-sm btn-light" @mousedown.prevent="formatSelection('list')" title="{% trans 'Bullet list' %}">•</button>
    <button type="button" class="btn btn-sm btn-light" @mousedown.prevent="formatSelection('numbered')" title="{% trans 'Numbered list' %}">1.</button>
  </div>
  <span class="small text-muted ms-2 d-none d-md-inline">{% trans 'Select text, then format it' %}</span>
</div>