<?php
/**
 * @author 1902 Software
 * @copyright Copyright © 2023 1902 Software (https://1902software.com/magento/)
 * @package WriteTextAI_WriteTextAI
 */
?>
<div class="wtai-invalid-image-popup" data-bind="scope: 'wtaiInvalidImagePopup'">
    <div class="wtai-content">
        <p class="wtai-proceedable-paragraph" data-bind="visible: proceedable() || optimizing()">
            <span data-bind="hidden: optimizing">
                <?= $block->escapeHtml(__("You can proceed with text generation without"
                    . " the invalid image(s) being taken into consideration, or cancel"
                    . " and upload a different image to try again.")) ?>
            </span>
            <span data-bind="visible: optimizing">
                <?= $block->escapeHtml(__("You can proceed with Keyword analysis"
                    . " without the invalid featured image being taken into consideration,"
                    . " or cancel and upload a different image to try again.")) ?>
            </span>
        </p>
        <p data-bind="hidden: proceedable() || optimizing()">
            <?= $block->escapeHtml(__("Please upload a different image and try again.")) ?>
        </p>
        <!-- ko if: invalid ||
                    invalid().length
        -->
        <div data-bind="visible: invalid().length">
            <p class="wtai-upload-error-message" data-bind="text: errorMessages().invalid">Invalid images:</p>
        </div>
        <div class="wtai-images" data-bind="foreach: invalid()">
            <img data-bind="attr: { src: $data.url }" />
        </div>
        <!-- /ko -->
        <!-- ko if: notSupported ||
                    notSupported().length
        -->
        <div data-bind="visible: notSupported().length">
            <p class="wtai-upload-error-message" data-bind="
                text: errorMessages().not_supported
            ">Not supported images:</p>
        </div>
        <div class="wtai-images" data-bind="foreach: notSupported()">
            <img data-bind="attr: { src: $data.url }" />
        </div>
        <!-- /ko -->
        <!-- ko if: downloadFailed ||
                    downloadFailed().length
        -->
        <div data-bind="visible: downloadFailed().length">
            <p class="wtai-upload-error-message" data-bind="
                text: errorMessages().download_failed
            ">Download failed images:</p>
        </div>
        <div class="wtai-images" data-bind="foreach: downloadFailed()">
            <img data-bind="attr: { src: $data.url }" />
        </div>
        <!-- /ko -->
        <!-- ko if: general ||
                    general().length
        -->
        <div data-bind="visible: general().length">
            <p class="wtai-upload-error-message" data-bind="text: errorMessages().general">General images:</p>
        </div>
        <div class="wtai-images" data-bind="foreach: general()">
            <img data-bind="attr: { src: $data.url }" />
        </div>
        <!-- /ko -->
    </div>
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "wtaiInvalidImagePopup": {
                        "component": "WriteTextAI_WriteTextAI/js/edit/invalid-image-popup",
                        "updateOptimizationUrl": "<?= $block->escapeJs(
                            $block->getUrl('wtai/edit/keywordsOptimization_update')
                        ) ?>",
                        "generateUrl": "<?= $block->escapeJs($block->getUrl('wtai/edit/generate')) ?>"
                    }
                }
            }
        }
    }
</script>
