{% load static %}
{% load i18n %}

<form method="post" action="{% url 'club_join' %}">
  {% csrf_token %}
  {{ form.errors }}
  <input type="radio" name="switch" id="switch-once" value="single" class="toggle-input" {% if schedule and not schedule.monthly %}checked{% endif %}>
  <input type="radio" name="switch" id="switch-monthly" value="monthly" class="toggle-input" {% if not schedule or schedule.monthly %}checked{% endif %}>
  <div class="l-switch__wrapper">
    {% if user.is_staff %}
      <span data-edit="club/club/{{ club.pk }}"></span>
    {% endif %}

    <div class="l-switch white">
      <label class='toggle-for' for="switch-once">{% trans "Jednorazowo" %}</label>
      <label class='toggle-for' for="switch-monthly">{% trans "Miesięcznie" %}</label>
      <span class="toggle"></span>
    </div>
  </div>

  {% with amounts=club.get_amounts %}
    <div class="l-checkout__payments payments-once wide-spot-{{ amounts.single_wide_spot }}">
      {% for amount in amounts.single %}
        <div class="l-checkout__payments__box once{% if not schedule.monthly and schedule.amount == amount.amount or not schedule and club.default_single_amount == amount.amount %} is-active{% endif %}{% if amount.wide %} l-checkout__payments__box--special{% endif %} l-checkout__payments__box--{{ amount.box_variant }}">

          <h3>{{ amount.amount }} zł</h3>
          <div class="l-checkout__payments__box__btn-wrp">
            {% if amount.description %}
              <p>{{ amount.description|safe }}</p>
            {% endif %}
            <button name="single_amount" value="{{ amount.amount }}">{% trans "Wybierz" %}</button>
          </div>
        </div>
      {% endfor %}
      <input type="hidden"
             name="single_amount_selected"
             value="{% if schedule and not schedule.monthly %}{{ schedule.amount|floatformat }}{% else %}{{ club.default_single_amount }}{% endif %}">

    </div>


    <div class="l-checkout__payments payments-recurring wide-spot-{{ amounts.monthly_wide_spot }}">
    {% for amount in amounts.monthly %}
      <div class="l-checkout__payments__box{% if schedule.monthly and schedule.amount == amount.amount or not schedule and amount.amount == club.default_monthly_amount %} is-active{% endif %}{% if amount.wide %} l-checkout__payments__box--special{% endif %} l-checkout__payments__box--{{ amount.box_variant }}">
        <h3>{{ amount.amount }} zł <span>{% trans "/mies." context "kwota na miesiąc" %}</span></h3>
        <div class="l-checkout__payments__box__btn-wrp">
          {% if amount.description %}
            <p>{{ amount.description|safe }}</p>
          {% endif %}
          <button name="monthly_amount" value="{{ amount.amount }}">{% trans "Wybierz" %}</button>
        </div>
      </div>
    {% endfor %}
    <input type="hidden"
           name="monthly_amount_selected"
           value="{% if schedule and schedule.monthly %}{{ schedule.amount|floatformat }}{% else %}{{ club.default_monthly_amount }}{% endif %}">
  </div>

  <div class="l-checkout__amount">
    <div class="l-checkout__input">
      <label for="kwota">{% trans "Inna kwota" %}</label>
      {{ form.custom_amount }}
    </div>
    <button>{% trans "Dalej" %}</button>
  </div>
  {% endwith %}
</form>

<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>

<div class="l-checkout__cols bt-w">
  <div class="l-checkout__col full">
    <div class="l-checkout__form">
      <div class="l-checkout__form__row full">
        <h3>{% trans "Dane do przelewu tradycyjnego" %}:</h3>
        {% include "club/transfer_info.html" %}
      </div>
    </div>
  </div>
</div>