<div class="previewDebugNotification">
    <div class="previewDebugNotification__header">
        <strong class="previewDebugNotification__title">{{ 'TagManager_PreviewModeEnabledTitle'|translate(version) }}</strong>
    </div>

    <p class="previewDebugNotification__description">
        {{ 'TagManager_PreviewModeEnabledDescription'|translate(externallink('https://matomo.org/faq/tag-manager/preview-debug-a-tag-manager-container/'), '</a>')|raw }}
    </p>

    <p class="previewDebugNotification__instruction">
        {{ 'TagManager_PreviewModeDebugInstruction'|translate }}
    </p>

    <div class="previewDebugNotification__debugForm">
        <div vue-entry="CoreHome.Alert" severity="danger" id="debug-notification-alert" style="display: none">
            <strong>{{ 'TagManager_InvalidDebugUrlError'|translate }}!</strong> <span id="debug-notification-alert-message"></span>
        </div>
        <div class="previewDebugNotification__debugFormRow">
            <input type="url" id="previewDebugUrl" class="browser-default previewDebugNotification__urlInput"
                   placeholder="https://example.org"
                   value="{{ debugSiteUrl|e('html_attr') }}">
            <div class="previewDebugNotification__debugAction">
                <button type="button" class="btn btn-small"
                        data-idcontainer="{{ idcontainer|e('html_attr') }}"
                        data-debug-site-url="{{ debugSiteUrl|e('html_attr') }}">
                    {{ 'TagManager_PreviewDebugUrlButtonText'|translate }}
                </button>
            </div>
            <div class="previewDebugNotification__disableAction">
                <button type="button" class="btn btn-outline btn-small disablePreviewDebug"
                        data-idcontainer="{{ idcontainer|e('html_attr') }}"
                >{{ 'TagManager_DisablePreview'|translate }}</button>
            </div>
        </div>
    </div>
</div>
