{# A button that runs one awaited call and is off, showing a spinner, until it settles.  #}
{# The behaviour is the asyncButton Alpine component, in js/components/async_button.js.  #}
{#                                                                                       #}
{#   x_button_click  The call to await, as an Alpine expression: 'component.save()'.     #}
{#   x_busy          Optional. The name of a flag in an enclosing scope, such as         #}
{#                   'isSettling'. Buttons that name the same flag take turns.           #}
{#   button_text     The label.                                                          #}
{#   button_class    Bootstrap button classes. Defaults to 'btn-primary text-light'.     #}
{#   button_icon     Optional icon classes, such as 'bi bi-trash'.                       #}
{#   button_title    Optional tooltip.                                                   #}
<button
    class="btn {{ button_class|default:'btn-primary text-light' }}"
    type="button"
    {% if button_title %}title="{{ button_title }}"{% endif %}
    x-bind="asyncButton(() => {{ x_button_click }}{% if x_busy %}, '{{ x_busy }}'{% endif %})"
>
    <span x-show="isRunning" x-cloak class="spinner-border spinner-border-sm me-1" role="status"></span>
    {% if button_icon %}<i x-show="!isRunning" class="{{ button_icon }} me-1"></i>{% endif %}{{ button_text }}
</button>