{% load i18n wagtailcore_tags %}

<style type="text/css">
    ul.errorlist li {
        color: red;
    }
</style>

<div class="newsletter_wrapper" id="newsletter_subscription">
    {% if page.newsletter_header %}
        <div class="newsletter_header">
            {{ page.newsletter_header|richtext }}
        </div>
    {% endif %}

    {% if form.is_valid and page.newsletter_thankyou %}
        {{ page.newsletter_thankyou|richtext|default:"Bedankt voor het inschrijven" }}
    {% endif %}
    <form action="{% url 'ocyan_plugin_newsletter:newsletter-subscribe' %}" method="post" {% if name %} name="{{ name }}" {% endif %}>
        {% csrf_token %}
        <div class="bg-light m-3 p-4">
            <div class="w-100">
            	<div class="mb-3">
                    {% if self.title %}
            		  <h3 class="text-primary">{{ self.title }}</h3>
                    {% else %}
                        <h3 class="text-primary">{% trans 'Newsletter' %}</h3>
                    {% endif %}
                    {% if self.description %}
            		  <div>{{ self.description }}</div>
                    {% else %}
                      <div>{% trans 'Receive great offers regularly by email!' %}</div>
                    {% endif %}
            	</div>
                {% for field in form %}
                    <div class="fieldWrapper mb-3">
                    	{% include "oscar/partials/form_field.html" with field=field %}
                    </div>
                {% endfor %}
            </div>
            <div>
                <input type="submit" class="btn btn-primary" value="{% trans 'Subscribe' %}">
                {% if form.is_valid and not page.newsletter_thankyou %}
                    <p class="text-success">{% trans 'Thank you for subscribing to our newsletter' %}</p>
                {% endif %}
            </div>
        </div>
    </form>
</div>