<?php
/**
 * Copyright © 2016 Magento. 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]';
$formName = $block->getFormName();
?>
<div id="<?php echo $block->getHtmlId() ?>"
     class="gallery"
     data-mage-init='{"productGallery":{"template":"#<?php echo $block->getHtmlId() ?>-template"}}'
     data-parent-component="<?php echo $block->escapeHtml($block->getData('config/parentComponent')) ?>"
     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(); ?>
            <div class="product-image-wrapper">
                <p class="image-placeholder-text">
                    <?php /* @escapeNotVerified */ echo __('Browse to find or drag image here'); ?>
                </p>
            </div>
        </div>
    <?php } ?>
    <?php foreach ($block->getImageTypes() as $typeData) {
    ?>
        <input name="<?php echo $block->escapeHtml($typeData['name']) ?>"
               data-form-part="<?php /* @escapeNotVerified */ echo $formName ?>"
               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 %>"
                   data-form-part="<?php /* @escapeNotVerified */ echo $formName ?>"
                   class="position"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][file]"
                   data-form-part="<?php /* @escapeNotVerified */ echo $formName ?>"
                   value="<%- data.file %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][value_id]"
                   data-form-part="<?php /* @escapeNotVerified */ echo $formName ?>"
                   value="<%- data.value_id %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][label]"
                   data-form-part="<?php /* @escapeNotVerified */ echo $formName ?>"
                   value="<%- data.label %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][disabled]"
                   data-form-part="<?php /* @escapeNotVerified */ echo $formName ?>"
                   value="<%- data.disabled %>"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][media_type]"
                   data-form-part="<?php /* @escapeNotVerified */ echo $formName ?>"
                   value="image"/>
            <input type="hidden"
                   name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][removed]"
                   data-form-part="<?php /* @escapeNotVerified */ echo $formName ?>"
                   value=""
                   class="is-removed"/>

            <div class="product-image-wrapper">
                <img class="product-image"
                     data-role="image-element"
                     src="<%- data.url %>"
                     alt="<%- data.label %>"/>

                <div class="actions">
                    <button type="button"
                            class="action-remove"
                            data-role="delete-button"
                            title="<?php /* @escapeNotVerified */ echo __('Delete image') ?>">
                    <span>
                        <?php /* @escapeNotVerified */ echo __('Delete image') ?>
                    </span>
                    </button>
                    <div class="draggable-handle"></div>
                </div>
                <div class="image-fade"><span><?php /* @escapeNotVerified */ echo __('Hidden') ?></span></div>
            </div>


            <div class="item-description">
                <div class="item-title" data-role="img-title"><%- data.label %></div>
                <div class="item-size">
                  <span data-role="image-dimens"></span>, <span data-role="image-size"><%- data.sizeLabel %></span>
                </div>
            </div>

            <ul class="item-roles" data-role="roles-labels">
                <?php
                foreach ($block->getImageTypes() as $typeData) {
                    ?>
                    <li data-role-code="<?php /* @escapeNotVerified */ echo $block->escapeHtml(
                        $typeData['code']
                    ) ?>" class="item-role item-role-<?php /* @escapeNotVerified */ echo $block->escapeHtml(
                        $typeData['code']
                    ) ?>">
                        <?php /* @escapeNotVerified */ echo $block->escapeHtml($typeData['label']) ?>
                    </li>
                    <?php
                }
                ?>
            </ul>
        </div>
    </script>

    <script data-role="img-dialog-container-tmpl" type="text/x-magento-template">
      <div class="image-panel" data-role="dialog">
      </div>
    </script>

    <script data-role="img-dialog-tmpl" type="text/x-magento-template">
            <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="admin__fieldset fieldset-image-panel">
                    <div class="admin__field field-image-description">
                        <label class="admin__field-label" for="image-description">
                            <span><?php /* @escapeNotVerified */ echo __('Alt Text')?></span>
                        </label>

                        <div class="admin__field-control">
                            <textarea data-role="image-description"
                                      rows="3"
                                      class="admin__control-textarea"
                                      name="<?php /* @escapeNotVerified */
                                      echo $elementName
                                      ?>[<%- data.file_id %>][label]"><%- data.label %></textarea>
                        </div>
                    </div>

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

                    <div class="admin__field admin__field-inline field-image-size" data-role="size">
                        <label class="admin__field-label">
                            <span><?php /* @escapeNotVerified */ echo __('Image Size') ?></span>
                        </label>
                        <div class="admin__field-value" data-message="<?php /* @escapeNotVerified */ echo __('{size}') ?>"></div>
                    </div>

                    <div class="admin__field admin__field-inline field-image-resolution" data-role="resolution">
                        <label class="admin__field-label">
                            <span><?php /* @escapeNotVerified */ echo __('Image Resolution') ?></span>
                        </label>
                        <div class="admin__field-value" data-message="<?php /* @escapeNotVerified */ echo __('{width}^{height} px') ?>"></div>
                    </div>

                    <div class="admin__field field-image-hide">
                        <div class="admin__field-control">
                            <div class="admin__field admin__field-option">
                                <input type="checkbox"
                                       id="hide-from-product-page"
                                       data-role="visibility-trigger"
                                       data-form-part="<?php /* @escapeNotVerified */ echo $formName ?>"
                                       value="1"
                                       class="admin__control-checkbox"
                                       name="<?php /* @escapeNotVerified */ echo $elementName ?>[<%- data.file_id %>][disabled]"
                                <% if (data.disabled == 1) { %>checked="checked"<% } %> />

                                <label for="hide-from-product-page" class="admin__field-label">
                                    <?php /* @escapeNotVerified */ echo __('Hide from Product Page')?>
                                </label>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
    </script>
    <?php echo $block->getChildHtml('new-video'); ?>
</div>
<script>
    jQuery('body').trigger('contentUpdated');
</script>
