@using EgwCoreLib.Razor
@if(mode == ModeView.View)
{
    <div class="col-lg-6 col-md-12 my-2">
        <div class="d-flex justify-content-between align-items-center">
            <h6 class="fw-bold">Sash @(CurrSashGroup.SashList.Count == 1 ? "" : (IndexSash + 1))</h6>
            <button class="btn btn-outline-secondary btn-sm" type="button" @onclick="() => doEdit(IndexSash)">Edit</button>
        </div>
        <div class="input-group mb-2 mt-2">
            <span class="input-group-text">Tipology</span>
            <input type="text" readonly class="form-control" value="@(CurrSashDim.OpeningTypeList.ElementAt(OpeningTypeIndex - 1))">
        </div>
        <div class="input-group mb-2">
            <span class="input-group-text">Dimension</span>
            <input type="number" class="form-control" @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)>
                        @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 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>
}
else
{
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h6 class="fw-bold text-nowrap">Sash @(CurrSashGroup.SashList.Count == 1 ? "" : (IndexSash + 1))</h6>
    <button type="button" class="btn-close" aria-label="Close" @onclick="() => ClosePopup(IndexSash)"></button>
    </div>
    <div class="row">
        <div class="col-lg-6 col-md-12 my-2">
                <div class="input-group mb-2">
                    <span class="input-group-text">Tipology</span>
                    <input type="text" readonly class="form-control" value="@(CurrSashDim.OpeningTypeList.ElementAt(OpeningTypeIndex - 1))">
                </div>
                <div class="input-group mb-2">
                    <span class="input-group-text">Dimension</span>
                    <input type="number" class="form-control" @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)>
                                @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 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 class="col-lg-6 col-md-12">
                <div class="row justify-content-between align-items-center">
                    <div class="col d-flex justify-content-start align-items-center">
                        <h6>Joints</h6>
                    </div>
                </div>
                @foreach (Joint joint in CurrSashDim.JointList)
                {
                    <EditJoint CurrRec="joint"></EditJoint>
                }
            </div>
        </div>
}