{namespace neos=Neos\Neos\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}
<div class="cart">
    <div class="container">
        <f:if condition="{checkout}">
            <f:then>
                <h1>{f:translate(id: 'checkout', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</h1>
                <f:form id="updateOrder" action="updateOrder" controller="Cart" package="NeosRulez.Shop">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="billing_form">
                                <f:render section="billing_form" arguments="{_all}" />
                            </div>
                            <div class="shipping_form pt-4{f:if(condition='{order.alternative_shipping_address}', then:' d-block')}">
                                <f:render section="shipping_form" arguments="{_all}" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="d-block p-3 checkout_sidebar">
                                <div class="d-block mb-3">
                                    <f:render section="shipping" arguments="{_all}" />
                                </div>
                                <div class="d-block my-3">
                                    <f:render section="summary" arguments="{_all}" />
                                    <f:link.action action="showCart" controller="Cart" package="NeosRulez.Shop" arguments="{cart: true, return: '{node -> neos:uri.node()}', update: true}" class="btn btn-outline-primary btn-sm btn-block w-100 mt-3 mb-4 btn-edit-order"><i class="fas fa-pen"></i> {f:translate(id: 'edit_order', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</f:link.action>
                                </div>
                                <div class="d-block my-3">
                                    <f:render section="payment" arguments="{_all}" />
                                </div>
                                <f:render section="checkout" arguments="{_all}" />
                            </div>
                        </div>
                    </div>
                    <f:form.hidden name="return" value="{node -> neos:uri.node()}" />
                    <f:form.hidden id="selected_country" name="selected_country" value="{order.selected_country}" />
                    <f:form.hidden name="cart_variables[recipient_mail]" value="{cart_variables.0.recipient_mail}" />
                    <f:form.hidden name="cart_variables[order_subject]" value="{cart_variables.0.order_subject}" />
                    <f:form.hidden name="cart_variables[mail_logo]" value="{media:uri.image(image: cart_variables.0.mail_logo, maximumWidth: 200, maximumHeight: 200, allowCropping:FALSE, allowUpScaling:TRUE)}" />
                    <f:form.hidden name="cart_variables[invoice]" value="{cart_variables.0.invoice}" />
                    <f:form.hidden name="cart_variables[invoice_background]" value="{media:uri.image(image: cart_variables.0.invoice_background, width: 2000, height: 2829, allowCropping:FALSE, allowUpScaling:TRUE)}" />
                    <f:form.hidden name="cart_variables[invoice_number]" value="{cart_variables.0.invoice_number}" />
                    <f:form.hidden name="cart_variables[invoice_number_prefix]" value="{cart_variables.0.invoice_number_prefix}" />
                    <f:form.hidden name="cart_variables[invoice_info_prepayment]" value="{cart_variables.0.invoice_info_prepayment}" />
                    <f:form.hidden name="cart_variables[invoice_address]" value="{cart_variables.0.invoice_address}" />
                    <f:form.hidden name="cart_variables[footer_text]" value="{footer_text -> f:format.raw()}" />

                    <f:form.hidden name="cart_variables[fiscal_year_start]" value="{cart_variables.0.fiscal_year_start -> f:format.date(format: 'm-d')}" />
                    <f:form.hidden name="cart_variables[fiscal_year_end]" value="{cart_variables.0.fiscal_year_end -> f:format.date(format: 'm-d')}" />
                </f:form>
            </f:then>
            <f:else>
                <h1>{f:translate(id: 'cart', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</h1>
                <f:if condition="{cart -> f:count()}==0">
                    <f:then>
                        {f:translate(id: 'cart_empty', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
                    </f:then>
                    <f:else>
                        <div class="row">
                            <div class="col-md-8">
                                <f:render section="items" arguments="{_all}" />
                                <f:render section="cart_links" arguments="{_all}" />
                            </div>
                            <div class="col-md-4">
                                <f:render section="summary" arguments="{_all}" />
                            </div>
                        </div>
                    </f:else>
                </f:if>
            </f:else>
        </f:if>
    </div>
    <f:if condition="!{order.country}">
        <f:if condition="{userdata.country}">
            <script>
                if (document.getElementById('country')) {
                    var body = document.body;
                    body.classList.add('body-hide');
                    country.value = '<f:format.raw>{userdata.country}</f:format.raw>';
                    document.getElementById('shipping_country').value = '<f:format.raw>{userdata.country}</f:format.raw>';
                    document.getElementById('selected_country').value = '<f:format.raw>{userdata.country}</f:format.raw>';
                    document.getElementById('updateOrder').submit();
                }
            </script>
        </f:if>
    </f:if>
</div>

<f:section name="items">
    <div class="py-2 border-bottom-strong d-none d-md-block d-lg-block">
        <div class="row align-items-center items_header">
            <div class="col-md-5 font-weight-bold">
                {f:translate(id: 'product', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
            </div>
            <div class="col-md-2 font-weight-bold">
                {f:translate(id: 'price', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
            </div>
            <div class="col-md-2 font-weight-bold">
                {f:translate(id: 'quantity', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
            </div>
            <div class="col-md-2 text-end font-weight-bold">
                {f:translate(id: 'total', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
            </div>
            <div class="col-md-1 font-weight-bold">
                &nbsp;
            </div>
        </div>
    </div>
    <f:for each="{cart}" as="item">
        <f:render section="item" arguments="{_all}" />
    </f:for>
</f:section>

<f:section name="item">
    <div class="d-block border-bottom py-2">
        <div class="row align-items-center cart_item">
            <div class="col-md-5 col-12">
                <div class="row align-items-center no-gutters">
                    <div class="col-3 pr-3">
                        <f:if condition="{item.images}">
                            <media:image class="img-fluid" image="{item.images.0}" width="220" maximumHeight="200" allowCropping="TRUE" allowUpScaling="TRUE" alt="{item.title}" />
                        </f:if>
                    </div>
                    <div class="col-md-9 col-4">
                        {item.title}
                        <f:if condition="{item.combined_options}">
                            <small class="d-block">
                                <f:for each="{item.combined_options}" as="option" iteration="optionIterator">
                                    {option.name}<f:if condition="{option.price}"> (+ <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{option.price}</f:format.currency><f:if condition="{taxcart}"> {f:translate(id: 'incl', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} {item.tax} % {f:translate(id: 'tax_short', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')})</f:if></f:if>{f:if(condition: optionIterator.isLast, else: ', ')}
                                </f:for>
                            </small>
                        </f:if>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-4">
                <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{item.price}</f:format.currency>
                <f:if condition="{taxcart}">
                    <small class="d-block">{f:translate(id: 'excl', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} {item.tax} % {f:translate(id: 'tax_short', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</small>
                </f:if>
            </div>
            <div class="col-md-2 col-4">
                <f:form action="update" controller="Cart" arguments="{item: item, return: '{node -> neos:uri.node()}', update: true}" package="NeosRulez.Shop">
                    <select class="form-control form-select quantity" name="quantity">
                        <f:if condition="{item.max_quantity}">
                            <f:then>
                                <f:for each="{full_quantity}" as="quantity">
                                    <f:if condition="{quantity}!=0">
                                        <f:if condition="{quantity}>={item.min_quantity}">
                                            <f:if condition="{quantity}<={item.max_quantity}">
                                                <f:render section="quantity" arguments="{_all}" />
                                            </f:if>
                                        </f:if>
                                    </f:if>
                                </f:for>
                            </f:then>
                            <f:else>
                                <f:for each="{max_quantity}" as="quantity">
                                    <f:if condition="{quantity}!=0">
                                        <f:render section="quantity" arguments="{_all}" />
                                    </f:if>
                                </f:for>
                            </f:else>
                        </f:if>
                    </select>
                </f:form>
            </div>
            <div class="col-md-2 col-4 text-end">
                <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{item.total}</f:format.currency>
                <f:if condition="{taxcart}">
                    <small class="d-block">{f:translate(id: 'incl', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} {item.tax} % {f:translate(id: 'tax_short', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</small>
                </f:if>
            </div>
            <div class="col-md-1">
                <f:form action="deleteItem" controller="Cart" arguments="{item: item, return: '{node -> neos:uri.node()}', update: true}" package="NeosRulez.Shop">
                    <button type="submit" class="btn btn-danger btn-sm btn-block w-100 btn_delete_item"><i class="fas fa-trash"></i></button>
                </f:form>
            </div>
        </div>
    </div>
</f:section>

<f:section name="quantity">
    <f:if condition="{item.quantity} == {quantity}">
        <f:then>
            <option value="{quantity}" selected>{quantity}</option>
        </f:then>
        <f:else>
            <option value="{quantity}">{quantity}</option>
        </f:else>
    </f:if>
</f:section>

<f:section name="summary">
    <div class="d-block py-2 border-bottom-strong">
        <div class="row align-items-center">
            <div class="col-12 font-weight-bold">{f:translate(id: 'summary', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</div>
        </div>
    </div>
    <div class="d-block border-bottom py-2">
        <div class="row align-items-center no-gutters">
            <div class="col-7">
                {f:translate(id: 'subtotal', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
            </div>
            <div class="col-5 text-end font-weight-bold">
                <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{summary.total_tax}</f:format.currency>
            </div>
        </div>
    </div>
    <f:if condition="{taxcart}">
        <div class="d-block border-bottom py-2 tax_summary">
            <div class="row align-items-center no-gutters">
                <div class="col-7">
                    {f:translate(id: 'incl_tax', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
                </div>
                <div class="col-5 text-end font-weight-bold">
                    <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{summary.tax}</f:format.currency>
                </div>
            </div>
        </div>
    </f:if>
    <f:if condition="{summary.total_shipping}!=0">
        <div class="d-block border-bottom py-2">
            <div class="row align-items-center no-gutters">
                <div class="col-7">
                    {f:translate(id: 'shipping', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
                </div>
                <div class="col-5 text-end font-weight-bold">
                    <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{summary.total_shipping}</f:format.currency>
                </div>
            </div>
        </div>
    </f:if>
    <f:if condition="{taxcart}">
        <f:if condition="{summary.tax_shipping}!=0">
            <div class="d-block border-bottom py-2 tax_summary">
                <div class="row align-items-center no-gutters">
                    <div class="col-7">
                        {f:translate(id: 'incl_tax', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} ({f:translate(id: 'shipping', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')})
                    </div>
                    <div class="col-5 text-end font-weight-bold">
                        <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{summary.tax_shipping}</f:format.currency>
                    </div>
                </div>
            </div>
        </f:if>
    </f:if>
    <f:if condition="{summary.discount}!=0">
        <div class="d-block border-bottom py-2">
            <div class="row align-items-center no-gutters">
                <div class="col-7">
                    {f:translate(id: 'coupon', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
                </div>
                <div class="col-5 text-end font-weight-bold">
                    - <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{summary.discount}</f:format.currency>
                </div>
            </div>
        </div>
    </f:if>
    <div class="d-block border-bottom py-2">
        <div class="row align-items-center no-gutters">
            <div class="col-7">
                {f:translate(id: 'total', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
            </div>
            <div class="col-5 text-end font-weight-bold">
                <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{summary.total}</f:format.currency>
            </div>
        </div>
    </div>
    <f:if condition="{summary.free_from}!=9999999999999">
        <div class="alert alert-success my-2 text-center" role="alert">
            {f:translate(id: 'free_from', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{summary.free_from}</f:format.currency>
        </div>
    </f:if>
    <f:if condition="!{checkout}">
        <f:if condition="{relay}">
            <f:then>
                <f:if condition="{cart_min_quantity} && {summary.cartcount}<{cart_min_quantity}">
                    <f:then>
                        <div class="alert alert-danger mt-5" role="alert">
                            <f:if condition="{cart_min_quantity}!=1">
                                <f:then>
                                    {f:translate(id: 'min_quantity12', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} {cart_min_quantity} {f:translate(id: 'min_quantity22', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
                                </f:then>
                                <f:else>
                                    {f:translate(id: 'min_quantity11', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} {cart_min_quantity} {f:translate(id: 'min_quantity21', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
                                </f:else>
                            </f:if>
                        </div>
                    </f:then>
                    <f:else>
                        <f:if condition="{cart_min_weight} && {summary.weight}<{cart_min_weight}">
                            <f:then>
                                <div class="alert alert-danger mt-5" role="alert">
                                    {f:translate(id: 'min_weight11', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} {summary.weight} {f:translate(id: 'min_weight12', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} {cart_min_weight} {f:translate(id: 'min_weight13', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}.
                                </div>
                            </f:then>
                            <f:else>
                                <div class="mb-3 mt-3">
                                    <f:form action="checkout" controller="Cart" arguments="{return: '{node -> neos:uri.node()}'}" package="NeosRulez.Shop">
                                        <button type="submit" class="btn btn-primary btn-block w-100"><i class="fas fa-shopping-cart mr-2"></i> {f:translate(id: 'proceed_to_checkout', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</button>
                                    </f:form>
                                </div>
                                <f:if condition="{allow_coupons}">
                                    <f:render section="coupon" arguments="{_all}" />
                                </f:if>
                            </f:else>
                        </f:if>
                    </f:else>
                </f:if>
            </f:then>
            <f:else>
                <div class="alert alert-danger mt-5" role="alert">
                    <f:if condition="{relayinfos}">
                        <f:for each="{relayinfos}" as="relayinfo">
                            <f:if condition="{relayinfo.message}">
                                <p>{relayinfo.message.1}</p>
                            </f:if>
                        </f:for>
                    </f:if>
                </div>
            </f:else>
        </f:if>
    </f:if>
</f:section>

<f:section name="coupon">
    <f:if condition="{coupons}">
        <f:then>
            <f:if condition="{coupons.0.name}=='NaN'">
                <f:then>
                    <div class="alert alert-danger" role="alert">
                        {f:translate(id: 'coupon_invalid', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}!
                    </div>
                    <f:render section="coupon_form" arguments="{_all}" />
                </f:then>
                <f:else>
                    <f:if condition="{coupons.0.name}=='NaN_'">
                        <f:then>
                            <div class="alert alert-danger" role="alert">
                                {f:translate(id: 'cart_min1', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{coupons.0.value}</f:format.currency> {f:translate(id: 'cart_min2', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}.
                            </div>
                            <f:render section="coupon_form" arguments="{_all}" />
                        </f:then>
                        <f:else>
                            <f:form action="deleteCoupon" controller="Cart" arguments="{return: '{node -> neos:uri.node()}', update: true}" package="NeosRulez.Shop">
                                <div class="d-block mt-3 coupon">
                                    <div class="mb-3">
                                        <i class="fas fa-percentage mr-2"></i> {coupons.0.name} <f:if condition="{coupons.0.value} == '0'"><f:else>{f:translate(id: 'in_the_value_of', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</f:else></f:if>
                                        <f:if condition="{coupons.0.percentual}">
                                            <f:then>
                                                {coupons.0.value} %
                                            </f:then>
                                            <f:else>
                                                <f:if condition="{coupons.0.value} == '0'">
                                                    <f:else>
                                                        <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{coupons.0.value}</f:format.currency>
                                                    </f:else>
                                                </f:if>
                                            </f:else>
                                        </f:if>
                                    </div>
                                    <div class="mb-3">
                                        <button type="submit" class="btn btn-danger btn-block w-100"><i class="fas fa-times mr-2"></i> {f:translate(id: 'remove_coupon', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</button>
                                    </div>
                                </div>
                            </f:form>
                        </f:else>
                    </f:if>
                </f:else>
            </f:if>
        </f:then>
        <f:else>
            <f:render section="coupon_form" arguments="{_all}" />
        </f:else>
    </f:if>
</f:section>

<f:section name="coupon_form">
    <f:form action="validateCoupon" controller="Cart" arguments="{return: '{node -> neos:uri.node()}', update: true}" package="NeosRulez.Shop">
        <div class="d-block mt-3 coupon">
            <div class="mb-3">
                <div class="d-block py-2 mb-2 border-bottom-strong font-weight-bold">
                    <i class="fas fa-percentage mr-2"></i> {f:translate(id: 'coupon', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
                </div>
                <f:form.textfield name="code" class="form-control" placeholder="{f:translate(id: 'coupon_code', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" />
            </div>
            <div class="mb-3">
                <button type="submit" class="btn btn-light btn-block w-100"><i class="fas fa-check mr-2"></i> {f:translate(id: 'apply_coupon', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</button>
            </div>
        </div>
    </f:form>
</f:section>

<f:section name="cart_links">
    <div class="row align-items-center mt-4">
        <div class="col-md-6">
            <div class="mb-3">
                <f:if condition="{return_page}">
                    <neos:link.node class="btn btn-outline-primary btn-block w-100" node="{return_page}">{f:translate(id: 'continue_shopping', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</neos:link.node>
                </f:if>
            </div>
        </div>
        <div class="col-md-6">
            <f:form action="deleteCart" controller="Cart" arguments="{return: '{node -> neos:uri.node()}', update: true}" package="NeosRulez.Shop">
                <div class="mb-3">
                    <button type="submit" class="btn btn-danger btn-block w-100"><i class="fas fa-trash mr-2"></i> {f:translate(id: 'empty_cart', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</button>
                </div>
            </f:form>
        </div>
    </div>
</f:section>

<f:section name="billing_form">
    <div class="d-block py-2 mb-3 border-bottom-strong font-weight-bold">
        {f:translate(id: 'billing_details', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="mb-3">
                <label for="firstname">{f:translate(id: 'firstname', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield id="firstname" name="firstname" class="form-control" placeholder="{f:translate(id: 'firstname', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" required="true" value="{f:if(condition='{order.firstname}', then:'{order.firstname}', else:'{userdata.firstname}')}" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="mb-3">
                <label for="lastname">{f:translate(id: 'lastname', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield id="lastname" name="lastname" class="form-control" placeholder="{f:translate(id: 'lastname', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" required="true" value="{f:if(condition='{order.lastname}', then:'{order.lastname}', else:'{userdata.lastname}')}" />
            </div>
        </div>
    </div>
    <div class="mb-3">
        <label for="company">{f:translate(id: 'company', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} ({f:translate(id: 'optional', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')})</label>
        <f:form.textfield id="company" name="company" class="form-control" placeholder="{f:translate(id: 'company', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" value="{f:if(condition='{order.company}', then:'{order.company}', else:'{userdata.company}')}" />
    </div>
    <div class="mb-3">
        <label for="country">{f:translate(id: 'country', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
        <select id="country" name="country" class="form-control form-select" required>
            <f:if condition="!{order.country} || {order.country}==''">
                <option disabled selected>{f:translate(id: 'please_select', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</option>
            </f:if>
            <f:for each="{countries}" as="country">
                <option value="{country.value}"{f:if(condition='{order.country}=={country.value}', then:' selected')}>{country.label}</option>
            </f:for>
        </select>
    </div>
    <div class="row">
        <div class="col-md-5">
            <div class="mb-3">
                <label for="address">{f:translate(id: 'address', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield id="address" name="address" class="form-control" placeholder="{f:translate(id: 'address', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" required="true" value="{f:if(condition='{order.address}', then:'{order.address}', else:'{userdata.address}')}" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="mb-3">
                <label for="zip">{f:translate(id: 'zip', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield id="zip" name="zip" class="form-control" placeholder="{f:translate(id: 'zip', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" required="true" value="{f:if(condition='{order.zip}', then:'{order.zip}', else:'{userdata.zip}')}" />
            </div>
        </div>
        <div class="col-md-4">
            <div class="mb-3">
                <label for="city">{f:translate(id: 'city', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield id="city" name="city" class="form-control" placeholder="{f:translate(id: 'city', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" required="true" value="{f:if(condition='{order.city}', then:'{order.city}', else:'{userdata.city}')}" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="mb-3">
                <label for="phone">{f:translate(id: 'phone', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield id="phone" name="phone" class="form-control" placeholder="{f:translate(id: 'phone', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" value="{f:if(condition='{order.phone}', then:'{order.phone}', else:'{userdata.phone}')}" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="mb-3">
                <label for="email">{f:translate(id: 'email', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield type="email" id="email" name="email" class="form-control" placeholder="{f:translate(id: 'email', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" required="true" value="{f:if(condition='{order.email}', then:'{order.email}', else:'{userdata.email}')}" />
            </div>
        </div>
    </div>
    <div class="mb-3">
        <label for="notes">{f:translate(id: 'order_notes', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} ({f:translate(id: 'optional', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')})</label>
        <f:form.textarea id="notes" name="notes" class="form-control" placeholder="{f:translate(id: 'order_notes', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" value="{order.notes}" />
    </div>
    <div class="custom-control custom-checkbox form-check">
        <input type="checkbox" class="custom-control-input form-check-input" style="float:left!important;" id="shipping_address_checkbox" name="alternative_shipping_address" value="1" {f:if(condition='{order.alternative_shipping_address}', then:' checked="checked"')}>
        <label class="custom-control-label form-check-label" for="shipping_address_checkbox">{f:translate(id: 'differing_shipping_address', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
    </div>
</f:section>

<f:section name="shipping_form">
    <div class="d-block py-2 mb-3 border-bottom-strong font-weight-bold">
        {f:translate(id: 'shipping_details', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="mb-3">
                <label for="shipping_firstname">{f:translate(id: 'firstname', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield id="shipping_firstname" name="shipping_firstname" class="form-control" placeholder="{f:translate(id: 'firstname', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" required="true" value="{order.shipping_firstname}" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="mb-3">
                <label for="shipping_lastname">{f:translate(id: 'lastname', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield id="shipping_lastname" name="shipping_lastname" class="form-control" placeholder="{f:translate(id: 'lastname', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" required="true" value="{order.shipping_lastname}" />
            </div>
        </div>
    </div>
    <div class="mb-3">
        <label for="shipping_company">{f:translate(id: 'company', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} ({f:translate(id: 'optional', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')})</label>
        <f:form.textfield id="shipping_company" name="shipping_company" class="form-control" placeholder="{f:translate(id: 'company', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" value="{order.shipping_company}" />
    </div>
    <div class="mb-3">
        <label for="shipping_country">{f:translate(id: 'country', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
        <select id="shipping_country" name="shipping_country" class="form-control form-select" required>
            <f:if condition="!{order.shipping_country} || {order.shipping_country}==''">
                <option disabled selected>{f:translate(id: 'please_select', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</option>
            </f:if>
            <f:for each="{countries}" as="country">
                <option value="{country.value}"{f:if(condition='{order.shipping_country}=={country.value}', then:' selected')}>{country.label}</option>
            </f:for>
        </select>
    </div>
    <div class="row">
        <div class="col-md-5">
            <div class="mb-3">
                <label for="shipping_address">{f:translate(id: 'address', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield id="shipping_address" name="shipping_address" class="form-control" placeholder="{f:translate(id: 'address', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" required="true" value="{order.shipping_address}" />
            </div>
        </div>
        <div class="col-md-3">
            <div class="mb-3">
                <label for="shipping_zip">{f:translate(id: 'zip', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield id="shipping_zip" name="shipping_zip" class="form-control" placeholder="{f:translate(id: 'zip', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" required="true" value="{order.shipping_zip}" />
            </div>
        </div>
        <div class="col-md-4">
            <div class="mb-3">
                <label for="shipping_city">{f:translate(id: 'city', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</label>
                <f:form.textfield id="shipping_city" name="shipping_city" class="form-control" placeholder="{f:translate(id: 'city', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}" required="true" value="{order.shipping_city}" />
            </div>
        </div>
    </div>
    <div class="mb-3">
        <label for="shipping_notes">{f:translate(id: 'shipping_notes', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} ({f:translate(id: 'optional', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')})</label>
        <f:form.textarea id="shipping_notes" name="shipping_notes" class="form-control" placeholder="Anmerkungen zur Lieferung" value="{order.shipping_notes}" />
    </div>
</f:section>

<f:section name="payment">
    <div class="d-block py-2 border-bottom-strong font-weight-bold mb-3">
        {f:translate(id: 'payment_method', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
    </div>
    <div class="d-block">
        <f:for each="{payments}" as="payment" iteration="iterator">
            <div class="custom-control custom-radio form-check py-2 payment_{payment.identifier}">
                <input type="radio" id="payment_{iterator.index}" name="payment" class="custom-control-input form-check-input" style="float:left!important" value="{payment.identifier}" required="required"{f:if(condition='{order.payment}=={payment.identifier}', then:' checked="checked"')}>
                <label class="custom-control-label form-check-label" for="payment_{iterator.index}">{payment.label} <i class="{payment.icon} ml-2"></i></label>
            </div>
            <f:if condition="{payment.success_page}">
                <f:then>
                    <f:form.hidden name="{payment.identifier}_success" value="{neos:uri.node(node: payment.success_page, absolute: true)}" />
                </f:then>
                <f:else>
                    <f:if condition="{successNode}">
                        <f:then>
                            <f:form.hidden name="{payment.identifier}_success" value="{neos:uri.node(node: successNode.0, absolute: true)}" />
                        </f:then>
                        <f:else>
                            <code class="d-block my-2">There is no order <strong>success page</strong> in your node tree.</code>
                        </f:else>
                    </f:if>
                </f:else>
            </f:if>
            <f:if condition="{payment.failure_page}">
                <f:then>
                    <f:form.hidden name="{payment.identifier}_failure" value="{neos:uri.node(node: payment.failure_page, absolute: true)}" />
                </f:then>
                <f:else>
                    <f:if condition="{failureNode}">
                        <f:then>
                            <f:form.hidden name="{payment.identifier}_failure" value="{neos:uri.node(node: failureNode.0, absolute: true)}" />
                        </f:then>
                        <f:else>
                            <code class="d-block my-2">There is no order <strong>failure page</strong> in your node tree.</code>
                        </f:else>
                    </f:if>
                </f:else>
            </f:if>
        </f:for>
    </div>
</f:section>

<f:section name="shipping">
    <div class="d-block pb-2 border-bottom-strong font-weight-bold mb-3">
        {f:translate(id: 'shipping_method', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}
    </div>
    <select id="shipping" name="shipping" class="form-control form-select" {f:if(condition='!{shippings.0.selected_country}', then:' disabled')} required>
        <f:if condition="!{order.shipping} || {order.shipping}==''">
            <option disabled selected>{f:translate(id: 'please_select', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</option>
        </f:if>
        <f:for each="{shippings.0.available_shippings}" as="available_shipping">
            <f:if condition="{available_shipping.full_shipping_price}">
                <f:then>
                    <option value="{available_shipping.shipping.identifier}"{f:if(condition='{order.shipping}=={available_shipping.shipping.identifier}', then:' selected')}>{available_shipping.shipping.properties.title}<f:comment>: <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{available_shipping.full_shipping_price}</f:format.currency></f:comment></option>
                </f:then>
                <f:else>
                    <option value="{available_shipping.shipping.identifier}"{f:if(condition='{order.shipping}=={available_shipping.shipping.identifier}', then:' selected')}>{available_shipping.shipping.properties.title}<f:comment>: <f:format.currency decimalSeparator="," thousandsSeparator="." decimals="2" currencySign="€">{available_shipping.float_price}</f:format.currency></f:comment></option>
                </f:else>
            </f:if>
        </f:for>
    </select>
    <f:if condition="!{shippings.0.selected_country}">
        <small class="d-block text-danger mt-2">{f:translate(id: 'select_country', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</small>
    </f:if>
</f:section>

<f:section name="checkout">
    <f:if condition="{newsletter}">
        <div class="custom-control custom-checkbox form-check my-3">
            <input type="checkbox" class="custom-control-input form-check-input" style="float:left!important;" id="newsletter" name="newsletter">
            <label class="custom-control-label form-check-label" for="newsletter">{f:translate(id: 'newsletter', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}.</label>
        </div>
    </f:if>
    <div class="custom-control custom-checkbox form-check my-3">
        <input type="checkbox" class="custom-control-input form-check-input" style="float:left!important;" id="accept_privacy" name="accept_privacy" required="true" {f:if(condition='!{order.shipping}', then:' disabled="disabled"')}>
        <label class="custom-control-label form-check-label" for="accept_privacy">{f:translate(id: 'accept_privacy1', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} <neos:link.node node="{privacy_page}">{f:translate(id: 'accept_privacy2', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</neos:link.node>.</label>
    </div>
    <div class="custom-control custom-checkbox form-check my-3">
        <input type="checkbox" class="custom-control-input form-check-input" style="float:left!important;" id="accept_terms" name="accept_terms" required="true" {f:if(condition='!{order.shipping}', then:' disabled="disabled"')}>
        <label class="custom-control-label form-check-label" for="accept_terms">{f:translate(id: 'accept_terms1', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')} <neos:link.node node="{terms_page}">{f:translate(id: 'accept_terms2', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}.</neos:link.node></label>
    </div>
    <button type="submit" id="submit_btn" class="btn btn-primary btn-lg btn-block w-100 mt-3">{f:translate(id: 'complete_order', package: 'NeosRulez.Shop', source: 'NodeTypes/Component/Cart')}</button>
</f:section>