{% sw_extends '@Storefront/storefront/page/checkout/_page.html.twig' %}
{# Container Div #}
{% block page_checkout_container %}
{% if premsOnePageCheckout.useOnePageCheckout %}
<div id="one-page-checkout"
class="one-page-checkout
{% if premsOnePageCheckout.useStepsOnlyVertical %} only-vertical{% endif %}
{% if premsOnePageCheckout.greyStep2And3 and not premsOnePageCheckout.loggedIn %} grey-step2and3{% endif %}
{% if premsOnePageCheckout.loggedIn %} logged-in{% endif %}
"
data-save-register-input-uri="{{ path('frontend.PremsOnePageCheckout.ajaxSaveRegisterInput') }}"
data-paypal-express-button-position="{{ config('PremsOnePageCheckout6.config.payPalExpressButtonPosition') }}"
data-prefill-register-fields="{{ config('PremsOnePageCheckout6.config.prefillRegisterFields') }}"
data-uri="{{ path('frontend.checkout.confirm.page') }}">
{% block base_flashbags %}{% endblock %}
{% sw_include '@Storefront/storefront/component/opc/order-edit-messages.html.twig' %}
{% block page_checkout_opc_step_indicator %}
<div class="steps-container d-none">
<div class="steps-content">
<ul class="steps-list">
<li class="steps-entry is-done">
<span class="steps-text">1</span>
<span class="line"></span>
</li>
<li class="steps-entry is-active">
<span class="steps-text">2</span>
<span class="line"></span>
</li>
<li class="steps-entry">
<span class="steps-text">3</span>
<span class="line"></span>
</li>
</ul>
</div>
</div>
{% endblock %}
{% if not premsOnePageCheckout.termsAboveSubmit %}
{% sw_include '@Storefront/storefront/component/opc/terms.html.twig' %}
{% endif %}
{% block page_checkout_opc_utility %}
<div class="opc-utility d-none">
<div class="icon-ok">
{% sw_icon 'checkmark-wide' style {
'color': 'success'
} %}
</div>
<div class="icon-cancel">
{% sw_icon 'x-wide' style {
'color': 'danger'
} %}
</div>
</div>
{% endblock %}
{{ parent() }}
{% sw_include '@Storefront/storefront/component/opc/plugins/praemien.html.twig' %}
</div>
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}
{# Implement col2 #}
{% block page_checkout_aside %}
{% if premsOnePageCheckout.useOnePageCheckout %}
{% block page_checkout_opc_step_2_container %}
{# Implement step2 headline #}
<div class="checkout-step-2">
<div class="{% if not premsOnePageCheckout.useBorders %}border{% endif %} step-container">
{% block page_checkout_opc_headline_step2 %}
<h2 class="checkout-step-headline"><span class="step-icon">2</span> {{ "prems-one-page-checkout.steps.step2-headline"|trans }}</h2>
{% block page_checkout_confirm_payment_shipping %}
<div class="confirm-payment-shipping">
<div class="row">
{% block page_checkout_confirm_payment %}
<div class="col-sm-6 confirm-payment">
{% sw_include '@Storefront/storefront/page/checkout/confirm/confirm-payment.html.twig' %}
</div>
{% endblock %}
{% block page_checkout_confirm_shipping %}
<div class="col-sm-6 confirm-shipping">
{% sw_include '@Storefront/storefront/page/checkout/confirm/confirm-shipping.html.twig' %}
</div>
{% endblock %}
</div>
</div>
{% endblock %}
{% sw_include '@Storefront/storefront/component/opc/plugins/klarna.html.twig' %}
{% endblock %}
</div>
</div>
{% endblock %}
{{ parent() }}
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}
{# Close step1 border container & headline #}
{% block page_checkout_main %}
{% if premsOnePageCheckout.useOnePageCheckout %}
{% block base_flashbags_checkout %}
<div class="col-12">
<div class="flashbags">
{% for type, messages in app.flashes %}
{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with { type: type, list: messages } %}
{% endfor %}
{% sw_include '@Storefront/storefront/component/opc/plugins/unzer-errors.html.twig' %}
</div>
</div>
{% endblock %}
{% block page_checkout_opc_step_1_container %}
<div class="checkout-main">
<div class="{% if not premsOnePageCheckout.useBorders %}border{% endif %} step-container">
{% block page_checkout_opc_headline_step1 %}
<h2 class="checkout-step-headline"><span class="step-icon">1</span> {{ "prems-one-page-checkout.steps.step1-headline"|trans }}</h2>
{% endblock %}
{% block page_checkout_main_content %}{% endblock %}
</div>
</div>
{% endblock %}
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}
{# Implement step3 headline #}
{% block page_checkout_aside_container %}
{% if premsOnePageCheckout.useOnePageCheckout %}
<div class="{% if not premsOnePageCheckout.useBorders %}border{% endif %} step-container">
{% block page_checkout_opc_step_3_container %}
{% block page_checkout_opc_headline_step3 %}
<h2 class="checkout-step-headline"><span class="step-icon">3</span> {{ "prems-one-page-checkout.steps.step3-headline"|trans }}</h2>
{% endblock %}
{% sw_include '@Storefront/storefront/component/opc/products-third-party-area.html.twig' %}
{% if premsOnePageCheckout.collapsedProducts %}
{% sw_include '@Storefront/storefront/component/opc/collapse-products.html.twig' %}
{% else %}
{% sw_include '@Storefront/storefront/component/opc/products.html.twig' %}
{% endif %}
{% endblock %}
{{ parent() }}
</div>
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}