<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis

/* @var $block \Magento\Framework\View\Element\Template */
?>
<div class="block block-compare" data-bind="scope: 'compareProducts'" data-role="compare-products-sidebar">
    <div class="block-title">
        <strong id="block-compare-heading" role="heading" aria-level="2"><?= $block->escapeHtml(__('Compare Products')) ?></strong>
        <span class="counter qty no-display" data-bind="text: compareProducts().countCaption, css: {'no-display': !compareProducts().count}"></span>
    </div>
    <!-- ko if: compareProducts().count -->
    <div class="block-content no-display" aria-labelledby="block-compare-heading" data-bind="css: {'no-display': !compareProducts().count}">
        <ol id="compare-items" class="product-items product-items-names" data-bind="foreach: compareProducts().items">
                <li class="product-item">
                    <input type="hidden" class="compare-item-id" data-bind="value: id"/>
                    <strong class="product-item-name">
                        <a data-bind="attr: {href: product_url}, html: name" class="product-item-link"></a>
                    </strong>
                    <a href="#"
                       data-bind="attr: {'data-post': remove_url}"
                       title="<?= $block->escapeHtmlAttr(__('Remove This Item')) ?>"
                       class="action delete">
                        <span><?= $block->escapeHtml(__('Remove This Item')) ?></span>
                    </a>
                </li>
        </ol>
        <div class="actions-toolbar">
            <div class="primary">
                <a data-bind="attr: {'href': compareProducts().listUrl}" class="action compare primary"><span><?= $block->escapeHtml(__('Compare')) ?></span></a>
            </div>
            <div class="secondary">
                <a id="compare-clear-all" href="#" class="action clear" data-post="<?=$block->escapeHtml(
                    $this->helper(Magento\Catalog\Helper\Product\Compare::class)->getPostDataClearList()
                ) ?>">
                    <span><?= $block->escapeHtml(__('Clear All')) ?></span>
                </a>
            </div>
        </div>
    </div>
    <!-- /ko -->
    <!-- ko ifnot: compareProducts().count -->
    <div class="empty"><?= $block->escapeHtml(__('You have no items to compare.')) ?></div>
    <!-- /ko -->
</div>
<script type="text/x-magento-init">
{"[data-role=compare-products-sidebar]": {"Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>}}
</script>
