{% extends '/layouts/default.twig' %}

{% block site_body %}
    {% include '/partials/page-header.twig' with {
        title: 'Wish List'
    } %}

    <div class="block">
        <div class="container">
            <table class="wishlist">
                <thead class="wishlist__head">
                <tr class="wishlist__row">
                    <th class="wishlist__column wishlist__column--image">Image</th>
                    <th class="wishlist__column wishlist__column--product">Product</th>
                    <th class="wishlist__column wishlist__column--stock">Stock Status</th>
                    <th class="wishlist__column wishlist__column--price">Price</th>
                    <th class="wishlist__column wishlist__column--tocart"></th>
                    <th class="wishlist__column wishlist__column--remove"></th>
                </tr>
                </thead>
                <tbody class="wishlist__body">
                {% for product in cart.products %}
                    <tr class="wishlist__row">
                        <td class="wishlist__column wishlist__column--image">
                            <div class="product-image">
                                <a href="" class="product-image__body">
                                    <img class="product-image__img" src="{{ product.image }}.jpg" alt="">
                                </a>
                            </div>
                        </td>
                        <td class="wishlist__column wishlist__column--product">
                            <a href="" class="wishlist__product-name">{{ product.name }}</a>
                            <div class="wishlist__product-rating">
                                {% include '/partials/rating.twig' with {
                                    rating: product.rating
                                } %}
                                <div class="wishlist__product-rating-legend">
                                    {{ (product.rating * 2.2)|round }} Reviews
                                </div>
                            </div>
                        </td>
                        <td class="wishlist__column wishlist__column--stock">
                            <div class="badge badge-success">In Stock</div>
                        </td>
                        <td class="wishlist__column wishlist__column--price">{{ product.price }}</td>
                        <td class="wishlist__column wishlist__column--tocart">
                            <button type="button" class="btn btn-primary btn-sm">Add To Cart</button>
                        </td>
                        <td class="wishlist__column wishlist__column--remove">
                            <button type="button" class="btn btn-light btn-sm btn-svg-icon">
                                <svg width="12px" height="12px">
                                    <use xlink:href="images/sprite.svg#cross-12"></use>
                                </svg>
                            </button>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}