{#
  This pattern currently only supports a start icon.
  End icon support can be added in the future if needed.
#}
<div class="c-button-swap js-button-swap{% if class %} {{ class }}{% endif %}">
  <div class="c-button-swap__subscribe js-button-swap__initial-button-wrapper">
    <span tabindex="-1" role="status" class="u-hidden-visually js-button-swap__message">
      {{ initial_label|default('Currently unsubscribed from notifications') }}
    </span>

    {% include '@cloudfour/components/button/button.twig' with {
      class: ['js-button-swap__button', button_class]|join(' '),
      content_start_icon: content_start_icon|default('bell'),
      label: initial_visual_label|default('Get notifications')
    } only %}
  </div>
  <div class="c-button-swap__unsubscribe js-button-swap__swapped-button-wrapper" hidden>
    <span tabindex="-1" role="status" class="u-hidden-visually js-button-swap__message">
      {{ swapped_label|default('Currently subscribed to notifications') }}
    </span>

    {% include '@cloudfour/components/button/button.twig' with {
      class: [
        'c-button--secondary',
        'is-slashed',
        'js-button-swap__button',
        button_class
      ]|join(' '),
      content_start_icon: content_start_icon|default('bell'),
      label: swapped_visual_label|default('Turn off notifications')
    } only %}
  </div>
</div>