@using static WebWindowComplex.LayoutConst
<div class="input-group mb-2">
    @if (User)
    {
        <span class="input-group-text">@(CurrPosJointName)</span>
        <input type="text" readonly class="form-control" value="@(CurrRec.JointTypeList.FirstOrDefault(x => x.Id == (int)CurrRec.SelJointType))">
    }
    else
    {
        <label class="input-group-text px-2 py-1">
            <img class="img-fluid" src="@GetImageJointPosPath(CurrPosJointName)" title="@(CurrPosJointName)" width="50" />
        </label>
        @if (CurrRec.ParentArea is Frame &&
            (CurrRec.ParentArea.ParentWindow.AreaList.First().SelShapeIndex == (int)Json.WindowConst.Shapes.DOUBLEARC ||
            CurrRec.ParentArea.ParentWindow.AreaList.First().SelShapeIndex == (int)Json.WindowConst.Shapes.ARC_FULL ||
            CurrRec.ParentArea.ParentWindow.AreaList.First().SelShapeIndex == (int)Json.WindowConst.Shapes.THREECENTERARC) &&
            (CurrRec.nIndex == 3 || CurrRec.nIndex == 4))
        {
            <div class="dropdown" @onfocusout="HandleFocusOut" tabindex="0">
                <button class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center gap-2"
                        type="button"
                        style="background-color: @(isOpenDropdown ? "#f8f9fa" : "#ffffff"); color: @(isOpenDropdown ? "#333333" : "");"
                        @onclick="ToggleDropdownOpening"
                        aria-expanded="@isOpenDropdown">
                    <span class="d-flex align-items-center">
                        <img class="img-fluid" src="@GetImageJointShapePath(CurrPosJointName, CurrJointName)" title="@(CurrJointName)" width="50" />
                    </span>
                </button>
                <ul class="dropdown-menu p-2 @(isOpenDropdown ? "show" : "")"
                    style="position: absolute; min-width: 7em;">
                    <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(CurrRec.JointTypeList.First(x => x.Id == CurrJoint).Id)"
                                style="background-color: @(CurrJoint == CurrRec.JointTypeList.First(x => x.Id == CurrJoint).Id ? "#d4e6fa" : "#f8f9fa");"
                                @onclick="() => SelJoint(CurrRec.JointTypeList.First(x => x.Id == CurrJoint).Id)">
                            <img class="img-fluid" src="@GetImageJointShapePath(CurrPosJointName, CurrRec.JointTypeList.First(x => x.Id == CurrJoint).Name)"
                                 title="@(CurrRec.JointTypeList.First(x => x.Id == CurrJoint).Name)" width="100" />
                        </button>
                    </div>
                </ul>
            </div>
        }
        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"
                        style="background-color: @(isOpenDropdown ? "#f8f9fa" : "#ffffff"); color: @(isOpenDropdown ? "#333333" : "");"
                        @onclick="ToggleDropdownOpening"
                        aria-expanded="@isOpenDropdown">
                    <span class="d-flex align-items-center">
                        <img class="img-fluid" src="@GetImageJointShapePath(CurrPosJointName, CurrJointName)" title="@(CurrJointName)" width="50" />
                    </span>
                </button>
                <ul class="dropdown-menu p-2 @(isOpenDropdown ? "show" : "")"
                    style="position: absolute; min-width: 20em;">
                    <div class="row g-2 m-0">
                        @foreach (var jointType in CurrRec.JointTypeList)
                        {
                            <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(jointType.Id)"
                                        style="background-color: @(CurrJoint == jointType.Id ? "#d4e6fa" : "#f8f9fa");"
                                        @onclick="() => SelJoint(jointType.Id)">
                                    <img class="img-fluid" src="@GetImageJointShapePath(CurrPosJointName, jointType.Name)"
                                         title="@(jointType.Name)" width="100" />
                                </button>
                            </div>
                        }
                    </div>
                </ul>
            </div>
        }
    }
</div>