@using EgwCoreLib.Razor
<div class="col-lg-12 col-md-12">
    @if (!SashDimEditList.Contains(IndexSash))
    {
        <div class="d-flex justify-content-between align-items-center">
            <div class="col-md-12 col-lg-4 d-grid px-2 d-md-flex justify-content-md-start flex-wrap">
                <h6 class="fw-bold text-nowrap">Sash @(CurrSashGroup.SashList.Count == 1 ? "" : (IndexSash + 1))</h6>
            </div>
            <div class="col-md-12 col-lg-8 d-grid px-4 d-md-flex justify-content-md-end align-items-center flex-wrap">
                @if(!User && CurrSashGroup.SashList.Count > 1)
                {
                    <div class="dropdown px-4">
                        <button class="btn btn-outline-secondary dropdown-toggle btn-sm" type="button" @onclick="ToggleDropdown">
                            Copy content
                        </button>
                        <ul class="dropdown-menu @(isOpen ? "show" : "")" style="min-width:5rem; max-width:10rem">
                        @for (int k = 0; k <= CurrSashGroup.SashList.Count - 1; k++)
                        {
                            @if (k != IndexSash)
                            {
                                int IndexCopy = k;
                                int IndexModify = IndexSash;
                                <li>
                                    <button class="dropdown-item" @onclick="() => CopyContentSash(IndexCopy, IndexModify)">
                                        Sash @(k + 1)
                                    </button>
                                </li>
                            }
                        }
                        </ul>
                    </div>
                }
                <button class="btn btn-outline-secondary btn-sm" type="button" @onclick="() => doEdit(IndexSash)">
                    <i class="fa-solid fa-pen"></i>
                </button>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-5 col-md-12 my-2">
                <div class="input-group mb-2">
                    @if(User)
                    {
                        <span class="input-group-text">Tipology</span>
                        <input type="text" readonly class="form-control" value="@(CurrSashDim.OpeningTypeList.ElementAt(OpeningTypeIndex - 1))">
                    }
                    else
                    {
                        <label class="input-group-text">Tipology</label>
                        <select class="form-select" @bind="@OpeningTypeIndex">
                            @foreach (var openingType in CurrSashDim.OpeningTypeList)
                            {
                                <option value=@(openingType.Id)>@(openingType.Name)</option>
                            }
                        </select>
                    }
                </div>
            </div>
            <div class="col-lg-5 col-md-12 my-2">
                <div class="input-group mb-2">
                    <span class="input-group-text">Dimension</span>
                    <input type="number" class="form-control" @bind="@Dimension">
                    @* <InputDouble CssClass="form-control form-control text-end" Decimals="@CssDecimals()" Step="@CssStepNumber()" @bind-Value="@Dimension"></InputDouble>             *@
                    <select class="form-select" style="max-width:6rem; background-color:#e9ecef" @bind="@MeasureTypeIndex">
                        @foreach (var mType in CurrSashDim.MeasureTypeList)
                        {
                            <option value=@(mType.Id)>
                                @switch (mType.Name)
                                {
                                    case "Absolute":
                                        {
                                            <span class="input-group-text">mm</span>
                                            break;
                                        }
                                    case "Proportional":
                                        {
                                            <span class="input-group-text">*</span>
                                            break;
                                        }
                                    case "Percentage":
                                        {
                                            <span class="input-group-text">%</span>
                                            break;
                                        }
                                }
                            </option>
                        }
                    </select>
                </div>
            </div>
            <div class="col-lg-2 col-md-12 my-2">
                <div class="d-flex justify-content-start fs-5 mb-2">
                    <div class="px-1">
                        <input class="form-check-input ml-auto" type="checkbox" name="Handle" checked="@CurrSashDim.bHasHandle" @onclick="() => ChangeHandle()">
                    </div>
                    <div class="px-2">
                        <label class="form-check-label fs-6 text-dark">Handle</label>
                    </div>
                </div>
            </div>
        </div>
    }
    else
    {
        <div class="d-flex justify-content-between align-items-center mb-2">
            <div class="col-md-12 col-lg-6 d-grid px-2 d-md-flex justify-content-md-start flex-wrap">
                <h6 class="fw-bold text-nowrap">Sash @(CurrSashGroup.SashList.Count == 1 ? "" : (IndexSash + 1))</h6>
            </div>
            <div class="col-md-12 col-lg-6 d-grid px-4 d-md-flex justify-content-md-end align-items-center flex-wrap">
                @if (!User && !(CurrAnta.AreaList[0] is Split))
                {
                    <div class="col-md-4">
                        <button class="btn btn-outline-secondary btn-sm" @onclick="() => AddSplitToSash()">Split</button>
                    </div>
                }
                @if (!User && CurrAnta.AreaList[0].AreaList.Count == 0)
                {
                    <div class="col-md-4 px-2">
                        <button class="btn btn-outline-secondary btn-sm" @onclick="() => AddInglesinaToSash()">Inglesina</button>
                    </div>
                }
                <button type="button" class="btn-close" aria-label="Close" @onclick="() => ClosePopup(IndexSash)"></button>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-5 col-md-12 my-2">
                <div class="input-group mb-2">
                    @if (User)
                    {
                        <span class="input-group-text">Tipology</span>
                        <input type="text" readonly class="form-control" value="@(CurrSashDim.OpeningTypeList.ElementAt(OpeningTypeIndex - 1))">
                    }
                    else
                    {
                        <label class="input-group-text">Tipology</label>
                        <select class="form-select" @bind="@OpeningTypeIndex">
                            @foreach (var openingType in CurrSashDim.OpeningTypeList)
                            {
                                <option value=@(openingType.Id)>@(openingType.Name)</option>
                            }
                        </select>
                    }
                </div>
            </div>
            <div class="col-lg-5 col-md-12 my-2">
                <div class="input-group mb-2">
                    <span class="input-group-text">Dimension</span>
                    <input type="number" class="form-control" @bind="@Dimension">
                    @* <InputDouble CssClass="form-control form-control text-end" Decimals="@CssDecimals()" Step="@CssStepNumber()" @bind-Value="@Dimension"></InputDouble>             *@
                    <select class="form-select" style="max-width:6rem; background-color:#e9ecef" @bind="@MeasureTypeIndex">
                        @foreach (var mType in CurrSashDim.MeasureTypeList)
                        {
                            <option value=@(mType.Id)>
                                @switch (mType.Name)
                                {
                                    case "Absolute":
                                        {
                                            <span class="input-group-text">mm</span>
                                            break;
                                        }
                                    case "Proportional":
                                        {
                                            <span class="input-group-text">*</span>
                                            break;
                                        }
                                    case "Percentage":
                                        {
                                            <span class="input-group-text">%</span>
                                            break;
                                        }
                                }
                            </option>
                        }
                    </select>
                </div>
            </div>
            <div class="col-lg-2 col-md-12 my-2">
                <div class="d-flex justify-content-start fs-5 mb-2">
                    <div class="px-1">
                        <input class="form-check-input ml-auto" type="checkbox" name="Handle" checked="@CurrSashDim.bHasHandle" @onclick="() => ChangeHandle()">
                    </div>
                    <div class="px-2">
                        <label class="form-check-label fs-6 text-dark">Handle</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-12">
                <div class="row justify-content-between align-items-center" style="min-height: 2.5rem;">
                    <div class="col-md-4 d-flex justify-content-start align-items-center">
                        <h6>Joints</h6>
                    </div>
                    @if (!User)
                    {
                        <div class="col-md-8 d-flex justify-content-end align-items-center">
                            <div class="btn-group" role="group">
                                <button type="button" class="@ButtonJointCss(Json.WindowConst.Joints.ANGLED)" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.ANGLED)">Angled</button>
                                <button type="button" class="@ButtonJointCss(Json.WindowConst.Joints.FULL_H)" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.FULL_H)">Horizontal</button>
                                <button type="button" class="@ButtonJointCss(Json.WindowConst.Joints.FULL_V)" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.FULL_V)">Vertical</button>
                            </div>
                        </div>
                        @* <div class="col d-flex justify-content-end align-items-center">
                            <button class="btn btn-outline-secondary btn-sm" type="button" @onclick="() => ChangeAll()">
                                ChangeAll
                            </button>
                        </div>
                        @if (ForceChangeAll)
                        {
                            <div class="row py-2">
                                <div class="col-md-4">
                                    <button class="@ButtonJointCss(Json.WindowConst.Joints.ANGLED)" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.ANGLED)">Angled</button>
                                </div>
                                <div class="col-md-4">
                                    <button class="@ButtonJointCss(Json.WindowConst.Joints.FULL_H)" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.FULL_H)">Horizontal</button>
                                </div>
                                <div class="col-md-4">
                                    <button class="@ButtonJointCss(Json.WindowConst.Joints.FULL_V)" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.FULL_V)">Vertical</button>
                                </div>
                            </div>
                        } *@
                        @* <div class="col d-flex justify-content-end align-items-center">
                            <div class="dropdown">
                                <button class="btn btn-outline-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown">
                                    Change
                                </button>
                                <ul class="dropdown-menu" style="min-width:5rem; max-width:10rem">
                                    <li><button class="@ButtonJointCss(Json.WindowConst.Joints.ANGLED)" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.ANGLED)">Angled</button></li>
                                    <li><button class="@ButtonJointCss(Json.WindowConst.Joints.FULL_H)" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.FULL_H)">Horizontal</button></li>
                                    <li><button class="@ButtonJointCss(Json.WindowConst.Joints.FULL_V)" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.FULL_V)">Vertical</button></li>
                                </ul>
                            </div>
                        </div> *@
                    }
                </div>
                @foreach (Joint joint in CurrSashDim.JointList)
                {
                    <EditJoint CurrRec="joint" EC_Update="UpdateJoint"></EditJoint>
                }
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="row justify-content-between align-items-center" style="min-height: 2.5rem;">
                    <div class="col d-flex justify-content-start align-items-center">
                        <h6>Element</h6>
                    </div>
                </div>
                <div class="input-group mb-2">
                    @foreach (var element in CurrSashDim.ElementDimensionList)
                    {
                       <EditElement CurrRec="element" EC_Update="UpdateElement"></EditElement>
                    }
                </div>
            </div>
        </div>
    }
</div>