<?php
/**
 * @author Amasty Team
 * @copyright Copyright (c) Amasty (https://www.amasty.com)
 * @package Advanced Product Reviews Base for Magento 2
 */
/** @var \Magento\Framework\Escaper $escaper */
?>

<td class="label">
    <label><?= $escaper->escapeHtml(__('Sorting Order')) ?></label>
</td>
<td class="value">
    <table class="amasty-advanced-review" id="amasty-advanced-review" data-am-js="amasty-advanced-review">
        <?php foreach ($block->getPositions() as $key => $index): ?>
            <tr class="table-row">
                <td class="item-position amcontent">
                    <?= $escaper->escapeHtml($index) ?>
                    <div class="draggable"></div>
                    <input type="hidden"
                           name="<?= $escaper->escapeHtml($block->getNamePrefix($key)) ?>"
                           value="<?= $escaper->escapeHtml(__($index)) ?>">
                </td>
            </tr>
        <?php endforeach ?>
    </table>
    <p class="note">
        <span>
            <?= $escaper->escapeHtml(
                __('Drag and drop sorting options in the order you want them to appear for the customers.')
            ) ?>
        </span>
    </p>
    <p class="note">
        <span><?= $escaper->escapeHtml(__('First option will be automatically considered as default.')) ?></span>
    </p>
</td>
<script>
    require([
        'jquery',
        'collapsable'
    ], function ($) {
        $('[data-am-js="amasty-advanced-review"]').sortable({
            axis: 'y',
            handle: '.item-position',
            items: 'tr',
            tolerance: 'pointer'
        });
    });
</script>
