@model Device
@{
    Layout = null;
    var slides = Model.DeviceSlides.ToList();
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>@Model.Name — Sunbeam Display</title>
    <link href="/css/display.css" rel="stylesheet" />
    <style>
        :root {
            --display-width: @(Model.ResolutionWidth)px;
            --display-height: @(Model.ResolutionHeight)px;
        }
    </style>
</head>
<body data-slug="@Model.Slug" data-transition="@Model.Transition" data-width="@Model.ResolutionWidth" data-height="@Model.ResolutionHeight">
    <div id="scale-wrapper">
        <div id="display-container">
            <div id="slide-a" class="slide-layer active"></div>
            <div id="slide-b" class="slide-layer"></div>
        </div>
        <div id="clock-overlay"><span id="clock-time"></span><span id="clock-date"></span></div>
    </div>
    <div id="progress-bar"><div id="progress-fill"></div></div>
    <div id="status-dot" title="Connected"></div>
    <script>
        var playlistData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(slides.Select(ds => new {
            id = ds.Slide.Id, name = ds.Slide.Name, type = ds.Slide.SlideType.ToString().ToLower(),
            content = ds.Slide.Content, embedUrl = ds.Slide.EmbedUrl, icsSource = ds.Slide.IcsSource,
            backgroundColor = ds.Slide.BackgroundColor, backgroundImage = ds.Slide.BackgroundImage,
            backgroundSize = ds.Slide.BackgroundSize,
            customCss = ds.Slide.CustomCss, duration = ds.DurationSeconds
        })));
    </script>
    <script src="/js/display.js"></script>
</body>
</html>
