<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div data-bind="scope: 'messages'">
    <div data-bind="visible: isVisible()">
        <!-- ko if: cookieMessages && cookieMessages.length > 0 -->
        <div class="messages-fixed-wrapper message--show" data-bind="click: removeAll">
            <div role="alert" data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
                <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            }">
                    <div class="message-text" data-bind="html: message.text"></div>
                    <button type="button" id="btn-message-close" class="action close message-close" data-action="close"
                            data-bind="attr: { title: $t('Close') }" title="Close">
                        <span data-bind="i18n: 'Close'">Close</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- /ko -->
        <!-- ko if: messages().messages && messages().messages.length > 0 -->
        <div class="messages-fixed-wrapper message--show" data-bind="click: removeAll">
            <div role="alert" data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
                <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            }">
                    <div class="message-text" data-bind="html: message.text"></div>
                    <button type="button" id="btn-message-close" class="action close message-close" data-action="close"
                            data-bind="attr: { title: $t('Close') }" title="Close">
                        <span data-bind="i18n: 'Close'">Close</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                        "messages": {
                            "component": "Magento_Theme/js/view/messages"
                        }
                    }
                }
            }
    }

</script>