<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"></sb-header>

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

    <div class="product_view relative scrollable_content">
        <div>
            <div class="padding">
                <div class="product_title">
                    <h4 class="a-center">{{ product.name | uppercase}}</h4>
                </div>

                <form novalidate name="productForm" ng-submit="addProduct()">
                    <div class="product_details">
                        <div ng-if="product.picture" class="area picture">
                            <img ng-src="{{ product.picture }}" class="left" />
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="area">
                        <sb-loader is-loading="is_loading" size="'48'" block="'background'"></sb-loader>
                        <p class="product_price left">
                            <span ng-if="product.minPrice !== product.price" class="price_from">
                                <?php echo $this->_('From'); ?>:
                                <br />
                            </span>
                            <span class="price">
                                {{ product.formattedPriceInclTax }}
                            </span>
                        </p>
                        <p class="right add_to_cart">
                            <button type="submit" class="button">
                                <?php echo $this->_('Add to cart'); ?></button>
                        </p>
                        <div class="clear"></div>
                    </div>
                    <div class="area description-area">
                        <div class="middle">
                            <div class="description relative">
                                <p class="truncated" ng-click="truncateDescription = !truncateDescription" ng-show="truncateDescription" data-rows="2" ng-bind-html="product.shortDescription">
                                </p>
                                <p ng-click="truncateDescription = !truncateDescription" ng-show="!truncateDescription" ng-bind-html="product.description | trusted_html">
                                </p>
                            </div>
                        </div>
                    </div>
                    <div ng-if="product.optionsGroups.length" class="product-options">
                        <div>
                            <div class="row">
                                <div class="col select-option-val"></div>
                                <div class="col select-option-qty">
                                    <?php echo $this->_('Qty'); ?></div>
                            </div>
                            <div class="row" ng-repeat="optionsGroup in product.optionsGroups">

                                <div class="col select-option-val">
                                    <select name="optionValue" ng-model="optionsGroup.selectedOptionId" ng-required="optionsGroup.required" ng-class="{'required': optionsGroup.required}" class="scroller">
                                        <option class="label" value="" selected>{{ optionsGroup.title }}</option>
                                        <option ng-repeat="option in optionsGroup.options" value="{{ option.optionId }}">{{ option.name }} {{ option.formattedPriceInclTax }}</option>
                                    </select>
                                    <label ng-show="productForm.optionValue.$error.required && productForm.submitted" class="error">
                                        <?php echo $this->_('This field is required.'); ?></label>
                                </div>
                                <div class="col select-option-qty">
                                    <select name="optionQuantity" ng-model="optionsGroup.selectedQuantity" ng-required="{{ option.required }}" ng-class="{'required': option.required}" class="scroller qty">
                                        <option ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]" value="{{ i }}">{{ i }}</option>
                                    </select>
                                    <div ng-show="!productForm.optionValue.$error && productForm.optionQuantity.$error.required && productForm.submitted" class="error">
                                        <?php echo $this->_('This field is required.'); ?></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>



