{% extends 'layout.html.twig' %}

{% set seo_title = 'Shipping Information' %}

{% block content %}
    <div class="container">
        <div class="order-progress">
            <div class="order-progress-item"><a href="{{ path('order_index') }}" class="order-progress-link">Order</a></div>
            <div class="order-progress-item current">Shipping</div>
            <div class="order-progress-item">Review</div>
            <div class="order-progress-item">Confirmation</div>
        </div>
        <h1>Shipping Information</h1>

        <div class="order-shipping-address">
            <h2 class="order-shipping-address-title">Shipping address</h2>
            <strong>{{ order.company }}</strong><br>
            Att: {{ order.firstName }} {{ order.lastName }}<br>
            {{ order.address }}<br>
            {{ order.suburb }}
            {{ order.state }}
            {{ order.postcode }}
            {{ order.country|country_name }}<br>
            Phone: {{ order.phoneNumber }}
        </div>

        {{ form_start(form, {'attr': {'data-component': 'order-shipping'}}) }}
            {{ form_row(form.differentAddress, {
                'row_attr': {
                    'class': 'order-shipping-address-control',
                },
                'attr': {
                    'v-model': 'differentAddress',
                    'data-order-shipping': 'control',
                }
            }) }}

            <template v-if="differentAddress">
                <div class="order-shipping-address-fields">
                    {{ form_row(form.company, {'value': null}) }}
                    {{ form_row(form.firstName, {'value': null}) }}
                    {{ form_row(form.lastName, {'value': null}) }}
                    {{ form_row(form.address, {'value': null}) }}
                    {{ form_row(form.suburb, {'value': null}) }}
                    {{ form_row(form.postcode, {'value': null}) }}
                    {{ form_row(form.state, {'value': null}) }}
                    {{ form_row(form.country, {'value': null}) }}
                    {{ form_row(form.phoneNumber, {'value': null}) }}
                </div>
            </template>

            {{ form_row(form.purchaseOrderNumber) }}
            {{ form_row(form.specialRequests) }}

            <div class="order-shipping-buttons">
                <a href="{{ path('order_index') }}" class="btn btn-secondary btn-prev">Go Back</a>
                <button type="submit" class="btn btn-primary btn-more">Continue</button>
            </div>
        {{ form_end(form) }}
    </div>
{% endblock %}

{% block scripts %}
    <script src="{{ asset('assets/scripts/app-vendor.js') }}"></script>
{% endblock %}