<table class="cart" data-cart-quantity="{{cart.quantity}}">
    <thead class="cart-header">
        <tr>
            <th class="cart-header-item" colspan="2">{{lang 'cart.checkout.item'}}</th>
            <th class="cart-header-item">{{lang 'cart.checkout.price'}}</th>
            <th class="cart-header-item cart-header-quantity">{{lang 'cart.checkout.quantity'}}</th>
            <th class="cart-header-item">{{lang 'cart.checkout.total'}}</th>
        </tr>
    </thead>
    <tbody class="cart-list">
        {{#each cart.items}}
            <tr class="cart-item" data-item-row>
                <td class="cart-item-block cart-item-figure">
                    {{#if type '==' 'GiftCertificate'}}
                        <img
                            class="cart-item-fixed-image"
                            src="{{cdn ../theme_settings.default_image_gift_certificate}}"
                            alt="{{lang 'cart.gift_certificates.gift_certificate'}}"
                            title="{{lang 'cart.gift_certificates.gift_certificate'}}"
                        >
                    {{else}}
                        {{> components/common/responsive-img
                            image=image
                            class="cart-item-image"
                            fallback_size=../theme_settings.productthumb_size
                            lazyload="lazyload"
                            default_image=../theme_settings.default_image_product
                        }}
                    {{/if}}
                </td>
                <td class="cart-item-block cart-item-title">
                    {{#if brand.name}}
                        <p class="cart-item-brand">{{brand.name}}</p>
                    {{/if}}
                    <h2 class="cart-item-name">
                        <a class="cart-item-name__label" href="{{url}}">{{name}}</a>
                    </h2>
                    {{#if release_date}}
                        <p>({{release_date}})</p>
                    {{/if}}

                    {{#if options}}
                        <dl class="definitionList">
                            {{#each options}}
                                <dt class="definitionList-key">{{name}}:</dt>
                                <dd class="definitionList-value">
                                    {{#if is_file}}
                                        <a href="/viewfile.php?attributeId={{id}}&cartitem={{../id}}">{{value}}</a>
                                    {{else}}
                                        {{> components/common/product-options}}
                                    {{/if}}
                                </dd>
                            {{/each}}
                        </dl>

                        {{#if can_modify}}
                            <a href="#"
                            data-item-edit="{{id}}"
                            data-product-id="{{product_id}}"
                            aria-label="{{lang 'products.change_product_options' name=name}}"
                            >
                                {{lang 'common.change'}}
                            </a>
                        {{/if}}
                    {{/if}}

                    {{#if type '==' 'GiftCertificate'}}
                        <a href="{{edit_url}}"
                           aria-label="{{lang 'cart.gift_certificates.change_gift_certificate' certificate_name=name}}"
                        >
                            {{lang 'common.change'}}
                        </a>
                    {{/if}}
                    {{> components/cart/item-giftwrap this}}
                    {{#if event_date}}
                        <dl class="cart-item-options">
                            <dt class="cart-item-option-title">
                                {{event_date.name}}
                            </dt>

                            <dd class="cart-item-option-description">
                                {{event_date.date}}
                            </dd>
                        </dl>
                    {{/if}}

                </td>
                <td class="cart-item-block cart-item-info">
                    <span class="cart-item-label">{{lang 'cart.checkout.price'}}</span>
                    {{#or ../customer (unless ../settings.hide_price_from_guests) (if type '==' 'GiftCertificate')}}
                        <span class="cart-item-value {{#if price_discounted}}price--discounted{{/if}}">{{price.formatted}}</span>
                        {{#if price_discounted}}
                            <span class="cart-item-value">{{price_discounted.formatted}}</span>
                        {{/if}}
                    {{else}}
                        {{> components/common/login-for-pricing}}
                    {{/or}}
                </td>

                <td class="cart-item-block cart-item-info cart-item-quantity">

                    <label class="form-label cart-item-label" for="qty-{{id}}">{{lang 'products.quantity'}}</label>
                    <div class="form-increment">
                        {{#if can_modify}}
                            <button class="button button--icon"
                                    data-cart-update
                                    data-cart-itemid="{{id}}"
                                    data-action="dec"
                            >
                                <span class="is-srOnly">{{lang 'products.quantity_decrease' name=name}}</span>
                                <i class="icon" aria-hidden="true"><svg><use href="#icon-keyboard-arrow-down" /></svg></i>
                            </button>
                        {{/if}}
                        <input class="form-input form-input--incrementTotal cart-item-qty-input"
                               id="qty-{{id}}"
                               name="qty-{{id}}"
                               type="tel"
                               value="{{quantity}}"
                               data-quantity-min="{{min_purchase_quantity}}"
                               data-quantity-max="{{max_purchase_quantity}}"
                               data-quantity-min-error="{{lang 'products.quantity_min' quantity=min_purchase_quantity}}"
                               data-quantity-max-error="{{lang 'products.quantity_max' quantity=max_purchase_quantity}}"
                               min="1"
                               pattern="[0-9]*"
                               data-cart-itemid="{{id}}"
                               data-action="manualQtyChange"
                               aria-label="{{name}}"
                               aria-live="polite"{{#unless can_modify}} disabled{{/unless}}>
                        {{#if can_modify}}
                            <button class="button button--icon"
                                    data-cart-update
                                    data-cart-itemid="{{id}}"
                                    data-action="inc"
                            >
                                <span class="is-srOnly">{{lang 'products.quantity_increase' name=name}}</span>
                                <i class="icon" aria-hidden="true"><svg><use href="#icon-keyboard-arrow-up" /></svg></i>
                            </button>
                        {{/if}}
                    </div>
                    {{#if stock_position}}
                        {{#if ../cart.inventory_settings.show_quantity_on_hand}}
                            {{#all stock_position.quantity_on_hand stock_position.backorder_message}}
                                <p class="cart-item-backorder-message">{{lang 'products.quantity_on_hand' quantity=stock_position.quantity_on_hand}}</p>
                            {{/all}}
                        {{/if}}
                        {{#if ../cart.inventory_settings.show_quantity_on_backorder}}
                            {{#if stock_position.quantity_backordered}}
                                <p class="cart-item-backorder-message">{{lang 'products.quantity_backordered' quantity=stock_position.quantity_backordered}}</p>
                            {{/if}}
                        {{/if}}
                        {{#if ../cart.inventory_settings.show_backorder_message}}
                            {{#if stock_position.backorder_message}}
                                <p class="cart-item-backorder-message">{{stock_position.backorder_message}}</p>
                            {{/if}}
                        {{/if}}
                    {{/if}}
                </td>

                <td class="cart-item-block cart-item-info">
                    <span class="cart-item-label">{{lang 'cart.checkout.total'}}</span>
                    {{#or ../customer (unless ../settings.hide_price_from_guests) (if type '==' 'GiftCertificate')}}
                        <strong class="cart-item-value {{#if total_discounted}}price--discounted{{/if}}">{{total.formatted}}</strong>
                        {{#if total_discounted}}
                            <strong class="cart-item-value">{{total_discounted.formatted}}</strong>
                        {{/if}}
                    {{else}}
                        --
                    {{/or}}
                    {{#or can_modify (if type '==' 'GiftCertificate')}}
                        <button class="cart-remove icon"
                                data-cart-itemid="{{id}}"
                                data-confirm-delete="{{lang 'cart.confirm_delete'}}"
                                aria-label="{{lang 'cart.remove_item' name=name}}"
                        >
                            <svg aria-hidden="true"><use href="#icon-close"></use></svg>
                        </button>
                    {{/or}}
                </td>
            </tr>
        {{/each}}
    </tbody>
</table>
