{#- Two buttons that switch a document between two views, kept in the
    `view` of the x-data around them. `switch_views` holds (value, label)
    pairs, the first shown to begin with; `switch_label` names what they
    switch. Where `switch_json_url` is given, choosing JSON asks the server
    for it, into `switch_json_target`. -#}
<span class="inline-flex gap-0.5 rounded-field bg-base-200 p-0.5 font-normal" role="group"
      aria-label="{{ _('Show {thing} as', thing=switch_label|lower) }}">
  {%- for value, label in switch_views %}
    <button type="button" class="h-6 rounded-md px-2.5 text-[12.5px] font-medium text-muted"
            :class="view === '{{ value }}' ? 'bg-base-100 text-base-content shadow-quiet' : 'hover:text-base-content'"
            aria-pressed="{{ 'true' if loop.first else 'false' }}" :aria-pressed="(view === '{{ value }}').toString()"
            @click="view = '{{ value }}'"
            {% if value == "json" and switch_json_url|default("") %}hx-post="{{ switch_json_url }}" hx-target="#{{ switch_json_target }}" hx-swap="innerHTML"{% endif %}>{{ label }}</button>
  {%- endfor %}
</span>