<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes. All rights reserved.
 * See COPYING.txt for license details.
 */

use Magento\Framework\Escaper;
use Magento\Wishlist\Block\Customer\Wishlist\Item\Options;

/** @var Options $block */
/** @var Escaper $escaper */
?>

<?php $options = $block->getOptionList(); ?>
<?php if ($options): ?>
    <div class="items-center justify-start flex tooltip my-2">
        <div
            x-data="{
                showTooltip: false,
                tooltipId: $id('product-details-tooltip')
            }"
            class="relative z-30 inline-flex"
        >
            <button
                type="button"
                @mouseover.prevent.stop="showTooltip = true"
                @mouseleave.prevent.stop="showTooltip = false"
                @focus="showTooltip = true"
                @focusout="showTooltip = false"
                @keydown.escape="showTooltip = false"
                :aria-labelledby="tooltipId"
            >
                <?= $escaper->escapeHtml(__('See Details')) ?>
            </button>
            <div class="relative" x-cloak x-show="showTooltip">
                <div
                    :id="tooltipId"
                    class="
                        absolute top-0 left-0 z-10 w-64 -mt-6 text-sm leading-tight text-black transform
                        -translate-x-full md:-translate-x-1/3 -translate-y-full bg-white rounded-lg shadow-lg p-4
                    "
                >
                    <span class="subtitle text-lg font-semibold">
                        <?= $escaper->escapeHtml(__('Options Details')) ?>
                    </span>
                    <dl class="my-2">
                        <?php foreach ($options as $option): ?>
                            <dt class="label mb-2 font-semibold"><?= $escaper->escapeHtml($option['label']) ?></dt>
                            <dd class="values mb-2">
                                <?php if (is_array($option['value'])): ?>
                                    <?= /* @noEscape */ nl2br(implode("\n", $option['value'])) ?>
                                <?php else: ?>
                                    <?= /* @noEscape */ $option['value'] ?>
                                <?php endif; ?>
                            </dd>
                        <?php endforeach; ?>
                    </dl>
                </div>
                <div class="absolute z-10 w-3 h-3 bg-white origin-top-left rotate-45 -translate-x-full -translate-y-8 shadow-xl" aria-hidden="true"></div>
            </div>
        </div>
    </div>
<?php endif ?>
