{% 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>
  {% if item_kind_choices %}
    <label class="ms-auto mb-0 d-flex align-items-center gap-2 small text-muted">
      <span class="d-none d-sm-inline">{% trans 'Type' %}</span>
      <select class="form-select form-select-sm w-auto" name="default_item_kind" title="{% trans 'Default type for new entry' %}" hx-post="{% url 'set_default_item_kind' %}" hx-trigger="change" hx-swap="none">
        {% for value, label in item_kind_choices %}<option value="{{ value }}"{% if value == selected_item_kind %} selected{% endif %}>{{ label }}</option>{% endfor %}
      </select>
    </label>
  {% endif %}
</div>