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

// phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis
/** @var $block \Magento\Ui\Block\Component\StepsWizard */
?>
<div data-role="steps-wizard-main"
     class="steps-wizard <?= /* @noEscape */ $block->getData('config/dataScope') ?>"
     data-bind="scope: '<?= $block->escapeHtmlAttr($block->getComponentName()) ?>'">
    <div data-role="messages" class="messages"></div>

    <div data-role="steps-wizard-controls" class="steps-wizard-navigation">
        <ul class="nav-bar">
            <?php foreach ($block->getSteps() as $step) : ?>
                <li data-role="collapsible"
                    data-bind="css: { 'active': selectedStep() == '<?= $block->escapeHtmlAttr($step->getComponentName()) ?>'}">
                    <a href="#<?= $block->escapeHtmlAttr($step->getComponentName()) ?>"
                       data-bind="click: showSpecificStep">
                        <?= $block->escapeHtml($step->getCaption()) ?>
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>
        <div class="nav-bar-outer-actions">
            <div class="action-wrap" data-role="closeBtn">
                <button type="button"
                        class="action-cancel action-tertiary" data-bind="click: close">
                    <span><?= $block->escapeHtml(__('Cancel')) ?></span>
                </button>
            </div>
            <div class="action-wrap action-wrap-prev" data-role="step-wizard-prev">
                <button type="button"
                        class="action-default action-back-step"
                        data-bind="click: back, css: { 'disabled': disabled}">
                    <span><?= $block->escapeHtml(__('Back')) ?></span>
                </button>
            </div>
            <div class="action-wrap action-wrap-next" data-role="step-wizard-next">
                <button type="button"
                        class="action-default action-primary action-next-step" data-bind="click: next">
                    <span><?= $block->escapeHtml(__('Next')) ?></span>
                </button>
            </div>
        </div>
    </div>
    <div data-role="steps-wizard-tab">
        <?php foreach ($block->getSteps() as $step) : ?>
            <div data-bind="visible: selectedStep() == $element.id, css: {'no-display':false}"
                 class="content no-display" id="<?= $block->escapeHtmlAttr($step->getComponentName()) ?>"
                 data-role="content">
                <?= /* @noEscape */ $step->getContent() ?>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                        "<?= $block->escapeJs($block->getComponentName()) ?>": {
                            "component": "Magento_Ui/js/lib/step-wizard",
                            "initData": <?= /* @noEscape */ $this->helper(Magento\Framework\Json\Helper\Data::class)->jsonEncode($block->getInitData()) ?>,
                            "stepsNames": <?= /* @noEscape */ $this->helper(Magento\Framework\Json\Helper\Data::class)->jsonEncode($block->getStepComponents()) ?>,
                            "modalClass": "<?= /* @noEscape */ $block->getData('config/dataScope') ?>"
                        }
                    }
                }
            }
    }
</script>
