<!DOCTYPE html>
<html lang="en">
{{--
  HTML viewer fallback with a CSS watermark overlay. Used when the file type
  can't be pixel/vector watermarked (non-image, non-pdf) or when PDF stamping
  fails. The overlay is a diagonal repeated caption over an embedded copy of the
  document. On the public share route sourceUrl is null (no raw source exposed);
  in that case we show a text placeholder rather than embedding.
--}}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $document->title }}</title>
    <style>
        html, body { margin: 0; height: 100%; }
        .stage { position: relative; width: 100%; height: 100vh; overflow: auto; background: #525659; }
        .stage iframe, .stage img { display: block; width: 100%; min-height: 100vh; border: 0; background: #fff; }
        .wm { position: fixed; inset: 0; pointer-events: none; z-index: 9999;
              background-repeat: repeat; opacity: .18;
              background-image: repeating-linear-gradient(-30deg, transparent 0 120px, rgba(0,0,0,0) 120px 240px); }
        .wm span { position: absolute; transform: rotate(-30deg); color: #000; font: 600 18px/1 Arial, sans-serif; white-space: nowrap; }
        .placeholder { color: #fff; text-align: center; padding: 80px 20px; font-family: Arial, sans-serif; }
        .placeholder a { color: #9cf; }
    </style>
</head>
<body>
    <div class="stage">
        @if(!empty($sourceUrl))
            @if($version->isImage())
                <img src="{{ $sourceUrl }}" alt="{{ $document->title }}">
            @else
                <iframe src="{{ $sourceUrl }}"></iframe>
            @endif
        @else
            <div class="placeholder">
                <h3>{{ $document->title }}</h3>
                <p>{{ $version->original_name }} ({{ $version->humanSize() }})</p>
                <p>@lang('meddocuments::lang.preview_unavailable')</p>
            </div>
        @endif

        {{-- Tiled CSS watermark overlay --}}
        <div class="wm" id="wm"></div>
    </div>
    <script>
        (function () {
            var text = @json($caption);
            var wm = document.getElementById('wm');
            var cols = 4, rows = 12;
            for (var r = 0; r < rows; r++) {
                for (var c = 0; c < cols; c++) {
                    var s = document.createElement('span');
                    s.textContent = text;
                    s.style.top = (r * 90) + 'px';
                    s.style.left = (c * 320) + 'px';
                    wm.appendChild(s);
                }
            }
        })();
    </script>
</body>
</html>
