<!--<div class="product-card">
    <div class="product-head">
        <div class="product-photo">
            <img src={{vm.product.photo}}></img>
        </div>
    
        <div class="product-description">
            <h3 class="product-name">{{vm.product.title}}</h3> <br/>
            <span class="product-price">{{vm.product.price}}</span> <br/>
            <ex-size-product index={{vm.index}}></ex-size-product>
            <ex-color-product index={{vm.index}}></ex-color-product>
        </div> 
    </div>
    
    <div class="actions">
        <button class="button-cart">Купить</button>
        <button class="button-wishlist">Добавить в список желаний</button>
    </div>
</div>-->

<!--Card-->
<div class="card card-cascade narrower product wow fadeInUp" ng-href="/product/7586">
    <!--Card image-->
    <div class="view overlay hm-white-slight hm-zoom">
        <div class="photo-product">
            <img src="{{vm.product.photo}}" class="img-fluid photo wow zoomInUp" alt="">
            <a ng-href="/product/{{vm.product.productId}}">
                <div class="mask"></div>
            </a>
        </div>
    </div>
    <!--/.Card image-->

    <!--Card content-->
    <div class="card-block text-xs-center">
        <!--Category & Title-->
        <h5>{{vm.product.category}}</h5>
        <h4 class="card-title"><strong><a href="">{{vm.product.name}}</a></strong></h4>
        <!--Description-->
        <p class="card-text"></p>
        <!--Card footer-->
        <div class="card-footer">
            <span class="left">{{vm.product.price}} руб.</span>
        </div>
        <span class="right">
            <a data-toggle="tooltip" data-placement="top" title="Добавить в корзину"><i class="fa fa-shopping-cart" ng-click="vm.productToBasket();"></i></a>
        </span>
        <div class="quantity">
            <div>
                <h1 class="quantity-white">{{vm.product.quantity}}</h1>
            </div>
        </div>
    </div>
    <!--/.Card content-->
</div>
<!--/.Card-->

