{% load notifications %}
{% if audience_allowed %}
  <div class="{% if block_css %}{{ block_css }}{% endif %}"{% if block_style %} style="{{ block_style }}"{% endif %}>
    {% if value.heading %}<h3 class="text-xl font-semibold">{% daisie_markup value.heading %}</h3>{% endif %}
    {% if value.description %}<p class="mt-1 text-base-content/80">{% daisie_markup value.description %}</p>{% endif %}

    <form
      method="post"
      action="{{ subscribe_url }}"
      class="join mt-3 w-full"
      hx-post="{{ subscribe_url }}"
      hx-target="#daisie-newsletter-status-{{ block.id }}"
      hx-swap="innerHTML"
    >
      {% csrf_token %}
      {% if audience_id %}<input type="hidden" name="audience" value="{{ audience_id }}" />{% endif %}
      <label for="daisie-newsletter-{{ block.id }}" class="sr-only">{{ value.placeholder }}</label>
      <input
        id="daisie-newsletter-{{ block.id }}"
        type="email"
        name="email"
        placeholder="{{ value.placeholder }}"
        autocomplete="email"
        required
        class="input join-item w-full"
      />
      <button type="submit" class="{% if newsletter_button_css %}{{ newsletter_button_css }}{% else %}btn btn-primary{% endif %} join-item">{% daisie_markup value.button_label allow_links=False %}</button>
    </form>

    <div id="daisie-newsletter-status-{{ block.id }}" role="status" aria-live="polite">
      {% if request.GET.subscribed and value.success_message %}
        <p class="mt-2 text-sm">{{ value.success_message }}</p>
      {% endif %}
    </div>
  </div>
{% endif %}