<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-5 col-md-4">
            <div class="booking-cart" style="margin-top: 32px;">

                <div class="dismiss">
                    <i class="material-icons">close</i>
                </div>

                <div class="card-body">
                    <div class="provider-logo-tablet-holder">
                        <div class="provider-logo provider-logo-tablet"></div>
                    </div>
                    <div class="card-row">
                        <div class="card-column">
                            <h4>service:</h4>
                            <div class="service-type">Moving & Cleaning <i class="material-icons">edit</i></div>
                        </div>
                        <div class="card-column">
                            <div class="provider-logo"></div>
                        </div>
                    </div>
                    <div class="divider-line"></div>
                    <div class="card-row card-row-column">
                        <div class="card-sub-row">
                            <div class="card-cell strong">Moving boxes</div>
                            <div class="card-cell strong">CHF 105.–</div>
                        </div>
                    </div>
                    <div class="divider-line"></div>
                    <div class="card-row card-row-column">
                        <div class="card-sub-row">
                            <div class="card-cell strong capitalize">Moving</div>
                            <div class="card-cell strong scratched">CHF 1100.–</div>
                        </div>
                        <div class="card-sub-row no-padding-top">
                            <div class="card-cell danger strong">Summerdiscount</div>
                            <div class="card-cell danger strong">CHF 1000.–</div>
                        </div>
                        <div class="card-sub-row">
                            <div class="card-cell">Additional service</div>
                            <div class="card-cell">CHF 56.–</div>
                        </div>
                        <div class="card-sub-row">
                            <div class="card-cell">Additional service</div>
                            <div class="card-cell">CHF 56.–</div>
                        </div>
                    </div>
                    <div class="divider-line"></div>
                    <div class="card-row card-row-column">
                        <div class="card-sub-row">
                            <div class="card-cell strong capitalize">Cleaning</div>
                            <div class="card-cell strong scratched">CHF 990.–</div>
                        </div>
                        <div class="card-sub-row no-padding-top">
                            <div class="card-cell danger strong">Summerdiscount</div>
                            <div class="card-cell danger strong">CHF 900.–</div>
                        </div>
                        <div class="card-sub-row">
                            <div class="card-cell">Additional service</div>
                            <div class="card-cell">CHF 56.–</div>
                        </div>
                        <div class="card-sub-row">
                            <div class="card-cell">Additional service</div>
                            <div class="card-cell">CHF 56.–</div>
                        </div>
                    </div>

                    <div class="divider-line"></div>
                    <div class="card-row">
                        <div class="card-sub-row">
                            <div class="card-cell danger strong">Voucher -30%</div>
                            <div class="card-cell danger strong">- CHF 549.–</div>
                        </div>
                    </div>

                    <div class="total-price-row card-row">
                        <div class="total-price-description">
                            <h3>Total</h3>
                            <div class="total-price-vat small">incl. VAT</div>
                        </div>
                        <h1 class="total-price-value">CHF 1830.–</h1>
                    </div>
                    <div class="card-row floating-price">
                        <div>
                            <div class="card-cell strong">All-Risk moving insurance</div>
                            <div class="insurance-price-desc">separate invoice</div>
                        </div>
                        <div class="card-cell strong">CHF 69.–</div>
                    </div>
                    <div class="divider-line"></div>
                    <div class="card-row card-row-block no-padding-bottom">
                        <div class="form-check">
                            <label class="checkbox checked" for="checkbox"> I agree to the <a href='#'>Terms and Conditions</a> of Sholler Umzüge AG. <input type="checkbox" id="checkbox-default" name="checkbox-default" class="checkbox-default"></label>

                        </div>

                    </div>
                    <div class="card-row card-row-block">
                        <movu-button primary text="Confirm payment" cta custom_class='button-full-width'></movu-button>
                    </div>
                    <div class="trust-box">
                        <div class="small">Protected by</div>
                        <div class="comodo-icon">
                            <div class="comodo-holder">
                                <div id="comodoDiv">
                                    <a href="javascript:if(window.open('https://secure.comodo.com/ttb_searcher/trustlogo?v_querytype=W&amp;v_shortname=CL1&amp;v_search=https://account.movu.ch/de/account/inquiries/165172&amp;x=6&amp;y=5','tl_wnd_credentials'+(new Date()).getTime(),'toolbar=0,scrollbars=1,location=1,status=1,menubar=1,resizable=1,width=374,height=660,left=60,top=120')){};tLlB(tLTB);" onmouseover="tLeB(event,'https://secure.comodo.com/ttb_searcher/trustlogo?v_querytype=C&amp;v_shortname=CL1&amp;v_search=https://account.movu.ch/de/account/inquiries/165172&amp;x=6&amp;y=5','tl_popupCL1')" onmousemove="tLXB(event)" onmouseout="tLTC('tl_popupCL1')" ondragstart="return false;">
                                        <img src="https://ssl.comodo.com/images/trustlogo/comodo_secure_seal_113x59_transp.png" border="0" onmousedown="return tLKB(event,'https://secure.comodo.com/ttb_searcher/trustlogo?v_querytype=W&amp;v_shortname=CL1&amp;v_search=https://account.movu.ch/de/account/inquiries/165172&amp;x=6&amp;y=5');" oncontextmenu="return tLLB(event);">
                                    </a>
                                </div>
                            </div>

                        </div>
                        <div class="ekomi-icon">
                            <div class="ekomi-holder">
                                <div id="eKomiSeal_default">
                                    <a id="eKomiSeal_1F93A8BD5301EB0_eKomiSeal_default" href="https://www.ekomi.de/bewertungen-movu.html" title="eKomi - The Feedback Company: ">
                                        <img border="0" src="https://connect.ekomi.de/seal/1F93A8BD5301EB0-70x70.png" alt="eKomi - The Feedback Company: " title="eKomi - The Feedback Company: ">
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-5 col-md-4">
      <div class="booking-cart" style="margin-top: 32px;">
        {% if dismissable %}
        <div class="dismiss">
          <i class="material-icons">close</i>
        </div>
        {% endif %}
        {% if page == 'offer-details' %}
          <div class="card-body card-body-hidden-xs">
            <div class="total-price-row card-row">
              <div class="total-price-description">
                <h3>Total</h3>
                <div class="total-price-vat small">incl. VAT</div>
              </div>
              <h1 class="total-price-value">CHF 1830.–</h1>
            </div>
            <div class="card-row card-row-block">
              <movu-button primary text="Continue" cta custom_class='button-full-width'></movu-button>
            </div>
          </div>
          <div class="card-body card-body-visible-xs">
            <div class="total-price-row-inline">
              <div class="total-price-info">
                <div class="total-price-value">CHF 1830.–</div>
                <div class="total-price-description">Total <span class="total-price-vat small">incl. VAT</span></div>
              </div>
              <div class="button-holder">
                <movu-button primary text="Continue" cta></movu-button>
              </div>
            </div>
          </div>
        {% endif %}
        {% if page == 'additional-products' %}
          <div class="card-body">
            <div class="provider-logo-tablet-holder">
              <div class="provider-logo provider-logo-tablet"></div>
            </div>
            <div class="card-row">
              <div class="card-column">
                <h4>service:</h4>
                <div class="service-type">Moving & Cleaning <i class="material-icons">edit</i></div>
              </div>
              <div class="card-column">
                <div class="provider-logo"></div>
              </div>
            </div>
            <div class="divider-line"></div>
            {% if editableItems %}
            <div class="card-row floating-price">
              <div>
                <div class="card-cell strong with-close"><i class="material-icons close-icon">close</i>Moving boxes</div>
                <movu-counter-spinner small steps="5" custom_class="light movu-spacing-36-left movu-spacing-8-top"></movu-counter-spinner>
              </div>
              <div>
                <div class="card-cell strong">CHF 105.–</div>
              </div>
            </div>
            <div class="divider-line"></div>
            {% endif %}
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong">Amount</div>
                <div class="card-cell strong scratched">CHF 2040.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell danger strong">Summerdiscount</div>
                <div class="card-cell danger strong">- CHF 210.–</div>
              </div>
            </div>
            <div class="total-price-row card-row">
              <div class="total-price-description">
                <h3>Total</h3>
                <div class="total-price-vat small">incl. VAT</div>
              </div>
              <h1 class="total-price-value">CHF 1830.–</h1>
            </div>
            {% if editableItems %}
            <div class="card-row floating-price no-padding-bottom">
              <div>
                <div class="card-cell strong with-close"><i class="material-icons close-icon">close</i>All-Risk moving insurance</div>
                <div class="insurance-price-desc with-close">separate invoice</div>
              </div>
              <div class="card-cell strong">CHF 69.–</div>
            </div>
            {% endif %}
            <div class="card-row card-row-block">
              <movu-button primary text="Payment method" cta custom_class='button-full-width'></movu-button>
            </div>
            {% if moreInfo %}
              <div class="free-cancelation-box">
                <div class="small valid-until">Free cancelation until June 23, 2020</div>
                <div class="small">You can cancel your booked service free of charge up to 20 days before the service date.</div>
                <movu-button flat text="More information" cta></movu-button>
              </div>
            {% endif %}
          </div>
        {% endif %}
        {% if page == 'payment-method' %}
          <div class="card-body">
            <div class="provider-logo-tablet-holder">
              <div class="provider-logo provider-logo-tablet"></div>
            </div>
            <div class="card-row">
              <div class="card-column">
                <h4>service:</h4>
                <div class="service-type">Moving & Cleaning <i class="material-icons">edit</i></div>
              </div>
              <div class="card-column">
                <div class="provider-logo"></div>
              </div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong">Moving boxes</div>
                <div class="card-cell strong">CHF 105.–</div>
              </div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong">Amount</div>
                <div class="card-cell strong scratched">CHF 2040.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell danger strong">Summerdiscount</div>
                <div class="card-cell danger strong">- CHF 210.–</div>
              </div>
              {% if voucher %}
                <div class="card-sub-row">
                  <div class="card-cell danger strong">Voucher -30%</div>
                  <div class="card-cell danger strong">- CHF 549.–</div>
                </div>
              {% endif %}
            </div>
            <div class="total-price-row card-row">
              <div class="total-price-description">
                <h3>Total</h3>
                <div class="total-price-vat small">incl. VAT</div>
              </div>
              <h1 class="total-price-value">CHF 1830.–</h1>
            </div>
            <div class="instalment-box">
              <div class="instalment-text">Payment by instalment</div>
              <div class="instalment-price">3x CHF 523.-</div>
            </div>
            <div class="card-row floating-price no-padding-bottom">
              <div>
                <div class="card-cell strong">All-Risk moving insurance</div>
                <div class="insurance-price-desc">separate invoice</div>
              </div>
              <div class="card-cell strong">CHF 69.–</div>
            </div>
            <div class="visible-xs">
              <div class="divider-line movu-spacing-16-top"></div>
               <div class="voucher-holder">
                  {% if voucher %}
                    {% render '@booking-voucher', { voucherCodeApplied: true, discountPercentage: '-30%', voucherTitle: 'Voucher added' } %}
                  {% else %}
                    {% render '@booking-voucher', { voucherTitle: 'Add voucher' } %}
                 {% endif %}
               </div>
            </div>
            <div class="card-row card-row-block">
              <movu-button primary text="Order summary" cta custom_class='button-full-width'></movu-button>
            </div>
            <div class="small text-center movu-padding-16-bottom movu-padding-16-left movu-padding-16-right">
              You can review and confirm your order in the next step
            </div>
          </div>
        {% endif %}
        {% if page == 'order-summary' %}
          <div class="card-body">
            <div class="provider-logo-tablet-holder">
              <div class="provider-logo provider-logo-tablet"></div>
            </div>
            <div class="card-row">
              <div class="card-column">
                <h4>service:</h4>
                <div class="service-type">Moving & Cleaning <i class="material-icons">edit</i></div>
              </div>
              <div class="card-column">
                <div class="provider-logo"></div>
              </div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong">Moving boxes</div>
                <div class="card-cell strong">CHF 105.–</div>
              </div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong capitalize">Moving</div>
                <div class="card-cell strong scratched">CHF 1100.–</div>
              </div>
              <div class="card-sub-row no-padding-top">
                <div class="card-cell danger strong">Summerdiscount</div>
                <div class="card-cell danger strong">CHF 1000.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell">Additional service</div>
                <div class="card-cell">CHF 56.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell">Additional service</div>
                <div class="card-cell">CHF 56.–</div>
              </div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong capitalize">Cleaning</div>
                <div class="card-cell strong scratched">CHF 990.–</div>
              </div>
              <div class="card-sub-row no-padding-top">
                <div class="card-cell danger strong">Summerdiscount</div>
                <div class="card-cell danger strong">CHF 900.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell">Additional service</div>
                <div class="card-cell">CHF 56.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell">Additional service</div>
                <div class="card-cell">CHF 56.–</div>
              </div>
            </div>
            {% if voucher %}
              <div class="divider-line"></div>
              <div class="card-row">
                <div class="card-sub-row">
                  <div class="card-cell danger strong">Voucher -30%</div>
                  <div class="card-cell danger strong">- CHF 549.–</div>
                </div>
              </div>
            {% endif %}
            <div class="total-price-row card-row">
              <div class="total-price-description">
                <h3>Total</h3>
                <div class="total-price-vat small">incl. VAT</div>
              </div>
              <h1 class="total-price-value">CHF 1830.–</h1>
            </div>
            <div class="card-row floating-price">
              <div>
                <div class="card-cell strong">All-Risk moving insurance</div>
                <div class="insurance-price-desc">separate invoice</div>
              </div>
              <div class="card-cell strong">CHF 69.–</div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-block no-padding-bottom">
              {% render '@checkbox--checked', { checkboxText: "I agree to the <a href='#'>Terms and Conditions</a> of Sholler Umzüge AG."}, true %}
            </div>
            <div class="card-row card-row-block">
              <movu-button primary text="Confirm payment" cta custom_class='button-full-width'></movu-button>
            </div>
            <div class="trust-box">
              <div class="small">Protected by</div>
              <div class="comodo-icon">
                {% render '@comodo-icon' %}
              </div>
              <div class="ekomi-icon">
                {% render '@ekomi-icon' %}
              </div>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{
  "dismissable": true,
  "page": "order-summary",
  "voucher": true
}

No notes defined.