how to customise sorter.phtml in magento2?

i need to customise the magento2 component sorter.phtml so that it displays all available options in a list (instead of a select element) and each element in the list has its own asc and desc arrows.

the order of the products on the page are then handled ONLY by clicking on the arrows.

this is how i changed it so far:

<div data-mage-init='{"productListToolbarForm":<?= /* @noEscape */ $widgetOptions ?>}'>
    <div class="toolbar-sorter sorter">
        <p class="sorter-label"><?= $block->escapeHtml(__('Sort By')) ?></p>

        <?php foreach ($block->getAvailableOrders() as $_key => $_order) : ?>
            <div class="sorter-option">
                <p 
                    href='#'
                    data-role="sorter"
                    data-value="<?= $block->escapeHtmlAttr($_key) ?>"
                > 
                    <?= $block->escapeHtml(__($_order)) ?>
                </p>
                <a 
                    title="<?= $block->escapeHtmlAttr(__('Set Ascending Direction')) ?>"
                    href="#" 
                    class="action sorter-action sort-desc" 
                    data-role="sorter" 
                    data-value="<?= $block->escapeHtmlAttr($_key) ?>"
                    data-direction="asc">
                    
                    <span><?= $block->escapeHtml(__('Set Ascending Direction')) ?></span>

                </a>
                <a 
                    title="<?= $block->escapeHtmlAttr(__('Set Descending Direction')) ?>"
                    href="#"
                    class="action sorter-action sort-asc" 
                    data-role="sorter" 
                    data-value="<?= $block->escapeHtmlAttr($_key) ?>"
                    data-direction="desc">
                    <span><?= $block->escapeHtml(__('Set Descending Direction')) ?></span>
                </a>
            </div>

        <?php endforeach; ?>

    </div>
</div>

but i can’t seem to make the arrows handle both the direction and the order and i’m having trouble understanding the javascript code in vendor/magento/module-catalog/view/frontend/web/js/product/list/toolbar.js

can anyone help?