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

// @codingStandardsIgnoreFile

/** @var $block \Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content */
$elementName = $block->getElement()->getName() . '[images]';
?>
<div id="<?php echo $block->getHtmlId() ?>"
     class='gallery'
     data-mage-init='{"productGallery":{"template":"#<?php echo $block->getHtmlId() ?>-template"}}'
     data-images="<?php echo $block->escapeHtml($block->getImagesJson()) ?>"
     data-types="<?php echo $block->escapeHtml(
         $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($block->getImageTypes())
     ) ?>"
    >
    <?php if (!$block->getElement()->getReadonly()) {
    ?>
        <div class="image image-placeholder">
            <?php echo $block->getUploaderHtml();
    ?>
            <img class="spacer" src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/spacer.gif')?>"/>
            <p class="image-placeholder-text"><?php /* @escapeNotVerified */ echo __('Click here or drag and drop to add images.');
    ?></p>
        </div>
    <?php

} ?>
    <?php foreach ($block->getImageTypes() as $typeData) {
    ?>
        <input name="<?php echo $block->escapeHtml($typeData['name']) ?>"
               class="image-<?php echo $block->escapeHtml($typeData['code']) ?>"
               type="hidden"
               value="<?php echo $block->escapeHtml($typeData['value']) ?>"/>
    <?php

} ?>

    <script id="<?php echo $block->getHtmlId() ?>-template" type="text/x-magento-template">
        <div class="image item <% if (data.disabled == 1) { %>hidden-for-front<% } %>"
             data-role="image">
            <input type="hidden" name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][position]" value="<%- data.position %>" class="position"/>
            <input type="hidden" name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][file]" value="<%- data.file %>"/>
            <input type="hidden" name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][value_id]" value="<%- data.value_id %>"/>
            <input type="hidden" name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][label]" value="<%- data.label %>"/>
            <input type="hidden" name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][disabled]" value="<%- data.disabled %>"/>
            <input type="hidden" name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][removed]" value="" class="is-removed"/>
            <ul class="type-labels" style="display: none">
                <?php foreach ($block->getImageTypes() as $typeData) {
    ?>
                    <li class="type-<?php echo $block->escapeHtml(
                        $typeData['code']
                    ) ?>"><?php echo $block->escapeHtml($typeData['label']) ?></li>
                <?php

} ?>
            </ul>
            <img class="spacer" src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/spacer.gif')?>"/>
            <img class="product-image" src="<%- data.url %>" alt="<%- data.label %>"/>
            <div class="actions" >
                <button type="button" class="action-delete" data-role="delete-button" title="<?php /* @escapeNotVerified */ echo __('Delete image') ?>">
                    <span> <?php /* @escapeNotVerified */ echo __('Delete image') ?></span >
                </button>
                <button type="button" class="action-make-base" data-role="make-base-button" title="<?php /* @escapeNotVerified */ echo __('Make Base') ?>">
                    <span><?php /* @escapeNotVerified */ echo __('Make Base') ?></span >
                </button >
                <div class="draggable-handle" ></div >
            </div >
            <div class="image-label"></div>
            <div class="image-fade"><span><?php /* @escapeNotVerified */ echo __('Hidden') ?></span></div>
        </div>
    </script>
    <script class="dialog-template" type="text/x-magento-template"  data-title="Image Options">
        <div class="image-panel" data-role="dialog">
            <div class="image-panel-preview">
                <img src="<%- data.url %>" alt="<%- data.label %>" />
            </div>
            <div class="image-panel-controls">
                <strong class="image-name"><%- data.label %></strong>

                <fieldset class="fieldset fieldset-image-panel">
                    <div class="field field-image-description">
                        <label class="label" for="image-description">
                            <span><?php /* @escapeNotVerified */ echo __('Alt Text')?></span>
                        </label>
                        <div class="control">
                            <textarea id="image-description"
                                      rows="3"
                                      name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][label]"><%- data.label %></textarea>
                        </div>
                    </div>

                    <div class="field field-image-role">
                        <label class="label">
                            <span><?php /* @escapeNotVerified */ echo __('Role')?></span>
                        </label>
                        <div class="control">
                            <ul class="multiselect-alt">
                                <?php foreach ($block->getMediaAttributes() as $attribute) {
    ?>
                                    <li class="item">
                                        <label>
                                            <input class="image-type"
                                                   data-role="type-selector"
                                                   type="checkbox"
                                                   value="<?php echo $block->escapeHtml($attribute->getAttributeCode()) ?>"
                                                />
                                            <?php echo $block->escapeHtml($attribute->getFrontendLabel()) ?>
                                        </label>
                                    </li>
                                <?php

} ?>
                            </ul>
                        </div>
                    </div>

                    <div class="field field-image-hide">
                        <label class="label">
                            <input type="checkbox"
                                   data-role="visibility-trigger"
                                   value="1"
                                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][disabled]"
                            <% if (data.disabled == 1) { %>checked="checked"<% } %> />
                            <span><?php /* @escapeNotVerified */ echo __('Hide from Product Page')?></span>
                        </label>
                    </div>
                </fieldset>
            </div>

            <button type="button" class="action-close" data-role="close-panel" title="<?php /* @escapeNotVerified */ echo __('Close panel'); ?>">
                <span><?php /* @escapeNotVerified */ echo __('Close panel'); ?></span>
            </button>
            <div class="image-pointer"></div>
        </div>
    </script>
</div>
