<div class="has_header" sb-background-image value-id="value_id" ng-class="{background_image: style_background_image}" ng-style="style_background_image">

    <sb-header title-back="'<?php echo $this->_("Back") ?>'" title="page_title" message="message" right-button="header_right_button" ng-if="cart"></sb-header>

    <sb-connection has-connection="has_connection"></sb-connection>

    <sb-loader is-loading="is_loading" size="'48'" block="'background'"></sb-loader>

    <div class="scrollable_content mcommerce confirmation" ng-if="cart">
       
        <div class="relative">
            <div class="relative">
                <div class="padding cart_lines">
                    <div>
                        <div class="title">
                            <h2><?php echo $this->_('My products'); ?></h2>
                            <hr class="background reverse" />
                        </div>
                        <div ng-if="cart.lines.length !== 0" id="cart_lines" class="cart_lines">
                            <div class="slide-left" ng-repeat="line in cart.lines" ng-class="{first: $first}">
                                <div class="picture">
                                    <img ng-if="line.product.picture" class="product-picture" ng-src="{{ line.product.picture }}" />
                                    <img ng-if="!line.product.picture" class="product-picture" ng-src="{{ pictos.shopping_cart }}" />
                                </div>
                                <div class="details">
                                    <p class="product-name" ng-click="line.showOptions=!line.showOptions">{{ line.name }}</p>
                                    <div ng-show="!line.showOptions && line.options.length" class="product-prices slide-left">
                                        <p class="product-details">
                                            <?php echo $this->_('Price'); ?>: {{ line.formattedPriceInclTax }}
                                        </p>
                                        <p class="product-details">
                                            <?php echo $this->_('Qty'); ?>: {{ line.qty }}
                                        </p>
                                        <p class="product-details">
                                            <?php echo $this->_('Total'); ?>: {{ line.formattedTotalInclTax }}
                                        </p>
                                    </div>
                                    <div ng-show="line.showOptions" ng-if="line.options.length" class="scale-fade product-options">
                                        <p class="product_details">{{ line.qty }} x {{ line.name }} : {{ line.formattedBasePriceInclTax }}</p>
                                        <p ng-repeat="option in line.options" class="product-option-details">
                                            {{ option.qty }} x {{ option.name }} : {{ option.formattedPriceInclTax }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="clear"></div>

                            <div>
                                <div class="title">
                                    <h2 class="title"><?php echo $this->_('Total'); ?></h2>
                                    <hr class="background reverse" />
                                </div>

                                <table class="no-collapse right a-right" width="75%" cellspacing="10">
                                    <tr class="cart_totals">
                                        <th class="align-left">
                                            <?php echo $this->_('Subtotal'); ?></th>
                                        <td class="align-right">{{ cart.formattedSubtotalExclTax }}</td>
                                    </tr>

                                    <tr class="cart_totals" ng-if="cart.deliveryCost > 0">
                                        <th class="align-left">
                                            <?php echo $this->_('Delivery fees'); ?></th>
                                        <td class="align-right">{{ cart.formattedDeliveryCost }}</td>
                                    </tr>
                                    <tr class="cart_totals" ng-if="cart.deliveryCost > 0">
                                        <th class="align-left">
                                            <?php echo $this->_('Total Excl. Tax'); ?></th>
                                        <td class="align-right">{{ cart.formattedTotalExclTax }}</td>
                                    </tr>
                                    <tr class="cart_totals">
                                        <th class="align-left">
                                            <?php echo $this->_('Tax'); ?></th>
                                        <td class="align-right">{{ cart.formattedTotalTax }}</td>
                                    </tr>
                                    <tr class="cart_totals">
                                        <th class="align-left">
                                            <?php echo $this->_('Total'); ?></th>
                                        <td class="align-right">{{ cart.formattedTotal }}</td>
                                    </tr>
                                </table>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="scrollable_content mcommerce confirmation" ng-if="confirmation_message">
        <p>
            {{ confirmation_message }}
        </p>
    </div>

</div>



