@model CRS.EasyCreator.Models.LayoutEditorModel

@{
    Layout = "_AdminLayout";
    ViewBag.Title = Model.Title.NullEmpty() ?? T("Plugins.CRS.EasyCreator.Editor.LayoutTitle").Value;
    var composeUrl = Url.Action("ComposeLayoutPreview", "StoryAdmin", new { area = "Admin" });
    var gridPrefsUrl = Url.Action("SaveGridPrefs", "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="SaveLayout" method="post" data-compose-url="@composeUrl" data-gridprefs-url="@gridPrefsUrl" data-theme-css="@ViewBag.ThemeCssUrl" data-open-node="@Model.OpenNodeId">
    <input type="hidden" asp-for="StoryId" />
    <input type="hidden" asp-for="OpenNodeId" />
    <input type="hidden" asp-for="Viewport" id="ec-vp-hidden" />
    <input type="hidden" asp-for="IsSlider" />
    <input type="hidden" asp-for="PageIndex" />
    <input type="hidden" asp-for="PageCount" />

    <div class="section-header">
        <div class="title">
            <i class="fa fa-paint-brush"></i>
            @(Model.Title.NullEmpty() ?? T("Plugins.CRS.EasyCreator.Editor.LayoutTitle").Value)
        </div>
        <div class="options">
            <button type="submit" name="Command" value="save" 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>
            <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>

    @if (Model.IsSlider)
    {
        <div class="ec-slider-bar">
            <span class="ec-slider-bar-title"><i class="fa fa-images"></i> @T("Plugins.CRS.EasyCreator.Editor.SliderTitle")</span>
            <label class="ec-sb-field">@T("Plugins.CRS.EasyCreator.Content.SliderInterval")
                <input type="number" asp-for="SliderInterval" min="0" max="60" class="form-control form-control-sm" />
            </label>
            <label class="ec-sb-field">@T("Plugins.CRS.EasyCreator.Editor.SliderDirection")
                <select asp-for="SliderDirection" class="form-control form-control-sm">
                    <option value="horizontal">@T("Plugins.CRS.EasyCreator.Editor.SliderDir.Horizontal")</option>
                    <option value="vertical">@T("Plugins.CRS.EasyCreator.Editor.SliderDir.Vertical")</option>
                </select>
            </label>
            <label class="ec-switch">
                <input type="checkbox" asp-for="FullWidth" />
                <span>@T("Plugins.CRS.EasyCreator.Editor.FullScreenWidth")</span>
            </label>
            <div class="ec-slider-pages">
                <span class="ec-sb-pages-label">@T("Plugins.CRS.EasyCreator.Editor.Pages")</span>
                @for (var i = 0; i < Model.PageCount; i++)
                {
                    <button type="submit" name="Command" value="gotopage:@i" class="btn btn-sm @(i == Model.PageIndex ? "btn-primary" : "btn-outline-secondary")" formnovalidate>@(i + 1)</button>
                }
                <button type="submit" name="Command" value="addpage" class="btn btn-sm btn-outline-secondary" formnovalidate title="@T("Plugins.CRS.EasyCreator.Editor.AddPage")"><i class="fa fa-plus"></i></button>
                @if (Model.PageCount > 1)
                {
                    <button type="submit" name="Command" value="removepage" class="btn btn-sm btn-outline-danger" formnovalidate data-ec-confirm="@T("Plugins.CRS.EasyCreator.Editor.RemovePageConfirm")" title="@T("Plugins.CRS.EasyCreator.Editor.RemovePage")"><i class="fa fa-trash"></i></button>
                }
            </div>
        </div>
    }

    <div class="ec-layout-toolbar">
        @if (!Model.IsSlider)
        {
            <label class="ec-switch">
                <input type="checkbox" asp-for="FullWidth" />
                <span>@T("Plugins.CRS.EasyCreator.Editor.FullWidth")</span>
            </label>
        }
        <label class="ec-switch">
            <input type="checkbox" asp-for="ParallaxScrolling" />
            <span>@T("Plugins.CRS.EasyCreator.Editor.Parallax")</span>
        </label>
        <label class="ec-switch" title="@T("Plugins.CRS.EasyCreator.Editor.ParallaxPlusHint")">
            <input type="checkbox" asp-for="ParallaxPlus" />
            <span>@T("Plugins.CRS.EasyCreator.Editor.ParallaxPlus")</span>
        </label>
        <div class="ec-savetpl">
            <input type="text" asp-for="NewTemplateName" class="form-control form-control-sm"
                   placeholder="@T("Plugins.CRS.EasyCreator.Editor.TemplateName")" />
            <button type="submit" name="Command" value="savetemplate" class="btn btn-secondary btn-sm" formnovalidate>
                <i class="fa fa-floppy-o"></i> @T("Plugins.CRS.EasyCreator.Editor.SaveAsTemplate")
            </button>
        </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="@(Model.Viewport > 0 ? Model.Viewport : 1280)" />
        <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">
            <div class="ec-tree">
                @Html.EditorFor(m => m.Root)
            </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/summernote-ext.js?v=@ecv"></script>
<script src="~/Modules/CRS.EasyCreator/js/easycreator/layout-editor.js?v=@ecv"></script>
