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

/* @var $block \Magento\ConfigurableProduct\Block\Adminhtml\Product\Steps\AttributeValues */
$isAllowedToManageAttributes = $block->getPermissions()->isAllowedToManageAttributes();
$attributesUrl = $block->getUrl('catalog/product_attribute/getAttributes');
$optionsUrl = $block->getUrl('catalog/product_attribute/createOptions');
?>
<div data-bind="scope: '<?= /* @noEscape */  $block->getComponentName() ?>'">
    <h2 class="steps-wizard-title"><?= $block->escapeHtml(
        __('Step 2: Attribute Values')
    ); ?></h2>
    <div class="steps-wizard-info">
        <span><?= $block->escapeHtml(
            __('Select values from each attribute to include in this product. ' .
                'Each unique combination of values creates a unique product SKU.')
        );?></span>
    </div>
    <div data-bind="foreach: attributes, sortableList: attributes">

        <div class="attribute-entity" data-bind="attr:{'data-attribute-title':label}">
            <div class="attribute-entity-top">
                <div class="attribute-entity-title-block">
                    <span class="draggable-handle"
                          data-role="draggable"
                          title="<?= $block->escapeHtml(__('Sort Variations')) ?>">
                    </span>
                    <div class="attribute-entity-title" data-bind="text: label"></div>
                    <div class="attribute-options-block">
                        (<span class="attribute-length" data-bind="text: $data.options().length"></span>
                        <?= $block->escapeHtml(
                            __('Options')
                        ); ?>)
                    </div>
                </div>

                <div class="attribute-entity-actions">
                    <button type="button"
                            class="action-select-all action-tertiary"
                            data-bind="click: $parent.selectAllAttributes"
                            title="<?= $block->escapeHtml(__('Select All')) ?>">
                        <span><?= $block->escapeHtml(
                            __('Select All')
                        ); ?></span>
                    </button>
                    <button type="button"
                            class="action-deselect-all action-tertiary"
                            data-bind="click: $parent.deSelectAllAttributes"
                            title="<?= $block->escapeHtml(__('Deselect All')) ?>">
                        <span><?= $block->escapeHtml(
                            __('Deselect All')
                        ); ?></span>
                    </button>
                    <button type="button"
                            class="action-remove-all action-tertiary"
                            data-bind="click: $parent.removeAttribute.bind($parent)"
                            title="<?= $block->escapeHtml(__('Remove Attribute')) ?>">
                        <span><?= $block->escapeHtml(
                            __('Remove Attribute')
                        ); ?></span>
                    </button>
                </div>
            </div>

            <fieldset class="admin__fieldset admin__fieldset-options">
                <ul class="attribute-options" data-bind="foreach: options">
                    <li class="attribute-option" data-bind="attr:{'data-attribute-option-title':label}">
                        <div class="admin__field admin__field-option">
                            <input
                                type="checkbox"
                                class="admin__control-checkbox"
                                data-bind="checkedValue: id, checked: $parent.chosenOptions, attr:{id:id}" />
                            <label data-bind="text: label, visible: label, attr:{for:id}"
                                   class="admin__field-label"></label>
                        </div>
                        <div class="admin__field admin__field-create-new"
                             data-bind="attr:{'data-role':id}, visible: !label">
                            <div class="admin__field-control">
                                <input class="admin__control-text"
                                       name="label"
                                       data-bind="value: label, valueUpdate: 'keyup'"
                                       type="text" />
                            </div>
                            <button type="button"
                                    class="action-save"
                                    title="<?= $block->escapeHtml(__('Save Option')) ?>"
                                    data-action="save"
                                    data-bind="click: $parents[1].saveOption.bind($parent)">
                                <span><?= $block->escapeHtml(
                                    __('Save Option')
                                ); ?></span>
                            </button>
                            <button type="button"
                                    class="action-remove"
                                    title="<?= $block->escapeHtml(__('Remove Option')) ?>"
                                    data-action="remove"
                                    data-bind="click: $parents[1].removeOption.bind($parent)">
                                <span><?= $block->escapeHtml(
                                    __('Remove Option')
                                ); ?></span>
                            </button>
                        </div>
                    </li>
                </ul>
            </fieldset>
            <?php if ($isAllowedToManageAttributes): ?>
                <button class="action-create-new action-tertiary"
                        type="button"
                        data-action="addOption"
                        data-bind="click: $parent.createOption, visible: canCreateOption">
                    <span><?= $block->escapeHtml(__('Create New Value')); ?></span>
                </button>
            <?php endif; ?>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "<?= /* @noEscape */  $block->getComponentName() ?>": {
                        "component": "Magento_ConfigurableProduct/js/variations/steps/attributes_values",
                        "appendTo": "<?= /* @noEscape */  $block->getParentComponentName() ?>",
                        "optionsUrl": "<?= /* @noEscape */  $attributesUrl ?>",
                        "createOptionsUrl": "<?= /* @noEscape */  $optionsUrl ?>"
                    }
                }
            }
        }
    }
</script>
