{#
// inputs:
// - product: object      - product data object (required)
// - layout:  string|null - one of [grid-sm, grid-nl, grid-lg, list, horizontal] (default: null)
#}

{% set _classes = layout == null ? '' : {
    'grid-sm':    'product-card--layout--grid product-card--size--sm',
    'grid-nl':    'product-card--layout--grid product-card--size--nl',
    'grid-lg':    'product-card--layout--grid product-card--size--lg',
    'list':       'product-card--layout--list',
    'horizontal': 'product-card--layout--horizontal',
}[layout] %}

<div class="product-card product-card--hidden-actions {{ _classes }}">
    <button class="product-card__quickview" type="button">
        <svg width="16px" height="16px"><use xlink:href="images/sprite.svg#quickview-16"></use></svg>
        <span class="fake-svg-icon"></span>
    </button>

    {% if product.badges %}
        <div class="product-card__badges-list">
            {% if 'sale' in product.badges %}
                <div class="product-card__badge product-card__badge--sale">Sale</div>
            {% endif %}
            {% if 'hot' in product.badges %}
                <div class="product-card__badge product-card__badge--hot">Hot</div>
            {% endif %}
            {% if 'new' in product.badges %}
                <div class="product-card__badge product-card__badge--new">New</div>
            {% endif %}
        </div>
    {% endif %}

    <div class="product-card__image product-image">
        <a href="product.html" class="product-image__body">
            <img class="product-image__img" src="{{ product.images|first }}.jpg" alt="">
        </a>
    </div>
    <div class="product-card__info">
        <div class="product-card__name">
            <a href="product.html">{{ product.name }}</a>
        </div>
        <div class="product-card__rating">
            <div class="product-card__rating-stars">
                {% include '/partials/rating.twig' with {
                    rating: product.rating
                } %}
            </div>
            <div class="product-card__rating-legend">{{ (product.rating * 2.2)|round }} Reviews</div>
        </div>
        {#<div class="product-card__description">#}
            {#Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum libero eget metus suscipit placerat. Duis#}
            {#consequat tellus laoreet tellus pharetra, eu tempor mi ornare. Nulla at nibh urna. Morbi vulputate enim id sapien.#}
        {#</div>#}
        <ul class="product-card__features-list">
            <li>Speed: 750 RPM</li>
            <li>Power Source: Cordless-Electric</li>
            <li>Battery Cell Type: Lithium</li>
            <li>Voltage: 20 Volts</li>
            <li>Battery Capacity: 2 Ah</li>
        </ul>
    </div>
    <div class="product-card__actions">
        <div class="product-card__availability">
            Availability: <span class="text-success">In Stock</span>
        </div>
        <div class="product-card__prices">
            {% if product.compare_at_price %}
                <span class="product-card__new-price">{{ product.price }}</span>
                <span class="product-card__old-price">{{ product.compare_at_price }}</span>
            {% else %}
                {{ product.price }}
            {% endif %}
        </div>
        <div class="product-card__buttons">
            <button class="btn btn-primary product-card__addtocart" type="button">Add To Cart</button>
            <button class="btn btn-secondary product-card__addtocart product-card__addtocart--list" type="button">Add To Cart</button>
            <button class="btn btn-light btn-svg-icon btn-svg-icon--fake-svg product-card__wishlist" type="button">
                <svg width="16px" height="16px"><use xlink:href="images/sprite.svg#wishlist-16"></use></svg>
                <span class="fake-svg-icon fake-svg-icon--wishlist-16"></span>
            </button>
            <button class="btn btn-light btn-svg-icon btn-svg-icon--fake-svg product-card__compare" type="button">
                <svg width="16px" height="16px"><use xlink:href="images/sprite.svg#compare-16"></use></svg>
                <span class="fake-svg-icon fake-svg-icon--compare-16"></span>
            </button>
        </div>
    </div>
</div>
