@using EgwCoreLib.Razor

<div class="col-lg-12 col-md-12">
    <div class="d-flex align-items-center mb-2">
        <h6 class="fw-bold text-nowrap mb-0 w-100 text-start">@Traduci("CWAreaS_Sash") @(CurrSashGroup.SashList.Count == 1 ? "" : (IndexSash + 1))</h6>
        <div class="d-flex g-2 ms-auto">
            @if (!SashDimEditList.Contains(IndexSash))
            {
                @if(!BaseUser && CurrSashGroup.SashList.Count > 1)
                {
                    <div class="dropdown px-4 w-100">
                        <button class="btn btn-outline-secondary dropdown-toggle btn-sm text-nowrap"
                                type="button"
                                @onclick="ToggleDropdown"
                                aria-expanded="@isOpen">
                            @Traduci("CWAreaS_CopyContent")
                        </button>
                        <ul class="dropdown-menu w-100 @(isOpen ? "show" : "")"
                            style="min-width:0rem; 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)">
                                        @Traduci("CWAreaS_Sash") @(k + 1)
                                    </button>
                                </li>
                            }
                        }
                        </ul>
                    </div>
                }
                <button class="btn btn-outline-secondary btn-sm text-nowrap" type="button" @onclick="() => doEdit(IndexSash)">
                    <i class="fa-solid fa-pen"></i>
                </button>
            }
            else
            {
                @if (!BaseUser && (!(CurrAnta.AreaList[0] is Split) || CurrAnta.AreaList[0].AreaList.Count == 0))
                {
                    <div class="dropdown px-4 w-100">
                        <button class="btn btn-outline-secondary dropdown-toggle btn-sm"
                                type="button"
                                @onclick="ToggleDropdown"
                                aria-expanded="@isOpen">
                            @Traduci("CWAreaS_Add")
                        </button>
                        <ul class="dropdown-menu w-100 @(isOpen ? "show" : "")"
                            style="min-width:0rem; max-width:10rem">
                            @if (!(CurrAnta.AreaList[0] is Split))
                            {
                                <li>
                                    <button class="dropdown-item" @onclick="() => AddSplitToSash()">
                                        @Traduci("CWAreaS_AddSplit")
                                    </button>
                                </li>
                            }
                            @if (CurrAnta.AreaList[0].AreaList.Count == 0)
                            {
                                <li>
                                    <button class="dropdown-item" @onclick="() => AddInglesinaToSash()">
                                        @Traduci("CWAreaS_AddInglesina")
                                    </button>
                                </li>
                            }
                        </ul>
                    </div>
                }
                <button type="button" class="btn-close" aria-label="Close" @onclick="() => ClosePopup(IndexSash)"></button> 
            }
        </div>
    </div>
    <div class="d-flex align-items-center gap-4 mb-2">
        @if (BaseUser)
        {
            <button class="btn btn-outline-secondary align-items-center gap-2"
                    type="button"
                    style="background-color: @(isOpenDropdown ? "#f8f9fa" : "#ffffff"); color: @(isOpenDropdown ? "#333333" : "");">
                <span class="d-flex align-items-center">
                    <img class="img-fluid" src="@GetImageOpeningPath(CurrOpening)" title="@(CurrOpening)" width="50" />
                </span>
            </button>
        }
        else
        {
            <div class="dropdown" @onfocusout="HandleFocusOut" tabindex="0">
                <button class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center gap-2"
                        type="button"
                        @onclick="ToggleDropdownOpening"
                        aria-expanded="@isOpenDropdown">
                    <span class="d-flex align-items-center">
                        <img class="img-fluid" src="@GetImageOpeningPath(CurrOpening)" title="@(CurrOpening)" width="50" />
                    </span>
                </button>
                <ul class="dropdown-menu p-2 @(isOpenDropdown ? "show" : "")"
                    style="position: absolute; min-width: 20em;">
                    <div class="row g-2 row-cols-4 m-0">
                        @foreach (var openingType in CurrSashDim.OpeningTypeList)
                        {
                            <div class="col p-0">
                                <button type="button"
                                        class="dropdown-item d-flex flex-column align-items-center justify-content-center p-2 rounded text-center h-100 @ButtonOpeningCss(openingType.Id)"
                                        @onclick="() => SelOpeningSash(openingType.Id, openingType.Name)">
                                    <img class="img-fluid" src="@GetImageOpeningPath(openingType.Name)"
                                            title="@(openingType.Name)" width="100" />
                                </button>
                            </div>
                        }
                    </div>
                </ul>
            </div>
        }
        <div class="input-group w-auto">
            <span class="input-group-text">@Traduci("CWAreaS_Dimension")</span>
            @if(BaseUser)
            {
                <input type="number" readonly class="form-control" value="@Dimension" style="min-width:2rem; max-width:6em;">
                <span class="input-group-text" style="width:6rem; background-color:#e9ecef">
                    @(CurrSashDim.SelMeasureType.ToString() switch
                    {
                        "Absolute" => "mm",
                        "Proportional" => "*",
                        "Percentage" => "%",
                        _ => CurrSashDim.SelMeasureType.ToString()
                    })
                </span>
            }
            else
            {
                <input type="number" class="form-control" style="min-width:2rem; max-width:6em;" @bind="@Dimension">
                <select class="form-select" style="max-width:6rem; background-color:#e9ecef" @bind="@MeasureTypeIndex">
                    @foreach (var mType in CurrSashDim.MeasureTypeList)
                    {
                        <option value=@(mType.Id)>
                            @(mType.Name switch
                            {
                                "Absolute" => "mm",
                                "Proportional" => "*",
                                "Percentage" => "%",
                                _ => mType.Name
                            })
                        </option>
                    }
                </select>
            }
        </div>
        <div class="form-check d-flex align-items-center">
            @if(BaseUser)
            {
                <div class="px-1">
                    <input class="form-check-input me-1" type="checkbox" checked="@CurrSashDim.bHasHandle" @onclick:preventDefault>
                </div>
            }
            else
            {
                <div class="px-1">
                    <input class="form-check-input me-1" type="checkbox" checked="@CurrSashDim.bHasHandle" @onclick="() => ChangeHandle()">
                </div>
            }
            <div class="px-2">
                <label class="form-check-label fs-6 text-dark">@Traduci("CWAreaS_Handle")</label>
            </div>
        </div>
    </div>
    @if (SashDimEditList.Contains(IndexSash))
    {
        <div class="row">
            <div class="col-lg-6 col-md-12">
                <div class="d-flex align-items-center pb-2" style="min-height: 2.5rem;">
                    <h6 class="mb-0">@Traduci("CWAreaS_Joints")</h6>
                    <div class="d-flex gap-1 ms-auto">
                        @if (BaseUser)
                        {
                            <button type="button" class="btn-icone @ButtonJointCss(Json.WindowConst.Joints.ANGLED) mx-1 px-0 py-1">
                                <img class="img-fluid" src="@GetImageJointShapePath("Angled")" title="Angled" width="40" />
                            </button>
                            <button type="button" class="btn-icone @ButtonJointCss(Json.WindowConst.Joints.FULL_H) mx-1 px-0 py-1">
                                <img class="img-fluid" src="@GetImageJointShapePath("Full H")" title="Full H" width="40" />
                            </button>
                            <button type="button" class="btn-icone @ButtonJointCss(Json.WindowConst.Joints.FULL_V) mx-1 px-0 py-1">
                                <img class="img-fluid" src="@GetImageJointShapePath("Full V")" title="Full V" width="40" />
                            </button>
                        }
                        else
                        {
                            <button type="button" class="btn-icone @ButtonJointCss(Json.WindowConst.Joints.ANGLED) mx-1 px-0 py-1" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.ANGLED)">
                                <img class="img-fluid" src="@GetImageJointShapePath("Angled")" title="Angled" width="40" />
                            </button>
                            <button type="button" class="btn-icone @ButtonJointCss(Json.WindowConst.Joints.FULL_H) mx-1 px-0 py-1" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.FULL_H)">
                                <img class="img-fluid" src="@GetImageJointShapePath("Full H")" title="Full H" width="40" />
                            </button>
                            <button type="button" class="btn-icone @ButtonJointCss(Json.WindowConst.Joints.FULL_V) mx-1 px-0 py-1" @onclick="() => ChangeAllJoints(WebWindowComplex.Json.WindowConst.Joints.FULL_V)">
                                <img class="img-fluid" src="@GetImageJointShapePath("Full V")" title="Full V" width="40" />
                            </button>
                        }
                    </div>
                </div>
                <div class="row g-3">
                    @* Joint top left e joint top right *@
                    @for (int i = CurrSashDim.JointList.Count - 1; i >= 2; i--)
                    {
                        <div class="col-6">
                            <EditJoint CurrRec="CurrSashDim.JointList.ElementAt(i)" EC_Update="UpdateJoint"></EditJoint>
                        </div>
                    }
                    @* Joint bottom left e joint bottom right *@
                    <div class="col-6">
                        <EditJoint CurrRec="CurrSashDim.JointList.ElementAt(0)" EC_Update="UpdateJoint"></EditJoint>
                    </div>
                    <div class="col-6">
                        <EditJoint CurrRec="CurrSashDim.JointList.ElementAt(1)" EC_Update="UpdateJoint"></EditJoint>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <div class="d-flex align-items-center mb-4" style="min-height: 2.5rem;">
                    <h6 class="mb-0">@Traduci("CWAreaS_Element")</h6>
                </div>
                <div class="row g-3">
                    @foreach (var element in CurrSashDim.ElementDimensionList)
                    {
                        if ((CurrSashDim.ElementDimensionList.Count == 5 && element.nIndex == 4) ||
                            (CurrSashDim.ElementDimensionList.Count == 6 &&
                            (element.nIndex == 4 || element.nIndex == 5)))
                        {
                            continue;
                        }
                        else
                        {
                            <div class="col-6">
                                <EditElement CurrRec="element" EC_Update="UpdateElement"></EditElement>
                            </div>
                        }
                    }
                </div>
            </div>
        </div>
    }
</div>