@model CRS.EasyCreator.Models.NodeModel
@using CRS.EasyCreator.Models
@using Smartstore.Web.Rendering
@using Microsoft.AspNetCore.Mvc.Rendering

@{
    var isRoot = Model.Id == "root";
    var isContainer = Model.IsContainer;
    var nid = Model.Id;
    var picThumbs = ViewBag.PicThumbs as IDictionary<string, List<PicThumbVm>>;
    var mmUrl = Url.Action("Index", "CrsEasyCreatorMedia", new { area = "Admin", popup = true, pickMode = true, multiSelect = true, path = "file", typeFilter = "image" });
    var picUploadUrl = Url.Action("Upload", "Media", new { area = "Admin", isTransient = true, path = "file", typeFilter = "image" });

    var toolbox = new[]
    {
        ("html", "fa-code"),
        ("image", "fa-image"),
        ("video", "fa-play-circle"),
        ("googlemap", "fa-map-marker"),
        ("buttonlist", "fa-link"),
        ("pdf", "fa-file-pdf-o"),
        ("filedownload", "fa-download"),
        ("topic", "fa-file-text-o"),
        ("story", "fa-clone"),
        ("productlist", "fa-cubes"),
        ("warengruppe", "fa-sitemap"),
        ("hersteller", "fa-industry"),
        ("iframe", "fa-window-maximize"),
        ("newsletter", "fa-envelope"),
        ("pictureslider", "fa-images")
    };

    var ecTopics = ViewBag.EcTopics as IEnumerable<SelectListItem> ?? Enumerable.Empty<SelectListItem>();
    var ecStories = ViewBag.EcStories as IEnumerable<SelectListItem> ?? Enumerable.Empty<SelectListItem>();
}

@if (isRoot)
{
    <input type="hidden" asp-for="Id" class="ec-node-id" />
    <input type="hidden" asp-for="Kind" />
    <input type="hidden" asp-for="Type" />

    <div class="ec-toolbox">
        <span class="ec-toolbox-label">@T("Plugins.CRS.EasyCreator.Editor.AddPanel")</span>
        <div class="ec-tool-grid">
            @foreach (var (type, icon) in toolbox)
            {
                <button type="submit" name="Command" value="add:@nid:@type" class="ec-tool-btn" formnovalidate title="@T("Plugins.CRS.EasyCreator.PanelType." + type)">
                    <i class="fa @icon"></i>
                    <span>@T("Plugins.CRS.EasyCreator.PanelType." + type)</span>
                </button>
            }
        </div>
    </div>

    <div class="ec-acc" id="ec-acc">
        <div class="ec-acc-item ec-acc-item--bg" data-node-id="root">
            <div class="ec-acc-head">
                <i class="fa fa-image"></i>
                <span class="ec-acc-title">@T("Plugins.CRS.EasyCreator.Editor.BackgroundTitle")</span>
            </div>
            <div class="ec-acc-body">
                <div class="ec-grid-toggle">
                    <label class="ec-check">
                        <input type="checkbox" name="ShowGrid" value="true" id="ec-grid-show" @(ViewBag.EditorShowGrid == true ? "checked" : null) />
                        <input type="hidden" name="ShowGrid" value="false" />
                        <span>@T("Plugins.CRS.EasyCreator.Editor.ShowGrid")</span>
                    </label>
                    <label class="ec-grid-size">@T("Plugins.CRS.EasyCreator.Editor.GridSize")
                        <input type="number" name="GridSize" id="ec-grid-size" min="4" max="200" value="@(ViewBag.EditorGridSize ?? 25)" class="form-control form-control-sm" />
                    </label>
                </div>
                <div class="ec-style-stages">
                    <div class="ec-stage-hint">@T("Plugins.CRS.EasyCreator.Editor.PerStageStyleHint")</div>
                    <div class="ec-style-stage ec-stage-active" data-stage="desktop">
                        <div class="ec-stage-label"><i class="fa fa-desktop"></i> @T("Plugins.CRS.EasyCreator.Editor.Viewport.Desktop")</div>
                        @Html.EditorFor(m => m.Style)
                    </div>
                    <div class="ec-style-stage" data-stage="tablet">
                        <div class="ec-stage-label"><i class="fa fa-tablet-screen-button"></i> @T("Plugins.CRS.EasyCreator.Editor.Viewport.Tablet")</div>
                        @Html.EditorFor(m => m.TabletStyle)
                    </div>
                    <div class="ec-style-stage" data-stage="phone">
                        <div class="ec-stage-label"><i class="fa fa-mobile-screen"></i> @T("Plugins.CRS.EasyCreator.Editor.Viewport.Phone")</div>
                        @Html.EditorFor(m => m.PhoneStyle)
                    </div>
                </div>
            </div>
        </div>

        @for (var ki = 0; ki < Model.Children.Count; ki++)
        {
            @Html.EditorFor(m => m.Children[ki])
        }
    </div>
}
else
{
    <div class="ec-acc-item" data-node-id="@nid">
        <input type="hidden" asp-for="Id" class="ec-node-id" />
        <input type="hidden" asp-for="Kind" />
        <input type="hidden" asp-for="Type" />
        <input type="hidden" asp-for="AnchorH" />
        <input type="hidden" asp-for="AnchorV" />
        <input type="hidden" asp-for="ColSpan" />
        <input type="hidden" asp-for="RowSpan" />

        <div class="ec-acc-head" draggable="true">
            <span class="ec-acc-drag" title="@T("Plugins.CRS.EasyCreator.Editor.DragOrder")">&#x2630;</span>
            <i class="fa @(isContainer ? "fa-object-group" : "fa-cube")"></i>
            <span class="ec-acc-title">@T("Plugins.CRS.EasyCreator.PanelType." + Model.Type)</span>
            <span class="ec-acc-actions">
                <button type="submit" name="Command" value="remove:@nid" class="btn btn-light btn-sm text-danger" formnovalidate data-ec-confirm="@T("Plugins.CRS.EasyCreator.Editor.ConfirmRemovePanel")" title="@T("Plugins.CRS.EasyCreator.Editor.RemovePanel")"><i class="fa fa-trash"></i></button>
            </span>
        </div>

        <div class="ec-acc-body">
            @if (!isContainer)
            {
                <div class="ec-node-content">
                    @switch ((Model.Type ?? string.Empty).ToLowerInvariant())
                    {
                        case "html":
                            @(Html.LocalizedEditor<NodeModel, NodeLocalizedModel>("ec-html-" + nid,
                                @<div>
                                    <input asp-for="@Model.Locales[item].LanguageId" type="hidden" />
                                    <html-editor asp-for="@Model.Locales[item].Html" />
                                </div>,
                                @<html-editor asp-for="Content.Html" />))
                            break;
                        case "text":
                            <textarea asp-for="Content.Text" class="form-control" rows="3"></textarea>
                            break;
                        case "image":
                        case "logo":
                            <editor asp-for="Content.ImageId" />
                            <input asp-for="Content.Alt" class="form-control form-control-sm mt-1" placeholder="@T("Plugins.CRS.EasyCreator.Content.Alt")" />
                            <input asp-for="Content.Href" class="form-control form-control-sm mt-1" placeholder="@T("Plugins.CRS.EasyCreator.Content.LinkHref")" />
                            <label class="ec-slot-label mt-1">@T("Plugins.CRS.EasyCreator.Content.ImageFit")</label>
                            <select asp-for="Content.ImageFit" class="form-control form-control-sm">
                                <option value="original">@T("Plugins.CRS.EasyCreator.ImageFit.Original")</option>
                                <option value="fit">@T("Plugins.CRS.EasyCreator.ImageFit.Fit")</option>
                                <option value="zoom">@T("Plugins.CRS.EasyCreator.ImageFit.Zoom")</option>
                            </select>
                            break;
                        case "video":
                        case "youtube":
                            <label class="ec-slot-label">@T("Plugins.CRS.EasyCreator.Content.VideoSource")</label>
                            <select asp-for="Content.VideoSource" class="form-control form-control-sm">
                                <option value="youtube">@T("Plugins.CRS.EasyCreator.VideoSource.Youtube")</option>
                                <option value="file">@T("Plugins.CRS.EasyCreator.VideoSource.File")</option>
                            </select>
                            <input asp-for="Content.Url" class="form-control mt-1" placeholder="@T("Plugins.CRS.EasyCreator.Content.VideoUrl")" />
                            <small class="form-text text-muted">@T("Plugins.CRS.EasyCreator.Editor.VideoHint")</small>
                            <label class="ec-slot-label mt-1">@T("Plugins.CRS.EasyCreator.Content.VideoFile")</label>
                            <editor asp-for="Content.FileId" />
                            break;
                        case "googlemap":
                        case "map":
                            <input asp-for="Content.Query" class="form-control" placeholder="@T("Plugins.CRS.EasyCreator.Content.MapQuery")" />
                            <select asp-for="Content.MapType" class="form-control form-control-sm mt-1">
                                <option value="roadmap">@T("Plugins.CRS.EasyCreator.MapType.Roadmap")</option>
                                <option value="satellite">@T("Plugins.CRS.EasyCreator.MapType.Satellite")</option>
                            </select>
                            <select asp-for="Content.MapClick" class="form-control form-control-sm mt-1">
                                <option value="none">@T("Plugins.CRS.EasyCreator.MapClick.None")</option>
                                <option value="maps">@T("Plugins.CRS.EasyCreator.MapClick.Maps")</option>
                            </select>
                            <small class="form-text text-muted">@T("Plugins.CRS.EasyCreator.Editor.MapHint")</small>
                            break;
                        case "buttonlist":
                            <div class="ec-btnlist-edit">
                                @Html.EditorFor(m => m.Content.Buttons[0])
                            </div>
                            break;
                        case "pdf":
                            <editor asp-for="Content.FileId" />
                            break;
                        case "filedownload":
                            <editor asp-for="Content.FileId" />
                            <label class="ec-slot-label mt-1">@T("Plugins.CRS.EasyCreator.Content.FileLabel")</label>
                            @(Html.LocalizedEditor<NodeModel, NodeLocalizedModel>("ec-label-" + nid,
                                @<div>
                                    <input asp-for="@Model.Locales[item].LanguageId" type="hidden" />
                                    <input asp-for="@Model.Locales[item].Html" class="form-control form-control-sm" placeholder="@T("Plugins.CRS.EasyCreator.Content.FileLabel")" />
                                </div>,
                                @<input asp-for="Content.Html" class="form-control form-control-sm" placeholder="@T("Plugins.CRS.EasyCreator.Content.FileLabel")" />))
                            break;
                        case "topic":
                            <label class="ec-slot-label">@T("Plugins.CRS.EasyCreator.Content.Topic")</label>
                            <select asp-for="Content.TopicId" asp-items="ecTopics" class="form-control form-control-sm">
                                <option value="">@T("Common.Unspecified")</option>
                            </select>
                            break;
                        case "story":
                            <label class="ec-slot-label">@T("Plugins.CRS.EasyCreator.Content.EmbedStory")</label>
                            <select asp-for="Content.EmbedStoryId" asp-items="ecStories" class="form-control form-control-sm">
                                <option value="">@T("Common.Unspecified")</option>
                            </select>
                            break;
                        case "iframe":
                            <label class="ec-slot-label">@T("Plugins.CRS.EasyCreator.Content.FrameUrl")</label>
                            <input asp-for="Content.Url" class="form-control form-control-sm" placeholder="https://" />
                            <small class="form-text text-muted">@T("Plugins.CRS.EasyCreator.Editor.FrameHint")</small>
                            break;
                        case "newsletter":
                            <div class="text-muted small">@T("Plugins.CRS.EasyCreator.Editor.NewsletterHint")</div>
                            break;
                        case "pictureslider":
                            <label class="ec-slot-label">@T("Plugins.CRS.EasyCreator.Content.SliderMode")</label>
                            <select asp-for="Content.SliderMode" class="form-control form-control-sm">
                                <option value="strip">@T("Plugins.CRS.EasyCreator.SliderMode.Strip")</option>
                                <option value="single">@T("Plugins.CRS.EasyCreator.SliderMode.Single")</option>
                            </select>
                            <label class="ec-slot-label mt-1">@T("Plugins.CRS.EasyCreator.Content.ImageFit")</label>
                            <select asp-for="Content.ImageFit" class="form-control form-control-sm">
                                <option value="zoom">@T("Plugins.CRS.EasyCreator.ImageFit.Zoom")</option>
                                <option value="fit">@T("Plugins.CRS.EasyCreator.ImageFit.Fit")</option>
                            </select>
                            <div class="form-check mt-2">
                                <input asp-for="Content.AllowMaximize" type="checkbox" class="form-check-input" id="ec-pic-max-@nid" />
                                <label class="form-check-label" for="ec-pic-max-@nid">@T("Plugins.CRS.EasyCreator.Content.AllowMaximize")</label>
                            </div>
                            <label class="ec-slot-label mt-1">@T("Plugins.CRS.EasyCreator.Content.SliderImages")</label>
                            <input asp-for="Content.ImageIdsCsv" type="hidden" id="ec-pic-csv-@nid" />
                            <div class="ec-pic-thumbs" id="ec-pic-thumbs-@nid">
                                @if (picThumbs != null && picThumbs.TryGetValue(nid, out var thumbs))
                                {
                                    foreach (var t in thumbs)
                                    {
                                        <div class="ec-pic-thumb" data-id="@t.Id">
                                            <img src="@t.Url" alt="" />
                                            <button type="button" class="ec-pic-thumb-rm" title="@T("Admin.Common.Delete")">&times;</button>
                                        </div>
                                    }
                                }
                            </div>
                            <div class="ec-pic-dropzone" data-target="ec-pic-csv-@nid" data-thumbs="ec-pic-thumbs-@nid" data-upload-url="@picUploadUrl">
                                <input type="file" multiple accept="image/*" class="ec-pic-file" hidden />
                                <i class="far fa-images"></i> <span>@T("Plugins.CRS.EasyCreator.Content.DropHint")</span>
                            </div>
                            <button type="button" class="btn btn-secondary btn-sm mt-1 ec-pic-mm"
                                    data-url="@mmUrl" data-target="ec-pic-csv-@nid" data-thumbs="ec-pic-thumbs-@nid">
                                <i class="far fa-images"></i> @T("Plugins.CRS.EasyCreator.Content.FromMediaManager")
                            </button>
                            <label class="ec-slot-label mt-1">@T("Plugins.CRS.EasyCreator.Content.SliderInterval")</label>
                            <input asp-for="Content.SliderInterval" type="number" min="0" max="60" class="form-control form-control-sm" />
                            break;
                        case "productlist":
                            <label class="ec-slot-label">@T("Plugins.CRS.EasyCreator.Content.Picking")</label>
                            <select asp-for="Content.PickingType" class="form-control form-control-sm">
                                <option value="manual">@T("Plugins.CRS.EasyCreator.Picking.Manual")</option>
                                <option value="latest">@T("Plugins.CRS.EasyCreator.Picking.Latest")</option>
                                <option value="top">@T("Plugins.CRS.EasyCreator.Picking.Top")</option>
                                <option value="random">@T("Plugins.CRS.EasyCreator.Picking.Random")</option>
                            </select>
                            <label class="ec-slot-label mt-1">@T("Plugins.CRS.EasyCreator.Content.Products")</label>
                            <div class="input-group input-group-sm">
                                <input asp-for="Content.ManualProductIdsCsv" id="ec-prod-@nid" class="form-control" placeholder="z.B. 12,34,56" />
                                <entity-picker entity-type="product" target-input-selector="#ec-prod-@nid" delimiter="," append-mode="true" caption="@T("Plugins.CRS.EasyCreator.Content.Products")" />
                            </div>
                            <label class="ec-check mt-1">
                                <input asp-for="Content.AsSlider" type="checkbox" />
                                <span>@T("Plugins.CRS.EasyCreator.Content.AsSlider")</span>
                            </label>
                            <label class="ec-slot-label mt-1">@T("Plugins.CRS.EasyCreator.Content.SliderInterval")</label>
                            <input asp-for="Content.SliderInterval" type="number" min="0" max="60" class="form-control form-control-sm" />
                            <div class="ec-catalog-nums">
                                <label>@T("Plugins.CRS.EasyCreator.Content.MaxItems")<input asp-for="Content.MaxItems" type="number" min="1" max="60" class="form-control form-control-sm" /></label>
                                <label>@T("Plugins.CRS.EasyCreator.Content.Columns")<input asp-for="Content.Columns" type="number" min="1" max="6" class="form-control form-control-sm" /></label>
                                <label>@T("Plugins.CRS.EasyCreator.Content.Rows")<input asp-for="Content.Rows" type="number" min="0" max="20" class="form-control form-control-sm" /></label>
                            </div>
                            break;
                        case "warengruppe":
                            <label class="ec-slot-label">@T("Plugins.CRS.EasyCreator.Content.Category")</label>
                            <div class="input-group input-group-sm">
                                <input asp-for="Content.CategoryId" id="ec-cat-@nid" class="form-control" />
                                <entity-picker entity-type="category" target-input-selector="#ec-cat-@nid" max-items="1" caption="@T("Plugins.CRS.EasyCreator.Content.Category")" />
                            </div>
                            <label class="ec-slot-label mt-1">@T("Plugins.CRS.EasyCreator.Content.Picking")</label>
                            <select asp-for="Content.PickingType" class="form-control form-control-sm">
                                <option value="random">@T("Plugins.CRS.EasyCreator.Picking.Random")</option>
                                <option value="deeprandom">@T("Plugins.CRS.EasyCreator.Picking.RandomDeep")</option>
                                <option value="top">@T("Plugins.CRS.EasyCreator.Picking.Top")</option>
                                <option value="deeptop">@T("Plugins.CRS.EasyCreator.Picking.TopDeep")</option>
                            </select>
                            <label class="ec-check mt-1">
                                <input asp-for="Content.AsSlider" type="checkbox" />
                                <span>@T("Plugins.CRS.EasyCreator.Content.AsSlider")</span>
                            </label>
                            <label class="ec-slot-label mt-1">@T("Plugins.CRS.EasyCreator.Content.SliderInterval")</label>
                            <input asp-for="Content.SliderInterval" type="number" min="0" max="60" class="form-control form-control-sm" />
                            <div class="ec-catalog-nums">
                                <label>@T("Plugins.CRS.EasyCreator.Content.MaxItems")<input asp-for="Content.MaxItems" type="number" min="1" max="60" class="form-control form-control-sm" /></label>
                                <label>@T("Plugins.CRS.EasyCreator.Content.Columns")<input asp-for="Content.Columns" type="number" min="1" max="6" class="form-control form-control-sm" /></label>
                                <label>@T("Plugins.CRS.EasyCreator.Content.Rows")<input asp-for="Content.Rows" type="number" min="0" max="20" class="form-control form-control-sm" /></label>
                            </div>
                            break;
                        case "hersteller":
                            <label class="ec-slot-label">@T("Plugins.CRS.EasyCreator.Content.Manufacturers")</label>
                            <div class="input-group input-group-sm">
                                <input asp-for="Content.ManufacturerIdsCsv" id="ec-man-@nid" class="form-control" placeholder="z.B. 3,7" />
                                <entity-picker entity-type="manufacturer" target-input-selector="#ec-man-@nid" delimiter="," append-mode="true" caption="@T("Plugins.CRS.EasyCreator.Content.Manufacturers")" />
                            </div>
                            <small class="form-text text-muted">@T("Plugins.CRS.EasyCreator.Editor.HerstellerHint")</small>
                            <label class="ec-check mt-1">
                                <input asp-for="Content.AsSlider" type="checkbox" />
                                <span>@T("Plugins.CRS.EasyCreator.Content.AsSlider")</span>
                            </label>
                            <label class="ec-slot-label mt-1">@T("Plugins.CRS.EasyCreator.Content.SliderInterval")</label>
                            <input asp-for="Content.SliderInterval" type="number" min="0" max="60" class="form-control form-control-sm" />
                            <div class="ec-catalog-nums">
                                <label>@T("Plugins.CRS.EasyCreator.Content.Columns")<input asp-for="Content.Columns" type="number" min="1" max="6" class="form-control form-control-sm" /></label>
                            </div>
                            break;
                        default:
                            <div class="text-muted small">@Model.Type</div>
                            break;
                    }
                </div>
            }

            <details class="ec-ed-options ec-ed-pos">
                <summary><i class="fa fa-arrows"></i> @T("Plugins.CRS.EasyCreator.Editor.Position")</summary>
                <div class="ec-pos-stages">
                    <input type="hidden" asp-for="ClampToGrid" />
                    <small class="text-muted d-block mb-1">@T("Plugins.CRS.EasyCreator.Editor.PerStageHint")</small>

                    <div class="ec-pos-row" data-stage="desktop">
                        <span class="ec-pos-stage">@T("Plugins.CRS.EasyCreator.Editor.Viewport.Desktop")</span>
                        <label>X<input asp-for="X" type="number" step="any" class="form-control form-control-sm" /></label>
                        <label>Y<input asp-for="Y" type="number" step="any" class="form-control form-control-sm" /></label>
                        <label>B<input asp-for="W" type="number" step="any" class="form-control form-control-sm" /></label>
                        <label>H<input asp-for="H" type="number" step="any" class="form-control form-control-sm" /></label>
                    </div>
                    <div class="ec-pos-row" data-stage="tablet">
                        <span class="ec-pos-stage">@T("Plugins.CRS.EasyCreator.Editor.Viewport.Tablet")</span>
                        <label>X<input asp-for="TabletX" type="number" step="any" class="form-control form-control-sm" /></label>
                        <label>Y<input asp-for="TabletY" type="number" step="any" class="form-control form-control-sm" /></label>
                        <label>B<input asp-for="TabletW" type="number" step="any" class="form-control form-control-sm" /></label>
                        <label>H<input asp-for="TabletH" type="number" step="any" class="form-control form-control-sm" /></label>
                    </div>
                    <div class="ec-pos-row" data-stage="phone">
                        <span class="ec-pos-stage">@T("Plugins.CRS.EasyCreator.Editor.Viewport.Phone")</span>
                        <label>X<input asp-for="PhoneX" type="number" step="any" class="form-control form-control-sm" /></label>
                        <label>Y<input asp-for="PhoneY" type="number" step="any" class="form-control form-control-sm" /></label>
                        <label>B<input asp-for="PhoneW" type="number" step="any" class="form-control form-control-sm" /></label>
                        <label>H<input asp-for="PhoneH" type="number" step="any" class="form-control form-control-sm" /></label>
                    </div>
                    <div class="ec-pos-row">
                        <span class="ec-pos-stage">Z / @T("Plugins.CRS.EasyCreator.Editor.Rotation")</span>
                        <label>Z<input asp-for="ZIndex" type="number" class="form-control form-control-sm" /></label>
                        <label>&deg;<input asp-for="Rotation" type="number" step="any" class="form-control form-control-sm" /></label>
                    </div>
                    <div class="ec-pos-row">
                        <label class="ec-check">
                            <input asp-for="HoverZoom" type="checkbox" />
                            <span>@T("Plugins.CRS.EasyCreator.Editor.HoverZoom")</span>
                        </label>
                    </div>
                </div>
            </details>

            <details class="ec-ed-options">
                <summary><i class="fa fa-sliders"></i> @T("Plugins.CRS.EasyCreator.Editor.Options")</summary>
                <div class="ec-style-stages">
                    <div class="ec-stage-hint">@T("Plugins.CRS.EasyCreator.Editor.PerStageStyleHint")</div>
                    <div class="ec-style-stage ec-stage-active" data-stage="desktop">
                        <div class="ec-stage-label"><i class="fa fa-desktop"></i> @T("Plugins.CRS.EasyCreator.Editor.Viewport.Desktop")</div>
                        @Html.EditorFor(m => m.Style)
                    </div>
                    <div class="ec-style-stage" data-stage="tablet">
                        <div class="ec-stage-label"><i class="fa fa-tablet-screen-button"></i> @T("Plugins.CRS.EasyCreator.Editor.Viewport.Tablet")</div>
                        @Html.EditorFor(m => m.TabletStyle)
                    </div>
                    <div class="ec-style-stage" data-stage="phone">
                        <div class="ec-stage-label"><i class="fa fa-mobile-screen"></i> @T("Plugins.CRS.EasyCreator.Editor.Viewport.Phone")</div>
                        @Html.EditorFor(m => m.PhoneStyle)
                    </div>
                </div>
            </details>
        </div>
    </div>
}
