@model EasyStory
@inject CRS.EasyCreator.Services.IEasyStoryRenderer Renderer

@{
    Layout = null;
    var html = Model.HtmlCache ?? string.Empty;
    var css = Model.CssCache ?? string.Empty;
}
<!DOCTYPE html>
<html lang="@(System.Globalization.CultureInfo.CurrentCulture.TwoLetterISOLanguageName)">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Preview: @(Model.Title ?? Model.SystemName)</title>
    <link rel="stylesheet" href="~/Modules/CRS.EasyCreator/css/easycreator.css?v=@DateTime.UtcNow.Ticks" />
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; }
        .cc-preview-bar {
            position: fixed; top: 0; left: 0; right: 0;
            background: #347468; color: #fff; padding: 6px 14px; font-size: 12px;
            z-index: 9999; display: flex; justify-content: space-between; align-items: center;
        }
        .cc-preview-bar button { background: rgba(255,255,255,.2); color: #fff; border: 1px solid #fff; border-radius: 3px; padding: 2px 10px; cursor: pointer; }
        .cc-preview-body { margin-top: 30px; }
    </style>
    @if (!string.IsNullOrEmpty(css))
    {
        <style>@Html.Raw(css)</style>
    }
</head>
<body>
    <div class="cc-preview-bar">
        <span>
            <strong>Preview:</strong> @(Model.Title ?? Model.SystemName)
            <small>(Type=@Model.StoryType, Id=@Model.Id)</small>
        </span>
        <span>
            <button type="button" onclick="window.location.reload()">Neu laden</button>
            <button type="button" onclick="window.close()">Schliessen</button>
        </span>
    </div>
    @{ var forceVp = ViewBag.ForceViewport as string; }
    <div class="cc-preview-body @(forceVp != null ? "ec-force-vp-" + forceVp : null)">
        <div class="crs-easycreator-story" data-story-id="@Model.Id">
            @Html.Raw(html)
        </div>
    </div>
</body>
</html>
