<div class="c-subscribe js-subscribe {{class}}">
  <div class="c-subscribe__controls-ui js-subscribe__controls-ui">
    {% if subscribe_heading %}
      {% include '@cloudfour/components/heading/heading.twig' with {
        content: subscribe_heading,
        class: 'c-subscribe__heading',
        level: heading_level|default(2),
        tag_name: heading_tag,
        weight: heading_weight
      } only %}
    {% endif %}

    <div class="c-subscribe__controls">
      {% include '@cloudfour/components/button-swap/button-swap.twig' with {
        button_class: [
          'c-subscribe__control',
          'js-subscribe__control',
          notifications_btn_class|default('')
        ]|join(' '),
        initial_label:
          notifications_btn_initial_label|default('Notifications have been turned off.'),
        initial_visual_label:
          notifications_btn_initial_visual_label|default('Get notifications'),
        swapped_label:
          notifications_btn_swapped_label|default('Notifications have been turned on.'),
        swapped_visual_label:
          notifications_btn_swapped_visual_label|default('Turn off notifications'),
      } only %}

      {% include '@cloudfour/components/button/button.twig' with {
        href: "#subscribe-#{form_id}",
        class: [
          'c-subscribe__control',
          'js-subscribe__control',
          'js-subscribe__get-weekly-digests-btn',
          weekly_digests_btn_class|default('')
        ]|join(' '),
        label: weekly_digests_btn_label|default('Get Weekly Digests'),
        content_start_icon: weekly_digests_btn_icon|default('envelope')
      } only %}
    </div>
  </div>

  <form
    id="subscribe-{{form_id}}"
    action="{{form_action}}"
    method="post"
    target="_blank"
    class="c-subscribe__form"
    {% if weekly_digests_heading %}
      aria-labelledby="get-weekly-digests-{{form_id}}"
    {% endif %}
  >
    {% if weekly_digests_heading %}
      {% include '@cloudfour/components/heading/heading.twig' with {
        content: weekly_digests_heading,
        id: "get-weekly-digests-#{form_id}",
        class: 'c-subscribe__heading',
        level: heading_level|default(2),
        tag_name: heading_tag,
        weight: heading_weight
      } only %}
    {% endif %}

    <label
      class="c-subscribe__form-input-label"
      for="subscription-email-{{form_id}}"
    >
      {{email_input_label|default('Email')}}
    </label>
    {% embed '@cloudfour/objects/input-group/input-group.twig' with {
      class: 'c-subscribe__form-input-group',
      form_id: form_id,
      email_input_name: email_input_name,
      email_input_placeholder: email_input_placeholder,
      submit_btn_label: submit_btn_label
    } only %}
      {% block content %}
        {% include '@cloudfour/components/input/input.twig' with {
          id: "subscription-email-#{form_id}",
          type: 'email',
          class: 'c-subscribe__form-input',
          name: email_input_name|default('email'),
          placeholder: email_input_placeholder|default('Your Email Address'),
          autocomplete: 'home email',
          required: 'required'
        } only %}
        {% include '@cloudfour/components/button/button.twig' with {
          class: 'c-subscribe__form-button',
          label: submit_btn_label|default('Subscribe')
        } only %}
      {% endblock %}
    {% endembed %}
  </form>
</div>
