{% comment %}Zapis do newslettera - pas w kolorze wiodącym, więc na stronie
   głównej odcina się od sąsiednich pasów i czyta jak jedno zaproszenie.
   Teksty i pola (imię, zgoda) włącza panel: Newsletter > Ustawienia.{% endcomment %}
<section class="band band-brand">

  <div class="wrap grid gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] lg:items-start">

    <div>
      <span class="rule-alt" aria-hidden="true"></span>
      <h2 class="title-band">{{ newsletter.settings.title }}</h2>
      {% if newsletter.settings.intro %}
        <p class="mt-5 max-w-xl text-base leading-relaxed text-white/80">{{ newsletter.settings.intro }}</p>
      {% endif %}
    </div>

    <form method="post" action="{% url 'newsletter:subscribe' %}" novalidate class="space-y-5">
      {% csrf_token %}
      <input type="hidden" name="next" value="{{ request.path }}">

      <div class="grid gap-4 {% if newsletter.settings.ask_name %}sm:grid-cols-2{% endif %}">
        {% if newsletter.settings.ask_name %}
          <div>
            <label class="text-[0.7rem] font-semibold uppercase tracking-[0.22em] text-white/70" for="{{ newsletter.form.name.id_for_label }}">{{ newsletter.form.name.label }}</label>
            <div class="mt-2">{{ newsletter.form.name }}</div>
          </div>
        {% endif %}
        <div>
          <label class="text-[0.7rem] font-semibold uppercase tracking-[0.22em] text-white/70" for="{{ newsletter.form.email.id_for_label }}">{{ newsletter.form.email.label }}</label>
          <div class="mt-2">{{ newsletter.form.email }}</div>
        </div>
      </div>

      {% if newsletter.form.consent %}
        <div class="flex items-start gap-3">
          <div class="pt-0.5">{{ newsletter.form.consent }}</div>
          <label class="text-sm leading-relaxed text-white/80" for="{{ newsletter.form.consent.id_for_label }}">
            {{ newsletter.form.consent.label }}{% if newsletter.settings.consent_required %} <span class="text-white" title="pole wymagane">*</span>{% endif %}
          </label>
        </div>
      {% endif %}

      {{ newsletter.form.firma }}

      {% comment %}Przycisk jest czarny - na kolorze wiodącym to jedyny mocny
         kontrast, który nie znika po najechaniu.{% endcomment %}
      <button class="btn btn-lg bg-slate-900 text-white hover:bg-white hover:text-brand-700 hover:shadow-lg hover:shadow-slate-900/30 active:shadow-none" type="submit">
        {{ newsletter.settings.button_label }}
        <span aria-hidden="true">&rarr;</span>
      </button>
    </form>

  </div>
</section>