{% extends 'club/donation_step_base.html' %}
{% load i18n %}
{% load static %}


{% block donation-jumbo-image %}{% static '2022/images/checkout-img-2.jpg' %}{% endblock %}


{% block donation-step-content %}

  <div class="l-checkout__cols q-is-monthly {% if schedule.monthly %}is-monthly{% endif %}">
    <div class="l-checkout__col">
      <div class="l-checkout__payments__box is-active">
        <h3>
          {{ schedule.amount|floatformat }} zł
          <span class="if-monthly">{% trans "miesięcznie" %}</span>
          <span class="if-not-monthly">{% trans "jednorazowo" %}</span>
        </h3>
        <img src="{% static '2022/images/checkout-img-3.jpg' %}" alt="">
	{% if schedule.get_description %}
        <p>{{ schedule.get_description }}</p>
	{% endif %}
      </div>
    </div>
    <div class="l-checkout__col">

      {% include "club/donation_infobox.html" %}
      
      <form method='post'>
        {% csrf_token %}
        {{ form.errors }}
        <div class="l-checkout__form">
          <div class="l-checkout__form__row full">
            <div class="l-checkout__input" lang="pl">
              <label for="id_email"><span>*</span> {% trans "E-mail" %}</label>
              {{ form.email }}
              {{ form.email.errors }}
            </div>
          </div>
          <div class="l-checkout__form__row">
            <div class="l-checkout__input">
              <label for="id_first_name">{% trans "Imię / pseudonim (opcjonalnie)" %}</label>
              {{ form.first_name }}
              {{ form.first_name.errors }}
            </div>
            <div class="l-checkout__input">
              <label for="id_last_name">{% trans "Nazwisko (opcjonalnie)" %}</label>
              {{ form.last_name }}
              {{ form.last_name.errors }}
            </div>
          </div>
          
          <div class="l-checkout__form__row full">
            {% for consent, key, field in form.consent %}
            {% if not consent.required %}
            {{ field.errors }}
            {% endif %}
              <div class="c-checkbox">
                {% if consent.required %}
                <label><p class="scroll">{{ consent.text|safe }}</p></label>
                {% else %}
                {{ field }}
                <label for="id_{{ key }}">
                  <p>{% if field.field.required %}<span>*</span> {% endif %}{{ field.label|safe }}</p>
                </label>
                {% endif %}
              </div>
            {% endfor %}
            <div class="c-checkbox">
              {{ form.agree_newsletter }}
              <label for="id_agree_newsletter">
                <p>{% trans "Chcę dostawać newsletter o działalności Wolnych Lektur" %}</p>
              </label>
            </div>
          </div>
          <div class="l-checkout__form__row confirm">
            <a href="{% url 'donation_step1' schedule.key %}">{% trans "Powrót" %}</a>
            <div class="l-checkout__input">
              <button>{% trans "Dalej" %}</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="l-checkout__secure">
    <img src="{% static '2022/images/payments-padlock.png' %}" class="l-checkout__secure__padlock">
    {% trans "Bezpieczne płatności zapewniają" %}:
    <img src="{% static '2022/images/payments-payu.png' %}" class="l-checkout__secure__img" alt="PayU Visa MasterCard">
    {% if club.paypal_enabled %}
      <img src="{% static '2022/images/payments-paypal.png' %}" class="l-checkout__secure__img" alt="PayPal">
    {% endif %}
  </div>
{% endblock %}
