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

use Magento\Backend\Block\Template;
use Magento\Framework\Escaper;

// phpcs:disable Magento2.Files.LineLength, Generic.Files.LineLength
/** @var Template $block */
/** @var Escaper $escaper */

?>

<div class="media-gallery-image-details-modal"
     data-bind="mageInit: {
        'Magento_Ui/js/modal/modal': {
            type: 'slide',
            buttons: [],
            modalClass: 'media-gallery-image-details',
            title: '<?= $escaper->escapeHtmlAttr(__('Image Details')); ?>'
        }
     }">
    <div class="page-main-actions">
        <div class="page-actions">
            <div class="page-actions-inner">
                <div class="page-action-buttons" id="media-gallery-image-actions"
                     data-bind="scope: 'mediaGalleryImageActions'">
                    <!-- ko template: getTemplate() --><!-- /ko -->
                </div>
            </div>
        </div>
    </div>
    <div id="media-gallery-image-details-messages" data-bind="scope: 'mediaGalleryImageDetailsMessages'">
        <!-- ko template: getTemplate() --><!-- /ko -->
    </div>
    <div id="media-gallery-image-details" data-bind="scope: 'mediaGalleryImageDetails'">
        <!-- ko template: getTemplate() --><!-- /ko -->
    </div>
</div>

<script type="text/x-magento-init">
    {
        "#media-gallery-image-details": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "mediaGalleryImageDetails": {
                        "component": "Magento_MediaGalleryUi/js/image/image-details",
                        "imageDetailsUrl": "<?= $escaper->escapeJs($block->getData('imageDetailsUrl')); ?>",
                        "modalSelector": ".media-gallery-image-details-modal",
                        "modalWindowSelector": ".media-gallery-image-details",
                        "mediaGridMessages": "media_gallery_listing.media_gallery_listing.messages"
                    }
                }
            }
        },
        "#media-gallery-image-details-messages": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "mediaGalleryImageDetailsMessages": {
                        "component": "Magento_MediaGalleryUi/js/grid/messages"
                    }
                }
            }
        },
        "#media-gallery-image-actions": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "mediaGalleryImageActions": {
                        "component": "Magento_MediaGalleryUi/js/image/image-actions",
                        "modalSelector": ".media-gallery-image-details-modal",
                        "modalWindowSelector": ".media-gallery-image-details",
                        "imageModelName" : "media_gallery_listing.media_gallery_listing.media_gallery_columns.thumbnail_url",
                        "mediaGalleryImageDetailsName": "mediaGalleryImageDetails",
                        "actionsList": [
                            {
                                "title": "<?= $escaper->escapeJs(__('Cancel')); ?>",
                                "handler": "closeModal",
                                "name": "cancel",
                                "classes": "action-default scalable cancel action-quaternary"
                            },
                            {
                                "title": "<?= $escaper->escapeJs(__('Delete Image')); ?>",
                                "handler": "deleteImageAction",
                                "name": "delete",
                                "classes": "action-default scalable delete action-quaternary"
                            },
                            {
                                "title": "<?= $escaper->escapeJs(__('Edit Details')); ?>",
                                "handler": "editImageAction",
                                "name": "edit",
                                "classes": "action-default scalable edit action-quaternary"
                            },
                            {
                                "title": "<?= $escaper->escapeJs(__('Add Image')); ?>",
                                "handler": "addImage",
                                "name": "add-image",
                                "classes": "scalable action-primary add-image-action"
                            }
                        ]
                    }
                }
            }
        }
    }
</script>


