<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div id="<?php /* @escapeNotVerified */ echo $htmlId;?>-container" class="images"
     data-mage-init='{"baseImage":{}}'
     data-max-file-size="<?php /* @escapeNotVerified */ echo $fileMaxSize;?>"
    >
    <div class="image image-placeholder">
        <input type="file"
               name="image"
               data-url="<?php /* @escapeNotVerified */ echo $uploadUrl;?>"
               multiple="multiple" />
        <img class="spacer" src="<?php /* @escapeNotVerified */ echo $spacerImage;?>"/>
        <p class="image-placeholder-text"><?php /* @escapeNotVerified */ echo $imagePlaceholderText;?></p>
    </div>
    <script
        id="<?php /* @escapeNotVerified */ echo $htmlId;?>-template"
        data-template="image"
        type="text/x-magento-template">
        <div class="image">
            <img class="spacer" src="<?php /* @escapeNotVerified */ echo $spacerImage;?>"/>
            <img
                class="product-image"
                src="<%- data.url %>"
                data-position="<%- data.position %>"
                alt="<%- data.label %>" />
            <div class="actions">
                <button
                    type="button"
                    class="action-delete"
                    data-role="delete-button"
                    title="<?php /* @escapeNotVerified */ echo $deleteImageText;?>">
                    <span><?php /* @escapeNotVerified */ echo $deleteImageText;?></span>
                </button>
                <button
                    type="button"
                    class="action-make-base"
                    data-role="make-base-button"
                    title="<?php /* @escapeNotVerified */ echo $makeBaseText;?>">
                    <span><?php /* @escapeNotVerified */ echo $makeBaseText;?></span>
                </button>
                <div class="draggable-handle"></div>
            </div>
            <div class="image-label"></div>
            <div class="image-fade"><span><?php /* @escapeNotVerified */ echo $hiddenText;?></span></div>
        </div>
    </script>
</div>
<span class="action-manage-images" data-activate-tab="image-management">
    <span><?php /* @escapeNotVerified */ echo $imageManagementText;?></span>
</span>
<script>
    require([
        'jquery'
    ],function($){
        'use strict';
        $('[data-activate-tab=image-management]')
            .on('click.toggleImageManagementTab', function() {
                $('#product_info_tabs_image-management').trigger('click');
            });
    });
</script>
