@model CRS.EasyCreator.Models.StyleModel

@{
    var units = new[] { "px", "%", "em", "rem", "vw", "vh" };
    var sizes = new[] { "cover", "contain", "auto" };
}

<div class="ec-style-form">

    <div class="ec-style-group">
        <div class="ec-style-group__title">@T("Plugins.CRS.EasyCreator.StyleGroup.Background")</div>
        <div class="ec-style-grid">
            <div class="ec-style-row ec-style-row--wide">
                <label class="ec-check">
                    <input asp-for="UseBgColor" type="checkbox" />
                    <span>@T("Plugins.CRS.EasyCreator.Style.BgColor")</span>
                </label>
                <input asp-for="BgColor" type="color" class="form-control form-control-sm ec-color" />
            </div>
            <div class="ec-style-row ec-style-row--wide">
                <label>@T("Plugins.CRS.EasyCreator.Style.BgOpacity")</label>
                <div class="ec-range">
                    <input asp-for="BgOpacity" type="range" min="0" max="1" step="0.05" data-out="bgop" />
                    <span class="ec-range-val" data-val="bgop"></span>
                </div>
            </div>
            @if (!Model.HideShared)
            {
                <div class="ec-style-row ec-style-row--wide">
                    <label class="ec-check">
                        <input asp-for="GlassEffect" type="checkbox" />
                        <span>@T("Plugins.CRS.EasyCreator.Style.GlassEffect")</span>
                    </label>
                    <small class="form-text text-muted">@T("Plugins.CRS.EasyCreator.Style.GlassEffectHint")</small>
                </div>
                <div class="ec-style-row ec-style-row--wide">
                    <label>@T("Plugins.CRS.EasyCreator.Style.BgImage")</label>
                    <editor asp-for="BgImageId" />
                </div>
                <div class="ec-style-row">
                    <label>@T("Plugins.CRS.EasyCreator.Style.BgImageSize")</label>
                    <select asp-for="BgImageSize" class="form-control form-control-sm">
                        <option value="">—</option>
                        @foreach (var sz in sizes) { <option value="@sz">@sz</option> }
                    </select>
                </div>
                <div class="ec-style-row">
                    <label>@T("Plugins.CRS.EasyCreator.Style.BgImagePosition")</label>
                    <input asp-for="BgImagePosition" class="form-control form-control-sm" placeholder="center" />
                </div>
            }
        </div>
    </div>

    <div class="ec-style-group">
        <div class="ec-style-group__title">@T("Plugins.CRS.EasyCreator.StyleGroup.Size")</div>
        <div class="ec-style-grid">
            <div class="ec-style-row">
                <label>@T("Plugins.CRS.EasyCreator.Style.MinWidth")</label>
                <div class="ec-dim">
                    <input asp-for="MinWidthValue" type="number" step="any" class="form-control form-control-sm" />
                    <select asp-for="MinWidthUnit" class="form-control form-control-sm">@foreach (var u in units) { <option value="@u">@u</option> }</select>
                </div>
            </div>
            <div class="ec-style-row">
                <label>@T("Plugins.CRS.EasyCreator.Style.MaxWidth")</label>
                <div class="ec-dim">
                    <input asp-for="MaxWidthValue" type="number" step="any" class="form-control form-control-sm" />
                    <select asp-for="MaxWidthUnit" class="form-control form-control-sm">@foreach (var u in units) { <option value="@u">@u</option> }</select>
                </div>
            </div>
            <div class="ec-style-row">
                <label>@T("Plugins.CRS.EasyCreator.Style.MinHeight")</label>
                <div class="ec-dim">
                    <input asp-for="MinHeightValue" type="number" step="any" class="form-control form-control-sm" />
                    <select asp-for="MinHeightUnit" class="form-control form-control-sm">@foreach (var u in units) { <option value="@u">@u</option> }</select>
                </div>
            </div>
            <div class="ec-style-row">
                <label>@T("Plugins.CRS.EasyCreator.Style.MaxHeight")</label>
                <div class="ec-dim">
                    <input asp-for="MaxHeightValue" type="number" step="any" class="form-control form-control-sm" />
                    <select asp-for="MaxHeightUnit" class="form-control form-control-sm">@foreach (var u in units) { <option value="@u">@u</option> }</select>
                </div>
            </div>
        </div>
    </div>

    <div class="ec-style-group">
        <div class="ec-style-group__title">@T("Plugins.CRS.EasyCreator.StyleGroup.Spacing")</div>
        <div class="ec-style-grid">
            <div class="ec-style-row">
                <label>@T("Plugins.CRS.EasyCreator.Style.Padding")</label>
                <div class="ec-dim">
                    <input asp-for="PaddingValue" type="number" step="any" class="form-control form-control-sm" />
                    <select asp-for="PaddingUnit" class="form-control form-control-sm">@foreach (var u in units) { <option value="@u">@u</option> }</select>
                </div>
            </div>
            <div class="ec-style-row">
                <label>@T("Plugins.CRS.EasyCreator.Style.Gap")</label>
                <div class="ec-dim">
                    <input asp-for="GapValue" type="number" step="any" class="form-control form-control-sm" />
                    <select asp-for="GapUnit" class="form-control form-control-sm">@foreach (var u in units) { <option value="@u">@u</option> }</select>
                </div>
            </div>
            <div class="ec-style-row ec-style-row--wide">
                <label>@T("Plugins.CRS.EasyCreator.Style.BorderRadius")</label>
                <div class="ec-range">
                    <input asp-for="BorderRadiusValue" type="range" min="0" max="64" step="1" data-out="rad" />
                    <span class="ec-range-val" data-val="rad"></span>
                </div>
                <input type="hidden" asp-for="BorderRadiusUnit" value="px" />
            </div>
        </div>
    </div>

</div>
