@model Slide
@{
    Layout = null;
    var bgStyle = $"background: {Model.BackgroundColor ?? "#ffffff"};";
    if (!string.IsNullOrEmpty(Model.BackgroundImage))
    {
        bgStyle += $" background-image: url('{Model.BackgroundImage}'); background-size: {Model.BackgroundSize ?? "cover"}; background-position: center; background-repeat: no-repeat;";
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Preview: @Model.Name</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { width: 100%; height: 100%; overflow: hidden; }
        body {
            @Html.Raw(bgStyle)
            color: #000;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        .slide-content {
            width: 100%;
            height: 100%;
            @Html.Raw(Model.CustomCss ?? "")
        }
        .slide-content img { max-width: 100%; height: auto; }
        .slide-content table { border-collapse: collapse; }
        .slide-content table td, .slide-content table th { border: 1px solid rgba(0,0,0,0.2); padding: 8px 12px; }
        iframe.embed-frame { width: 100%; height: 100%; border: none; }
        .ics-events { padding: 2em; }
        .ics-events h2 { margin-bottom: 1em; font-size: 2em; }
        .event-card { background: rgba(0,0,0,0.05); border-radius: 12px; padding: 1.2em; margin-bottom: 1em; }
        .event-card h3 { font-size: 1.3em; margin-bottom: 0.3em; }
        .event-meta { opacity: 0.7; font-size: 0.9em; }
        .back-link { position: fixed; top: 10px; right: 10px; z-index: 999; }
    </style>
</head>
<body>
    <a href="/admin/slides" class="back-link btn btn-sm btn-light"><i class="bi bi-x-lg"></i> Close</a>

    @if (Model.SlideType == SlideType.Content)
    {
        <div class="slide-content">@Html.Raw(Model.Content ?? "")</div>
    }
    else if (Model.SlideType == SlideType.Embed)
    {
        <iframe class="embed-frame" src="@Model.EmbedUrl"></iframe>
    }
    else if (Model.SlideType == SlideType.IcsCalendar)
    {
        <div class="ics-events" id="icsContainer">
            <h2><i class="bi bi-calendar-event me-2"></i>Upcoming Events</h2>
            <p>Loading calendar...</p>
        </div>
        <script>
            fetch('/api/parseics?url=' + encodeURIComponent('@Model.IcsSource'))
                .then(r => r.json())
                .then(data => {
                    var html = '<h2><i class="bi bi-calendar-event" style="margin-right:0.5em;"></i>Upcoming Events</h2>';
                    if (data.events && data.events.length > 0) {
                        data.events.forEach(function(e) {
                            html += '<div class="event-card"><h3>' + (e.summary || 'Event') + '</h3>';
                            html += '<div class="event-meta">';
                            if (e.start) html += '<i class="bi bi-clock"></i> ' + e.start;
                            if (e.end) html += ' — ' + e.end;
                            if (e.location) html += ' | <i class="bi bi-geo-alt"></i> ' + e.location;
                            html += '</div>';
                            if (e.description) html += '<p style="margin-top:0.5em;opacity:0.8;">' + e.description + '</p>';
                            html += '</div>';
                        });
                    } else {
                        html += '<p>No upcoming events found.</p>';
                    }
                    document.getElementById('icsContainer').innerHTML = html;
                })
                .catch(err => {
                    document.getElementById('icsContainer').innerHTML = '<h2>Calendar</h2><p>Error loading calendar: ' + err + '</p>';
                });
        </script>
    }
</body>
</html>
