<!-- product details -->
<div>
    <div class="message">
        {{ data.message }}
    </div>

    <h3>{{ data.product.name }}</h3>
    <div class="productimage">
        <img src="/images/{{ data.product.sku }}.png"/>
    </div>
    <div class="rating">
        Rating
        <span ng-if="data.rating.avg_rating != 0">
            {{ data.rating.avg_rating.toFixed(1) }} from {{ data.rating.rating_count }} votes
        </span>
        <span ng-if="data.rating.avg_rating == 0">
            No votes yet. Vote now.
        </span>
        <div>
            <span ng-repeat="vote in [ 1, 2, 3, 4, 5 ]">
                <img id="vote-{{ vote }}" class="vote-star" alt="{{ vote }}" ng-mouseover="glowstan(vote, 1.0);" ng-mouseleave="glowstan(vote, 0.5); "src="/media/instana_icon_square.png" ng-click="rateProduct(vote);"/>
            </span>
        </div>
    </div>
    <div class="description">
        {{ data.product.description }}
    </div>
    <div class="productcart">
        Price &euro;{{ data.product.price.toFixed(2) }}
        <span ng-if="data.product.instock == 0">
            Out of stock
        </span>
        <span ng-if="data.product.instock != 0">
            Quantity <input type="number" size="2" min="1" max="10" ng-model="data.quantity"/>
            <button ng-click="addToCart();">Add to cart</button>
        </span>
    </div>
</div>

