<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Name}}</title>
    {{/* Open Graph / Twitter Card metadata for link previews on Slack,
         iMessage, Twitter/X, LinkedIn, etc. ShareURL and OGImageURL are
         absolute URLs computed in renderAssetViewer; when either is empty
         (no PublicBaseURL set and no resolvable Host), the corresponding
         tag is omitted — most platforms tolerate missing og:image but
         require og:url to be absolute, so we never emit a relative one. */}}
    {{if .Description}}<meta name="description" content="{{.Description}}">{{end}}
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{.Name}}">
    {{if .Description}}<meta property="og:description" content="{{.Description}}">{{end}}
    {{if .ShareURL}}<meta property="og:url" content="{{.ShareURL}}">{{end}}
    {{if .BrandName}}<meta property="og:site_name" content="{{.BrandName}}">{{end}}
    {{if .OGImageURL}}<meta property="og:image" content="{{.OGImageURL}}">{{end}}
    <meta name="twitter:card" content="{{if .OGImageURL}}summary_large_image{{else}}summary{{end}}">
    <meta name="twitter:title" content="{{.Name}}">
    {{if .Description}}<meta name="twitter:description" content="{{.Description}}">{{end}}
    {{if .OGImageURL}}<meta name="twitter:image" content="{{.OGImageURL}}">{{end}}
    <style>
        :root, [data-theme="light"] {
            --bg: #f5f5f5;
            --bg-surface: #fff;
            --text: #1a1a1a;
            --text-muted: #6b7280;
            --page-border: #e5e5e5;
            --badge-bg: #e5e7eb;
            --badge-text: #374151;
            --toggle-hover: #f3f4f6;
            /* shadcn HSL variables — required by SPA CSS.
               These intentionally differ from the SPA's index.css values
               to produce a neutral (non-blue-tinted) palette for the
               standalone public viewer. The SPA uses blue-tinted grays;
               the public viewer uses pure grays for a cleaner look. */
            --background: 0 0% 96%;
            --foreground: 0 0% 10%;
            --card: 0 0% 100%;
            --card-foreground: 0 0% 10%;
            --muted: 0 0% 96%;
            --muted-foreground: 220 9% 46%;
            --border: 0 0% 90%;
            --primary: 221.2 83.2% 53.3%;
            --primary-foreground: 210 40% 98%;
        }
        [data-theme="dark"] {
            --bg: #111113;
            --bg-surface: #1a1a1e;
            --text: #e4e4e7;
            --text-muted: #71717a;
            --page-border: #27272a;
            --badge-bg: #27272a;
            --badge-text: #a1a1aa;
            --toggle-hover: #27272a;
            /* shadcn HSL variables — see light-mode comment above */
            --background: 240 6% 6%;
            --foreground: 240 5% 90%;
            --card: 240 5% 11%;
            --card-foreground: 240 5% 90%;
            --muted: 240 4% 16%;
            --muted-foreground: 240 5% 48%;
            --border: 240 4% 16%;
            --primary: 217.2 91.2% 59.8%;
            --primary-foreground: 222.2 47.4% 11.2%;
        }
        html, body { margin: 0; padding: 0; box-sizing: border-box; height: 100%; }
        body {
            font-family: system-ui, -apple-system, sans-serif;
            background: var(--bg);
            color: var(--text);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .header {
            box-sizing: border-box;
            background: var(--bg-surface);
            border-bottom: 1px solid var(--page-border);
            padding: 12px 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }
        .brand {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-muted);
            flex-shrink: 0;
        }
        .brand a {
            display: flex;
            align-items: center;
            gap: 8px;
            color: inherit;
            text-decoration: none;
        }
        .brand a:hover { opacity: 0.8; }
        .brand-logo {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
        }
        .brand-logo svg {
            /* display:block + max-width:100% defend against operator-supplied
               SVGs whose root element carries width="100%"/height="100%"
               attributes that would otherwise force the logo to overflow on
               narrow viewports. */
            width: 24px;
            height: 24px;
            display: block;
            max-width: 100%;
        }
        .brand-implementor .brand-logo {
            width: auto;
            height: 28px;
        }
        .brand-implementor .brand-logo svg {
            width: auto;
            height: 28px;
            max-width: 100%;
        }
        .brand-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-muted);
        }
        .separator {
            width: 1px;
            height: 20px;
            background: var(--page-border);
            flex-shrink: 0;
        }
        .header-center {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            min-width: 0;
        }
        .header-center h1 {
            font-size: 16px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .badge {
            font-size: 11px;
            background: var(--badge-bg);
            color: var(--badge-text);
            padding: 2px 8px;
            border-radius: 10px;
            flex-shrink: 0;
        }
        .theme-toggle {
            background: none;
            border: 1px solid var(--page-border);
            border-radius: 6px;
            padding: 4px 6px;
            cursor: pointer;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.15s;
        }
        .theme-toggle:hover { background: var(--toggle-hover); }
        .theme-toggle svg { width: 16px; height: 16px; }
        .notice {
            box-sizing: border-box;
            font-size: 11px;
            color: var(--text-muted);
            text-align: center;
            padding: 4px 24px;
            border-bottom: 1px solid var(--page-border);
            background: var(--bg-surface);
            flex-shrink: 0;
            line-height: 1.4;
        }
        .content {
            box-sizing: border-box;
            width: 100%;
            padding: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
        }
        .content > div {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .content iframe {
            flex: 1;
            min-height: 60vh;
            width: 100%;
            height: auto !important;
            display: block;
        }
        .info-toggle {
            background: none;
            border: 1px solid var(--page-border);
            border-radius: 6px;
            padding: 4px 6px;
            cursor: pointer;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.15s;
        }
        .info-toggle:hover { background: var(--toggle-hover); }
        .info-toggle svg { width: 16px; height: 16px; }
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-overlay[hidden] { display: none; }
        .modal-card {
            background: var(--bg-surface);
            border: 1px solid var(--page-border);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.18);
            max-width: 420px;
            width: calc(100% - 32px);
            padding: 24px;
        }
        .modal-card h2 {
            font-size: 15px;
            font-weight: 600;
            margin: 0 0 16px 0;
        }
        .modal-card .desc {
            font-size: 13px;
            color: var(--text-muted);
            margin: 0 0 16px 0;
            line-height: 1.5;
        }
        .modal-card dl {
            margin: 0 0 16px 0;
            font-size: 13px;
        }
        .modal-card dt {
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-top: 10px;
        }
        .modal-card dt:first-child { margin-top: 0; }
        .modal-card dd {
            margin: 2px 0 0 0;
            color: var(--text);
        }
        .modal-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 0;
        }
        .modal-tags .badge {
            font-size: 11px;
        }
        .modal-close {
            display: block;
            width: 100%;
            padding: 8px;
            border: 1px solid var(--page-border);
            border-radius: 6px;
            background: var(--bg);
            color: var(--text);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            text-align: center;
            transition: background 0.15s;
        }
        .modal-close:hover { background: var(--toggle-hover); }
    </style>
    <script>
    (function() {
        var saved = null;
        try { saved = localStorage.getItem("mdp-theme"); } catch(e) {}
        var theme = saved || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
        document.documentElement.setAttribute("data-theme", theme);
        document.documentElement.classList.toggle("dark", theme === "dark");
    })();
    </script>
</head>
<body>
    {{if .Embedded}}<style>body{margin:0;padding:0} .content{height:100vh}</style>{{end}}
    {{if not .Embedded}}
    <div class="header">
        {{if or .ImplementorName .ImplementorLogoSVG}}
        <div class="brand brand-implementor">
            {{if .ImplementorURL}}<a href="{{.ImplementorURL}}" target="_blank" rel="noopener noreferrer">{{end}}
            {{if .ImplementorLogoSVG}}<div class="brand-logo">{{.ImplementorLogoSVG}}</div>{{end}}
            {{if .ImplementorName}}<span class="brand-name">{{.ImplementorName}}</span>{{end}}
            {{if .ImplementorURL}}</a>{{end}}
        </div>
        <div class="separator"></div>
        {{end}}
        <div class="header-center">
            <h1>{{.Name}}</h1>
            <span class="badge">{{.ContentType}}</span>
            {{if .Version}}<span class="badge">v{{.Version}}</span>{{end}}
        </div>
        <button class="info-toggle" id="info-toggle" aria-label="Asset info" title="Asset info">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
        </button>
        <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">
            <svg id="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
            <svg id="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
        </button>
        <div class="separator"></div>
        <div class="brand brand-platform">
            {{if .BrandURL}}<a href="{{.BrandURL}}" target="_blank" rel="noopener noreferrer">{{end}}
            <div class="brand-logo">{{.BrandLogoSVG}}</div>
            <span class="brand-name">{{.BrandName}}</span>
            {{if .BrandURL}}</a>{{end}}
        </div>
    </div>
    {{if or .NoticeText .ExpiresAtISO}}
    <div class="notice" id="notice">
        {{if .ExpiresAtISO}}
        <span id="expiry-notice" {{if .HideExpiration}}style="display:none"{{end}}>This page expires <span id="expiry-rel"></span></span>
        {{if and (not .HideExpiration) .NoticeText}}<span class="notice-sep"> &middot; </span>{{end}}
        {{end}}
        {{if .NoticeText}}<span>{{.NoticeText}}</span>{{end}}
    </div>
    {{end}}
    {{end}}
    <div class="content">
        <style>{{.ContentViewerCSS}}</style>
        <div id="content-root">
            <p style="color:var(--text-muted);padding:16px">Loading...</p>
        </div>
        <script type="application/json" id="content-data">{{.ContentJSON}}</script>
        <script>{{.ContentViewerJS}}</script>
    </div>
    {{if not .Embedded}}
    <div class="modal-overlay" id="info-modal" hidden>
        <div class="modal-card">
            <h2>About this asset</h2>
            {{if .Description}}<p class="desc">{{.Description}}</p>{{end}}
            <dl>
                <dt>Created</dt>
                <dd id="info-created"></dd>
                <dt>Updated</dt>
                <dd id="info-updated"></dd>
            </dl>
            {{if .Tags}}
            <div class="modal-tags" style="margin-bottom:16px">
                {{range .Tags}}<span class="badge">{{.}}</span>{{end}}
            </div>
            {{end}}
            <button class="modal-close" id="info-close">Close</button>
        </div>
    </div>
    <script>
    (function() {
        // Theme toggle
        var html = document.documentElement;
        var btn = document.getElementById("theme-toggle");
        var sunIcon = document.getElementById("icon-sun");
        var moonIcon = document.getElementById("icon-moon");

        function applyTheme(t) {
            html.setAttribute("data-theme", t);
            html.classList.toggle("dark", t === "dark");
            sunIcon.style.display = t === "dark" ? "block" : "none";
            moonIcon.style.display = t === "dark" ? "none" : "block";
        }
        applyTheme(html.getAttribute("data-theme") || "light");

        btn.addEventListener("click", function() {
            var next = html.getAttribute("data-theme") === "dark" ? "light" : "dark";
            applyTheme(next);
            try { localStorage.setItem("mdp-theme", next); } catch(e) {}
        });

        // Relative time for expiry
        var expiryEl = document.getElementById("expiry-rel");
        var iso = "{{.ExpiresAtISO}}";
        if (expiryEl && iso) {
            var exp = new Date(iso);
            var diff = exp - new Date();
            if (diff > 0) {
                var mins = Math.floor(diff / 60000);
                var hrs = Math.floor(mins / 60);
                var days = Math.floor(hrs / 24);
                if (days > 0) expiryEl.textContent = "in " + days + " day" + (days !== 1 ? "s" : "");
                else if (hrs > 0) expiryEl.textContent = "in " + hrs + " hour" + (hrs !== 1 ? "s" : "");
                else expiryEl.textContent = "in " + Math.max(1, mins) + " minute" + (mins !== 1 ? "s" : "");
            } else {
                expiryEl.textContent = "soon";
            }
        }

        // Info modal
        var infoModal = document.getElementById("info-modal");
        var infoBtn = document.getElementById("info-toggle");
        var infoClose = document.getElementById("info-close");

        // Format dates
        var createdEl = document.getElementById("info-created");
        var updatedEl = document.getElementById("info-updated");
        var createdISO = "{{.CreatedAtISO}}";
        var updatedISO = "{{.UpdatedAtISO}}";
        if (createdEl && createdISO) createdEl.textContent = new Date(createdISO).toLocaleString();
        if (updatedEl && updatedISO) updatedEl.textContent = new Date(updatedISO).toLocaleString();

        function showInfo() { infoModal.hidden = false; }
        function hideInfo() { infoModal.hidden = true; }

        infoBtn.addEventListener("click", showInfo);
        infoClose.addEventListener("click", hideInfo);
        infoModal.addEventListener("click", function(e) {
            if (e.target === infoModal) hideInfo();
        });
        document.addEventListener("keydown", function(e) {
            if (e.key === "Escape" && !infoModal.hidden) hideInfo();
        });
    })();
    </script>
    {{end}}
</body>
</html>
