@using CRS.EasyCreator.Services.Templates
@model SlotEditorModel

@{
    Layout = "_AdminLayout";
    ViewBag.Title = Model.Title.NullEmpty() ?? Model.TemplateName;
    var composeUrl = Url.Action("ComposePreview", "StoryAdmin", new { area = "Admin" });
    var ecv = DateTime.UtcNow.Ticks;
}

<link rel="stylesheet" href="~/Modules/CRS.EasyCreator/css/easycreator.css?v=@ecv" />

<form id="ec-form" asp-action="SaveSlots" method="post" data-compose-url="@composeUrl">
    <input type="hidden" asp-for="StoryId" />
    <input type="hidden" asp-for="TemplateKey" />

    <div class="section-header">
        <div class="title">
            <i class="fa fa-paint-brush"></i>
            @(Model.Title.NullEmpty() ?? Model.TemplateName)
            <small class="text-muted">— @Model.TemplateName</small>
        </div>
        <div class="options">
            <button type="submit" class="btn btn-primary">
                <i class="fa fa-save"></i> @T("Admin.Common.Save")
            </button>
            <button type="button" id="ec-detach-btn" class="btn btn-secondary" data-detached="false">
                <i class="fa fa-up-right-from-square"></i> @T("Plugins.CRS.EasyCreator.Editor.DetachPreview")
            </button>
            <button type="submit" class="btn btn-secondary"
                    asp-action="SelectTemplate" asp-route-id="@Model.StoryId" asp-route-key="">
                <i class="fa fa-th-large"></i> @T("Plugins.CRS.EasyCreator.Editor.ChangeTemplate")
            </button>
            <a asp-action="Edit" asp-route-id="@Model.StoryId" class="btn btn-secondary">
                <i class="fa fa-cog"></i> @T("Plugins.CRS.EasyCreator.Editor.MetaSettings")
            </a>
            <a asp-action="List" class="btn btn-secondary">@T("Common.Back")</a>
        </div>
    </div>

    <div class="ec-device-bar">
        <i class="fa fa-mobile-screen"></i>
        <input type="range" id="ec-vp-range" min="320" max="1440" step="1" value="390" />
        <i class="fa fa-desktop"></i>
        <span id="ec-vp-label" class="ec-vp-label"></span>
        <span class="ec-device-ticks">
            <button type="button" class="ec-tick" data-w="390">@T("Plugins.CRS.EasyCreator.Editor.Viewport.Phone")</button>
            <button type="button" class="ec-tick" data-w="834">@T("Plugins.CRS.EasyCreator.Editor.Viewport.Tablet")</button>
            <button type="button" class="ec-tick" data-w="1280">@T("Plugins.CRS.EasyCreator.Editor.Viewport.Desktop")</button>
        </span>
    </div>

    <div class="ec-slot-editor">
        <div id="ec-slot-form" class="ec-slot-form ec-vp-edit-phone">
            @for (var i = 0; i < Model.Slots.Count; i++)
            {
                var slot = Model.Slots[i];
                <input type="hidden" name="Slots.Index" value="@i" />
                <input type="hidden" asp-for="Slots[i].Name" />
                <input type="hidden" asp-for="Slots[i].Type" />

                <div class="ec-slot">
                    <label class="ec-slot-label">@slot.Label</label>

                    @if (slot.Type == SlotType.Image)
                    {
                        <editor asp-for="Slots[i].Phone.ImageFileId" />
                    }
                    else
                    {
                        <div class="ec-vp-pane ec-vp-pane--phone">
                            @switch (slot.Type)
                            {
                                case SlotType.Html:
                                    <html-editor asp-for="Slots[i].Phone.Html" />
                                    break;
                                case SlotType.Video:
                                    <input asp-for="Slots[i].Phone.Text" class="form-control" placeholder="@slot.Placeholder" />
                                    <small class="form-text text-muted">@T("Plugins.CRS.EasyCreator.Editor.VideoHint")</small>
                                    break;
                                case SlotType.Map:
                                    <input asp-for="Slots[i].Phone.Text" class="form-control" placeholder="@slot.Placeholder" />
                                    <small class="form-text text-muted">@T("Plugins.CRS.EasyCreator.Editor.MapHint")</small>
                                    break;
                                default:
                                    <input asp-for="Slots[i].Phone.Text" class="form-control" placeholder="@slot.Placeholder" />
                                    break;
                            }
                        </div>

                        <div class="ec-vp-pane ec-vp-pane--tablet">
                            <small class="ec-vp-override d-block mb-1 text-muted">@T("Plugins.CRS.EasyCreator.Editor.InheritHint")</small>
                            @switch (slot.Type)
                            {
                                case SlotType.Html:
                                    <html-editor asp-for="Slots[i].Tablet.Html" />
                                    break;
                                default:
                                    <input asp-for="Slots[i].Tablet.Text" class="form-control" placeholder="@slot.Placeholder" />
                                    break;
                            }
                        </div>

                        <div class="ec-vp-pane ec-vp-pane--desktop">
                            <small class="ec-vp-override d-block mb-1 text-muted">@T("Plugins.CRS.EasyCreator.Editor.InheritHint")</small>
                            @switch (slot.Type)
                            {
                                case SlotType.Html:
                                    <html-editor asp-for="Slots[i].Desktop.Html" />
                                    break;
                                default:
                                    <input asp-for="Slots[i].Desktop.Text" class="form-control" placeholder="@slot.Placeholder" />
                                    break;
                            }
                        </div>
                    }
                </div>
            }
        </div>

        <div class="ec-slot-preview">
            <div id="ec-preview-canvas" class="ec-preview-canvas">
                <div id="ec-preview-wrap" class="ec-preview-wrap">
                    <iframe id="ec-preview-frame"></iframe>
                </div>
            </div>
        </div>
    </div>
</form>

<script src="~/Modules/CRS.EasyCreator/js/easycreator/slot-editor.js?v=@ecv"></script>
