{% load placeholder %}

<div class="head">
    <div class="negative">
        <div class="addlink">
            <span class="buttoninsta back">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12pt" height="12.000001pt" viewBox="0 0 30 30.000001" version="1.2" style="padding-top: 7px;">
                    <defs>
                        <clipPath id="clip1">
                            <path d="M 6 0.738281 L 23.964844 0.738281 L 23.964844 28.316406 L 6 28.316406 Z M 6 0.738281 "></path>
                        </clipPath>
                    </defs>
                    <g id="surface1">
                        <g clip-path="url(#clip1)" clip-rule="nonzero">
                            <path style=" stroke:none;fill-rule:nonzero;fill:rgb(59.999084%,59.999084%,59.999084%);fill-opacity:1;" d="M 13.15625 14.640625 L 23.445312 4.222656 L 20.070312 0.800781 L 6.402344 14.640625 L 20.070312 28.480469 L 23.445312 25.058594 Z M 13.15625 14.640625 "></path>
                        </g>
                    </g>
                </svg>
            &nbsp;Back</span>
        </div>
    </div>

    <div class="middle">
        <span>Delivery & Billing</span>
    </div>

    <div class="positive">
        <button type="submit" class="buttoninsta submit">Continue</button>
    </div>
</div>

<div class="body">
    <div class="bodycontent">

        {% csrf_token %}

        {% if form_address.errors %}

        {% for field in form %}
        {% for error in field.errors %}
        <div class="alert alert-danger">
            <strong>{{ error|escape }}</strong>
        </div>
        {% endfor %}
        {% endfor %}
        {% for error in form.non_field_errors %}
        <div class="alert alert-danger">
            <strong>{{ error|escape }}</strong>
        </div>
        {% endfor %}
        {% endif %}


        <div class="inputsdeliveryaddress">
            <div class="row">
                <div class="col-12">
                    <h2 data-textstate1="Delivery and billing address" data-textstate2="Delivery address">Delivery and billing address</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <label for="{{ form_address.delivery_company.id_for_label }}">Company (optional)</label>
                    {{ form_address.delivery_company | placeholder:'Company (optional)' }}
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <label for="{{ form_address.delivery_name.id_for_label }}">Name</label>
                    {{ form_address.delivery_name | placeholder:'Name' }}
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <label for="{{ form_address.delivery_street.id_for_label }}">Street</label>
                    {{ form_address.delivery_street | placeholder:'Street' }}
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <label for="{{ form_address.delivery_zip.id_for_label }}">ZIP</label>
                    {{ form_address.delivery_zip | placeholder:'ZIP' }}
                </div>
                <div class="col-8">
                    <label for="{{ form_address.delivery_city.id_for_label }}">City</label>
                    {{ form_address.delivery_city | placeholder:'City' }}
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <label for="{{ form_address.delivery_country.id_for_label }}">Country</label>
                    {{ form_address.delivery_country }}
                </div>
            </div>
        </div>

        <div class="inputsbillingaddress">
            <div class="row">
                <div class="col-12">
                    <h2 data-textstate1="" data-textstate2="Billing address"></h2>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="checkboxlabel">
                        <input type="checkbox" id="differingbillingaddress" name="differingbillingaddress" />
                        <label for="differingbillingaddress">Differing billing address</label>
                    </div>
                </div>
            </div>

            <div class="toggle">
                <div class="row">
                    <div class="col-12">
                        <label for="{{ form_address.bill_company.id_for_label }}">Company (optional)</label>
                        {{ form_address.bill_company | placeholder:'Company (optional)' }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <label for="{{ form_address.bill_name.id_for_label }}">Name</label>
                        {{ form_address.bill_name | placeholder:'Name' }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <label for="{{ form_address.bill_street.id_for_label }}">Street</label>
                        {{ form_address.bill_street | placeholder:'Street' }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-4">
                        <label for="{{ form_address.bill_zip.id_for_label }}">ZIP</label>
                        {{ form_address.bill_zip | placeholder:'ZIP' }}
                    </div>
                    <div class="col-8">
                        <label for="{{ form_address.bill_city.id_for_label }}">City</label>
                        {{ form_address.bill_city | placeholder:'City' }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <label for="{{ form_address.bill_country.id_for_label }}">Country</label>
                        {{ form_address.bill_country }}
                    </div>
                </div>
            </div>
        </div>






        <div class="row actions">
            <div class="col-12">
                <button type="submit" class="buttoninsta submit">Continue</button>
            </div>
        </div>

        <script>
            //register toggle switch for differing billing address
            checkForDifferingbillingaddress();
            $addressSlide.on('change', '#differingbillingaddress', function() {
                checkForDifferingbillingaddress();
            });

            function checkForDifferingbillingaddress() {
                if ( $('#differingbillingaddress').is(':checked')) {
                    $('.inputsbillingaddress').addClass('active');
                    $('h2[data-textstate1]').each(function(index, value) {

                        $(this).text( $(this).attr('data-textstate2') );
                    });


                } else {
                    $('.inputsbillingaddress').removeClass('active');
                    $('h2[data-textstate1]').each(function(index, value) {

                        $(this).text( $(this).attr('data-textstate1') );
                    });

                }
            }
        </script>

    </div>
</div>