{#
    All Params:
      @param title_text: H2 title text
      @param input_label: Label for the input field
      @param checkbox_id: Name for the checkbox field, used for agreeing to something before submitting the form. This may vary based on the backend used to collect form responses.
      @param checkbox_label: Label for the checkbox
      @param layout: Layout variant for the section. Options are "50-50", "25-75", "2-col", and "4-col". Default is "25-75".
      @param form_id: Form ID
      @param form_action: Action URL for the form submission, typically the form endpoint.
      @param return_url: URL to return to after form submission
      @param top_rule_variant (string) (optional): Variant of the top rule, default is "default". Options are "muted", "highlighted", "default", "none".
      @param hide_newsletter_block_rule (boolean) (optional): Whether to hide the newsletter block rule on medium/small screens. Default is false.
      @param submit_btn_class (string) (optional): Additional classes to add to the submit button.

    All Slots:
      @slot description: Description text, one or more paragraphs
      @slot addendum: Additional content to include in the form, such as a disclaimer or additional information
      @slot hidden_fields: Additional hidden fields to include in the form
      @slot honeypot_fields: hidden honeypot fields for spam prevention
#}
{%- macro vf_newsletter_signup(form_id, return_url, title_text, form_action="https://ubuntu.com/marketo/submit", input_label="Work email", checkbox_id="canonicalUpdatesOptIn", checkbox_label="I agree to receive information about Canonical's products and services.", layout="25-75", top_rule_variant="default", hide_newsletter_block_rule=false, submit_btn_class="js-submit-button", caller=None) -%}
  {% set layout = layout | trim %}
  {% if layout not in ['50-50', '25-75', '2-col', '4-col'] %}
    {% set layout = "25-75" %}
  {% endif %}
  {% set top_rule_variant = top_rule_variant | trim %}
  {% if top_rule_variant not in ['muted', 'highlighted', 'default', 'none'] %}
    {% set top_rule_variant = "default" %}
  {% endif %}
  {% set description = caller('description') %}
  {% set has_description = description | trim | length > 0 %}
  {% set addendum = caller('addendum') %}
  {% set has_addendum = addendum | trim | length > 0 %}
  {% set hidden_fields = caller('hidden_fields') %}
  {% set has_hidden_fields = hidden_fields | trim | length > 0 %}
  {% set honeypot_fields = caller('honeypot_fields') %}
  {% set has_honeypot_fields = honeypot_fields | trim | length > 0 %}
  {% set is_section_level = layout in ['50-50', '25-75'] %}
  {% set is_grid_level = layout in ['2-col', '4-col'] %}
  {% set heading_level = 'h2' if is_section_level else 'h3' %}
  {%- macro _top_rule() -%}
    {% if top_rule_variant != 'none' %}
      {% set rule_class = 'muted' if top_rule_variant == 'muted' else 'highlight' if top_rule_variant == 'highlighted' %}
      <hr class="p-rule{% if top_rule_variant != 'default' %}--{{ rule_class }}{% endif %} is-fixed-width" />
    {% endif %}
  {%- endmacro -%}
  {%- if is_section_level -%}
    <section class="p-section">
    {%- endif -%}
    {{ _top_rule() | safe }}
    <div class="grid-row--{% if is_section_level %}{{ layout }}-on-large{% else %}25-25-25-25{% endif %}">
      {% if is_grid_level %}
        {%- set upper_limit = 4 if layout == '2-col' else 3 -%}
        {%- for number in range(1, upper_limit) -%}
          {%- set col_content = caller('col_' + number|string) -%}
          <div class="grid-col">{{ col_content | safe }}</div>
        {%- endfor -%}
      {% endif %}
      <div class="grid-col{% if layout == '4-col' %}-4{% endif %} {% if is_grid_level %}p-newsletter-signup--{{ layout }}{% endif %}">
        {%- if is_grid_level and not hide_newsletter_block_rule -%}
          <hr class="p-rule--muted u-hide--large {% if layout == '2-col' %}u-hide--medium{% endif %}" />
        {%- endif -%}
        <{{ heading_level }}>{{ title_text }}</{{ heading_level }}>
        {% if is_section_level %}</div>{% endif %}
      {% if is_section_level %}<div class="grid-col">{% endif %}
        {% if has_description %}{{ description | safe }}{% endif %}
        <form action="{{ form_action }}" method="post" id="{{ form_id }}">
          <label class="is-required" for="email">{{ input_label }}:</label>
          <input required
                 id="email"
                 name="email"
                 maxlength="255"
                 type="email"
                 pattern="^[^ ]+@[^ ]+\.[a-z]{2,26}$"
                 required="required" />
          <label class="p-checkbox is-required">
            <input required
                   class="p-checkbox__input"
                   value="yes"
                   aria-labelledby="{{ checkbox_id }}"
                   name="{{ checkbox_id }}"
                   type="checkbox" />
            <span class="p-checkbox__label" id="{{ checkbox_id }}">{{ checkbox_label }}</span>
          </label>
          {% if has_addendum %}
            {{ addendum | safe }}
          {% else %}
            <p>
              By submitting this form, I confirm that I have read and agree to <a href="https://ubuntu.com/legal/terms-and-policies/privacy-policy">Canonical's Privacy Policy</a>.
            </p>
          {% endif %}
          <button type="submit"
                  class="u-no-margin--bottom {{ submit_btn_class | safe }}">Sign up</button>
          {% if has_hidden_fields %}
            {{ hidden_fields | safe }}
          {% else %}
            <input type="hidden"
                   aria-hidden="true"
                   aria-label="hidden field"
                   name="returnURL"
                   value="{{ return_url }}" />
            <input type="hidden"
                   aria-hidden="true"
                   aria-label="hidden field"
                   name="formid"
                   value="{{ form_id }}" />
            <input type="hidden"
                   aria-hidden="true"
                   aria-label="hidden field"
                   name="productContext"
                   id="product-context"
                   value="" />
            <input type="hidden"
                   aria-hidden="true"
                   aria-label="hidden field"
                   name="utm_campaign"
                   id="utm_campaign"
                   value="" />
            <input type="hidden"
                   aria-hidden="true"
                   aria-label="hidden field"
                   name="utm_medium"
                   id="utm_medium"
                   value="" />
            <input type="hidden"
                   aria-hidden="true"
                   aria-label="hidden field"
                   name="utm_source"
                   id="utm_source"
                   value="" />
            <input type="hidden"
                   aria-hidden="true"
                   aria-label="hidden field"
                   name="utm_content"
                   id="utm_content"
                   value="" />
            <input type="hidden"
                   aria-hidden="true"
                   aria-label="hidden field"
                   name="utm_term"
                   id="utm_term"
                   value="" />
            <input type="hidden"
                   aria-hidden="true"
                   aria-label="hidden field"
                   name="GCLID__c"
                   id="GCLID__c"
                   value="" />
            <input type="hidden"
                   aria-hidden="true"
                   aria-label="hidden field"
                   name="Facebook_Click_ID__c"
                   id="Facebook_Click_ID__c"
                   value="" />
            <input type="hidden"
                   aria-hidden="true"
                   aria-label="hidden field"
                   id="preferredLanguage"
                   name="preferredLanguage"
                   maxlength="255"
                   value="" />
          {% endif %}
          {% if has_honeypot_fields %}
            {{ honeypot_fields | safe }}
          {% else %}
            <div class="u-off-screen">
              <label class="website" for="website">Website:</label>
              <input name="website"
                     type="text"
                     class="website"
                     autocomplete="off"
                     value=""
                     id="website"
                     tabindex="-1" />
              <label class="name" for="name">Name:</label>
              <input name="name"
                     type="text"
                     class="name"
                     autocomplete="off"
                     value=""
                     id="name"
                     tabindex="-1" />
            </div>
          {% endif %}
        </form>
      </div>
    </div>
    {%- if is_section_level -%}
    </section>
  {%- endif -%}
{%- endmacro -%}