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

/** @var $block \Magento\ConfigurableProduct\Block\Adminhtml\Product\Edit\Tab\Variations\Config */
?>
<div class="entry-edit form-inline" id="<?= $block->escapeHtmlAttr($block->getId()) ?>" data-panel="product-variations">
    <div data-bind="scope: 'variation-steps-wizard'" class="product-create-configuration">
        <div class="product-create-configuration-info">
            <div class="note" data-role="product-create-configuration-info">
                <?= $block->escapeHtml(__('Configurable products allow customers to choose options (Ex: shirt color).
            You need to create a simple product for each configuration (Ex: a product for each color).'));?>
            </div>
        </div>
        <div class="product-create-configuration-actions" data-action="product-create-configuration-buttons">
            <div class="product-create-configuration-action">
                <button type="button" data-action="open-steps-wizard" title="Create Product Configurations"
                        class="action-secondary" data-bind="click: open">
                <span data-role="button-label" data-edit-label="<?= $block->escapeHtmlAttr(__('Edit Configurations')) ?>">
                    <?= $block->escapeHtml($block->isHasVariations()
                        ? __('Edit Configurations')
                        : __('Create Configurations'))
?>
                </span>
                </button>
            </div>
            <div class="product-create-configuration-action" data-bind="scope: 'configurableProductGrid'">
                <button class="action-tertiary action-menu-item" type="button" data-action="choose"
                        data-bind="click: showManuallyGrid, visible: button">
                    <?= $block->escapeHtml(__('Add Products Manually')) ?>
                </button>
            </div>
        </div>
    </div>
    <div class="fieldset">
        <?= $block->getChildHtml('matrix') ?>

        <!-- Select Associated Product popup -->
        <div data-grid-id="associated-products-container">
            <div class="admin__data-grid-outer-wrap" data-bind="scope: 'configurable_associated_product_listing.configurable_associated_product_listing'">
                <div data-role="spinner" data-component="configurable_associated_product_listing.configurable_associated_product_listing.product_columns" class="admin__data-grid-loading-mask">
                    <div class="spinner">
                        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                    </div>
                </div>
                <!-- ko template: getTemplate() --><!-- /ko -->

            </div>
        </div>

        <input type="hidden" name="affect_configurable_product_attributes" value="1" />
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "configurableProductGrid": {
                        "component": "Magento_ConfigurableProduct/js/variations/product-grid",
                        "productsFilter": "configurable_associated_product_listing.configurable_associated_product_listing.listing_top.listing_filters",
                        "productsProvider": "configurable_associated_product_listing.data_source",
                        "productsMassAction": "configurable_associated_product_listing.configurable_associated_product_listing.product_columns.ids",
                        "productsColumns": "configurable_associated_product_listing.configurable_associated_product_listing.product_columns",
                        "productsGridUrl": "<?= /* @noEscape */ $block->getUrl('catalog/product_associated/grid', ['componentJson' => true]) ?>",
                        "configurableVariations": "configurableVariations"
                    }
                }
            },
            "Magento_ConfigurableProduct/js/configurable-type-handler": {
                "blockId": "#<?= /* @noEscape */ $block->getId() ?>",
                "tabId": "<?= /* @noEscape */ $block->getTabId() ?>",
                "hasVariations": <?= /* @noEscape */ $block->isHasVariations() ? 'true' : 'false' ?>
            }
        }
    }
</script>
