/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { h } from "@stencil/core";
import cn from "../../../global/lib/cn";
import { LoaderIcon } from "../../../global/assets/loader-icon";
export const ClaimableTraceModal = ({ isOpen, fadingOut, isLoading, errorMessage, vin, traceHtml, locale, onClose }) => {
    const titleSuffix = vin ? ` — ${vin}` : '';
    return (h("div", { role: "dialog", "aria-modal": "true", "aria-hidden": (!isOpen).toString(), dir: locale.sharedLocales.direction, class: cn('claimable-trace-modal', { open: isOpen, 'fading-out': fadingOut }) }, h("div", { class: "trace-modal-header" }, h("span", { class: "trace-modal-title" }, locale.traceTitle, titleSuffix), h("button", { type: "button", class: "trace-modal-close", "aria-label": "Close", onClick: onClose }, "\u00D7")), h("div", { class: "trace-modal-body" }, isLoading && (h("div", { class: "trace-modal-status" }, h(LoaderIcon, { class: "size-[40px] animate-spin text-[#3071a9]" }), h("span", null, locale.traceLoading))), !isLoading && errorMessage && (h("div", { class: "trace-modal-status trace-modal-error" }, h("span", null, errorMessage))), !isLoading && !errorMessage && traceHtml && (
    // sandbox: allow-scripts is needed for Mermaid to run from CDN inside the trace HTML.
    // Omitting allow-same-origin keeps the iframe in a null origin so it can't reach
    // localStorage/cookies of the host page — defensive given this loads a third-party CDN script.
    h("iframe", { class: "trace-modal-iframe", srcdoc: traceHtml, sandbox: "allow-scripts", title: locale.traceTitle })))));
};
