{% extends request.session.from_app|yesno:"base/app.html,base/base.html" %}
{% load i18n %}
{% load chunks %}
{% load thumbnail %}
{% load club %}

{% block titleextra %}{% trans "Join us in freeing the books!" %}{% endblock %}
{% block metadescription %}{% trans "„Wolne Lektury należy wspierać, bo są” - Filip Springer" %}{% endblock %}


{% block body %}

  <style>

   .plan-select {
       margin-bottom: 15px;
   }
.methods {
 color: #888;
line-height: 30px;
}
.methods .method {
  border: 1px solid #888;
  border-radius: 5px;
display: inline-block;
padding: 0 5px;
}
.methods img {
height: 30px;
margin-right: 5px;
vertical-align: middle;
}
   .payment-method.disabled {
       opacity: .5;
       filter: grayscale(100%);
   }

   .button {
       box-sizing: border-box;
       display: inline-block;
       text-align: center;
   }
   .kwota, .inna .button, .plan-toggle, .inna input {
       border: 1px solid black;
       border-radius: 8px;
       background: none;
       cursor: pointer;
       padding: 0;
       margin-right: 3%;
       margin-bottom: 10px;
       line-height: 3em;
       font-size: 20px;
   }
   .plan-toggle {
       width: 46.5%;
   }
   .kwota {
       width: 30%;
   }
   .kwota:after {
       content: " zł";
   }
   .kwota.yearly {
       background: orange;

   }
   .inna .button {
       width: 63%;
   }
   .inna input {
       width: 60%;
       padding-left: 1.5%;
       padding-right: 1.5%;
       height: 3em !important;
       text-align: center;
   }
   .chunk-alt {
       position: relative;
       overflow: hidden;
   }
   .chunk-alt .chunk {
       top: 0;
   }

   .kwota.active, .plan-toggle.active {
       background: #9ACD32;
   }
   .inna input {display: none;}
   .inna.active input {display: inline;}
   .inna.active .button {display: none;}

   .ambassador {
       padding: 2em;
       margin-bottom: 1em;
       border: 1px solid #ddd;
       position: relative;
   }
   .ambassador.with-photo {
       padding-right: 145px;
   }
   .ambassador img {
       border-radius: 100%;
       height: 100px;
       width: 100px;
       position: absolute;
       top: 35px;
       right: 30px;
   }
   .ambassador div {
       text-align: right;
       line-height: 1.5em;
   }

   .club-form-info {
       line-height: 1.5em;
   }

   @media screen and (max-width: 1023px) {
       .club-form-info {
           margin-top: 2em;
       }
   }


   @media screen and (min-width: 1024px) {
       .club-form-info {
           border-left: 1px solid #ddd;
           padding-left: 2em;
           margin-left: 2em;
       }
       .twocol {
           display: flex;
       }
       .twocol > form, .twocol > div {
           flex: 1;
       }
   }

  </style>


  <div class="white-box normal-text">

    <h1>{% trans "Support Wolne Lektury" %}</h1>
    <h2 style="margin-bottom:2em;">
      {% if membership %}
        {# Displays to members. #}
        {% trans "Thank you for your support! Support us again!" %}
      {% else %}
        {# Displays to non-supporters. #}
        {% trans "Thank you for wanting to free the books with us!" %}
      {% endif %}</h2>

      {% with schedule=request.user|active_schedule %}
        {% if schedule %}
          <p><a href="{{ schedule.get_absolute_url }}">{% trans "See your past support." %}</a></p>
        {% endif %}
      {% endwith %}

      <div class='twocol'>

      <form method="POST" action="" id="payment-form" class="wlform">
        {% csrf_token %}

        {% chunk 'club_form_top' %}

        <ul class="errorlist">
          {% for e in  form.non_field_errors %}
            <li>{{ e }}</li>
          {% endfor %}
          {% for e in  form.plan.errors %}
            <li>{{ e }}</li>
          {% endfor %}
          {% for e in  form.amount.errors %}
            <li>{{ e }}</li>
          {% endfor %}
        </ul>

        <h3>1. {% trans "Choose your type of support" %}</h3>

        {{ form.amount }}
        {{ form.monthly }}
        <div class="plan-select">
          <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">{% trans "one-time" %}</span>
          <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">{% trans "monthly" %}</span>
        </div>

        <h3>2. {% trans "Choose the amount" %}</h3>

        <div class="plan" id="plan-single" style="display:none;" data-monthly="False" data-min-for-year="{{ club.min_for_year }}" data-amount="{{ club.default_single_amount }}">
          {% for amount in club.proposed_single_amounts %}
            <span class="button kwota{% if amount == club.default_single_amount %} active{% endif %}{% if amount >= club.min_for_year %} yearly{% endif %}">{{ amount }}</span>
          {% endfor %}

          <span class="inna">
            <span class="button">{% trans "different amount" %}</span>
            <input type="number" min="{{ club.min_amount }}">
          </span>
          <div class="methods">{% include 'club/payment/payu.html' %}</div>
        </div>


        <div class="plan" id="plan-monthly" data-monthly="True" data-amount="{{ club.default_monthly_amount }}">
          {% for amount in club.proposed_monthly_amounts %}
            <span class="button kwota{% if amount == club.default_monthly_amount %} active{% endif %}">{{ amount }}</span>
          {% endfor %}

          <span class="inna">
            <span class="button">{% trans "different amount" %}</span>
            <input type="number" min="{{ club.min_amount }}">
          </span>
          <div class="methods">{% include 'club/payment/payu-re.html' %}</div>
        </div>

        <h3>3. {% trans "Provide an e-mail address" %}</h3>

        <p>{{ form.email }}</p>

        <p>
          {{ form.agree_newsletter }}
          <label for="id_agree_newsletter">
            {% trans "I'd like to receive informations about new publications." %}
          </label>
        </p>

        <p>{% trans 'You can unsubscribe at any point. More in the <a target="_blank" href="https://nowoczesnapolska.org.pl/prywatnosc/">privacy policy</a>.' %}</p>

        <div><button class="submit" type='submit'>{% trans "Donate" %}</button></div>

        {% chunk 'club_form_bottom' %}

      </form>

      <div class="club-form-info">
        {% if ambassador %}
	<div class="ambassador {% if ambassador.photo %}with-photo{% endif %}">
            <div>
              <em>
                {{ ambassador.text }}
              </em>
              <div style="font-size: 1.2em">{{ ambassador.name }}</div>
            </div>
            {% if ambassador.photo %}
              <img src="{% thumbnail ambassador.photo "100x100" as thumb %}{{ thumb.url }}{% empty %}{{ ambassador.photo.url }}{% endthumbnail %}">
            {% endif %}
          </div>
        {% endif %}
        <div class="chunk-alt">
          <div class="chunk chunk-monthly">
            {% chunk 'club-form-info-monthly' %}
          </div>
          <div class="chunk chunk-single" style="display: none;">
            {% chunk 'club-form-info-single' %}
          </div>
          <div class="chunk chunk-single-year" style="display: none;">
            {% chunk 'club-form-info-single-year' %}
          </div>
  </div>
</div>
</div>

</div>

{% endblock %}