{% extends "layout.html" %}
{% load i18n static display_tags ocyanjson %}

{% block title %}
    {% trans 'Checkout' %} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <ul class="breadcrumb">
        <li>
            <a href="{{ homepage_url }}">{% trans 'Home' %}</a>
        </li>
        <li class="active">{% trans 'Checkout' %}</li>
    </ul>
{% endblock %}

{% block headertext %}
    {% trans 'Checkout' %}
{% endblock %}

{% block extrastyles %}
{{ block.super }}
<link href="{% static 'css/checkout/onestep.css' %}" type="text/css" rel="stylesheet" />
{% endblock %}

{% block extrascripts %}
{{ block.super }}
<script src="{% static 'js/checkout/onestep.js' %}" type="text/javascript" charset="utf-8"></script>
{% endblock %}

{% block content %}
{% ocyanjson "oscar_checkout" "show_voucher_block" True as show_voucher_block %}
  {% block voucher_modal %}
    {% if show_voucher_block and voucher_form %}
      <div class="modal fade" id="voucherModal" tabindex="-1" role="dialog" aria-labelledby="voucherModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="voucherModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
              <form id="voucher_form" action="{% url 'basket:vouchers-add' %}" method="post">
                  {% csrf_token %}
                  {% include "partials/form_fields.html" with form=voucher_form %}
                  <button type="submit" class="btn btn-primary" data-loading-text="{% trans 'Adding...' %}">{% trans "Add voucher" %}</button>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "Close" %}</button>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  {% endblock %}
<section>
    <div class="container">
      <form method="POST" action="." novalidate="novalidate" id="onstepcheckout">
        {% csrf_token %}
        {% block checkout_hidden_inputs %}{% endblock %}
        <div class="row">
            {% if basket.is_empty %}
            <h1>{% trans "Your shopping basket appears to be empty" %}</h1>
            <a class="btn btn-primary" href="{% url 'catalogue:index' %}">{% trans "Continue shopping" %}</a>
            {% else %}
            <div class="col-md-4 col-xs-12">
              {% block voucher %}
                {% if show_voucher_block and voucher_form %}
                  <div class="panel panel-default mb-3" id="voucher-form">
                      <div class="panel-heading">
                          <h4 class="panel-title">{% trans "Voucher/promo code" %}</h4>
                      </div>
                      <div class="panel-body">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#voucherModal">
                          {% trans "I have a voucher code..." %}
                        </button>
                      </div>
                  </div>
                {% endif %}
              {% endblock %}
              {% if request.user.is_anonymous %}
                {% trans "Registration" as title %}
                {% include "checkout/partials/gateway_block.html" with form=gateway_form title=title id="gateway" %}
              {% endif %}

              {% block vat_check %}{% endblock %}

              {% block shipping_address %}
                {% trans "Shipping address" as title %}
                {% include "checkout/partials/shipping_address_block.html" with form=shipping_address_form address_form=shipping_address_chooser_form show_address_chooser=show_shipping_address_chooser title=title id="shipping-address-form-block" %}
              {% endblock %}

              {% block billing_address %}
                {% trans "Billing address" as title %}
                {% include "checkout/partials/address_block.html" with form=billing_address_form address_form=billing_address_chooser_form show_address_chooser=show_billing_address_chooser title=title id="billing-address-form-block" %}
              {% endblock %}
            </div>
            <div class="col-md-4 col-xs-12">
              <fieldset id="shipping-method-form-block">
                {% block delivery_date_wrapper %}{% endblock %}

                {% block shipping_method_wrapper %}
                  {% trans "Shipping method" as title %}
                  {% include "checkout/partials/shipping_method_block.html" with form=shipping_method_form title=title id="shipping_method_form" %}
                {% endblock %}

                {% block payment_method_wrapper %}
                  {% trans "Payment method" as title %}
                  {% include "checkout/partials/payment_method_block.html" with form=payment_method_form title=title nolabel=True id="payment_method_form" %}
                {% endblock %}

              </fieldset>
              {% trans "Notes" as title %}
              {% include "checkout/partials/shipping_address_notes_block.html" with form=shipping_address_form title=title nolabel=True %}
            </div>
            <div class="col-md-4 col-xs-12">
              {% trans "Your order" as title %}
              {% include "checkout/partials/totals_block.html" with title=title nohide=True id="checkouttotal" %}
              <div class="checkbox">
                {% block vat_regulation_text %}
                  {{block.super}}
                {% endblock %}
                <input type="checkbox" name="accepttermsofservice" id="termsofservice">
                <label for="termsofservice" class="control-label required">{% include "checkout/partials/terms_of_service.html" %}</label>
              </div>
              {% block newsletter %}
                {% iffeature "newsletter" %}
                <div class="checkbox">
                  <input type="checkbox" name="subscribetonewsletter" id="newsletter"{% if request.POST.subscribetonewsletter %} checked {% endif %}>
                  <label for="newsletter" class="control-label">{% trans 'Subscribe to our newsletter.' %}</label>
                </div>
                {% endiffeature %}
              {% endblock %}
              <button class="btn btn-primary pull-right" type="submit">{% trans "Place order" %}</button>
              <div style="clear:both"></div>
            </div>
            {% endif %}
          </div>
      </form>
    </div>
</section>
{% endblock %}