{% load static %}

{% if page.newsletter_subscribe_url or page.root_page.newsletter_subscribe_url %}
  <div
    class="newsletter-section"
    style="background-image:url('{% static 'styleguide2/images/background-images/bg-newsletter.webp' %}')"
  >
    <div class="container--medium pt-32 pb-24">
      <h2 class="head-14xl">
        {% if self.title_line_1 %}
          {{ self.title_line_1 }}
        {% else %}
          Odebírej náš
        {% endif %}

        <br>

        {% if self.title_line_2 %}
          {{ self.title_line_2 }}
        {% else %}
          newsletter
        {% endif %}
      </h2>
      <p class="xl:mt-[-1rem]">
        {% if self.description %}
          {{ self.description }}
        {% elif page.newsletter_description %}
          {{ page.newsletter_description }}
        {% else %}
          Fake news tam nenajdeš, ale dozvíš se, co chystáme doopravdy!
        {% endif %}
      </p>

      <form
        class="flex flex-col gap-2 mt-12 items-start"
        method="post"
        action="
          {% if page.newsletter_subscribe_url %}
            {{ page.newsletter_subscribe_url }}
          {% else %}
            {{ page.root_page.newsletter_subscribe_url }}
          {% endif %}
        "
      >
        {% csrf_token %}

        <input type="hidden" name="return_page_id" value="{{ page.id }}">

        {% include 'styleguide2/includes/atoms/form_fields/form_input.html' with name="email" placeholder='Tvůj email' classes='mb-3 w-full md:w-96' value='' %}

        <div class="form__checkbox flex items-center mb-3">
          <input type="checkbox" id="confirmed" name="confirmed" required>
          <label for="confirmed">
            Souhlasím se <a href="{{ page.root_page.gdpr_and_cookies_url }}" target="_blank">zpracováním osobních údajů</a>
          </label>
        </div>

        {% include 'styleguide2/includes/atoms/buttons/round_button_form.html' with text='Odebírat' show_arrow_on_hover=True %}
      </form>
    </div>
  </div>
{% endif %}