@if (currVal == null)
{
    <EgwCoreLib.Razor.LoadingData></EgwCoreLib.Razor.LoadingData>
}
else
{
    @*<div class="d-flex justify-content-between small">
        <div style="width: 90%" class="me-2">
            <div class="btnHead d-flex justify-content-between">
                <div class="testata">
                    <div class="row borderTop">
                        <div class="fs-3 text-end col-8">
                            @($"{translate(DoorOpInst.ObjectId)} #{instanceN}")
                        </div>
                        <div class="text-end col-4">
                            <button class="btnDelete" @onclick="() => doDeleteInst()">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="text-end">
                            <button class="btnClone" @onclick="() => doClone()">
                                <i class="fa-solid fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 90%; transform: translate(0, -5.5rem)">
                <div class="row my-1">

                    <div class="col-4 d-flex flex-wrap align-items-center">
                        <span>Folder</span>
                    </div>
                    <select class="col-7" @bind="@folderName">
                        @if (listValuesFname != null)
                        {
                            @foreach (var folder in listValuesFname)
                            {
                                <option value="@folder.Value">@folder.Label</option>
                            }
                        }
                    </select>
                </div>
                <div class="row my-1">
                    <div class="col-4 d-flex flex-wrap align-items-center">
                        <span>@currTempOrSh</span>
                    </div>

                    @if (listValuesFiles != null && listValuesFiles.Count > 0 && !string.IsNullOrEmpty(templateName))
                    {
                        <select class="col-7" @bind="@templateName">
                            @foreach (var val in listValuesFiles)
                            {
                                <option value="@val.Value">@val.Label</option>
                            }
                        </select>
                    }
                    else
                    {
                        <input class="col-7" disabled>
                    }
                </div>

            </div>
            @if (isLoading)
            {
                <EgwCoreLib.Razor.LoadingDataSmall></EgwCoreLib.Razor.LoadingDataSmall>
            }
            else
            {
                @if (DoorOpInst.userConfirm != "" && DoorOpInst.DtConfirm != null)
                {
                    <div style="width: 90%;transform: translate(0, -5.7rem);">
                        @foreach (var item in currVal)
                        {

                            @if (item.Key != "Folder" && item.Key != "template" && item.Key != "shape")
                            {
                                @if (isCombo(item.Key))
                                {
                                    <div class="row my-1">
                                        <div class="col-4 d-flex flex-wrap align-items-center">
                                            <span>@translate(item.Key)</span>
                                        </div>

                                        <select class="col-7" @bind="@currVal[item.Key]">
                                            @foreach (var param in comboSet(item.Key))
                                            {
                                                <option value="@param.Split("/")[0]">
                                                    @(translate(@param.Split("/")[1]))
                                                </option>
                                            }
                                        </select>
                                    </div>
                                }
                                else
                                {
                                    <div class="row my-1">
                                        <div class="col-4 d-flex flex-wrap align-items-center">
                                            <span>@translate(item.Key)</span>
                                        </div>

                                        <input type="text" class="col-7" @bind="@currVal[item.Key]" />
                                    </div>
                                }
                            }
                        }
                    </div>
                    <button class="btnHighlight">
                        <i class="fa-solid fa-highlighter"></i>
                    </button>
                    <div class="testata" style="transform: translate(0, -9rem);">
                        <div class="row borderBottom">
                            @if (isChangedVal())
                            {
                                <div class="col-10">
                                    <button class="btnCancel" style="cursor: pointer; --colorCode:#E67E22;" @onclick="() => doCancel()">
                                        <i class="fa-solid fa-rotate"></i>
                                    </button>
                                    <button class="btnSave" style="cursor: pointer; --colorCode:#27AE60;" @onclick="() => doSave()">
                                        <i class="fa-solid fa-cloud-arrow-up"></i>
                                    </button>
                                </div>
                            }
                            else
                            {
                                <div class="col-10">
                                    <button class="btnCancel" style="cursor: pointer; --colorCode:#7F8C8D;" disabled>
                                        <i class="fa-solid fa-rotate"></i>
                                    </button>
                                    <button class="btnSave" style="cursor: pointer; --colorCode:#7F8C8D;" disabled>
                                        <i class="fa-solid fa-cloud-arrow-up"></i>
                                    </button>
                                </div>
                            }
                            <div class="text-end col-2">
                                <button class="btnPDFSuccess">
                                    <i class="fa-solid fa-check" style="position: absolute; color: green; transform: translate(9px, 0px);"></i>
                                    <i class="fa-solid fa-file-pdf"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                }
                else
                {

                    <div class="testata" style="transform: translate(0, -4.5rem);">
                        <div class="row">
                            <div class="text-end">
                            </div>
                        </div>
                        <div class="row borderBottom">
                            <div class="text-end col-2">
                                <NavLink href="@pathFinder(DoorOpInst.DoorOpId)" target="_blank">
                                    <button class="btnPDFPending">
                                        <i class="fa-solid fa-file-pdf"></i>
                                    </button>
                                </NavLink>
                            </div>
                        </div>
                    </div>

                }
            }

        </div>
    </div>*@

    <div class="w-100 h-100 small p-2 mt-2" style="border: 2px solid black; border-radius: 15px;">

        <div class="text-center d-flex justify-content-between px-2 mb-3">
            @if (DoorOpInst.userConfirm != "" && DoorOpInst.DtConfirm != null)
            {
                <button class="btnPDFSuccess">
                    <i class="fa-solid fa-file-pdf"></i>
                </button>
            }
            <div>
                <h5>@($"{@getTrad(DoorOpInst.ObjectId)} #{instanceN}")</h5>
            </div>
            @if (isChangedVal())
            {
                <div class="circle pulse blue"></div>
            }
            else
            {
                <div class="circle grey"></div>
            }
        </div>

        <div class="row">
            <div class="col-4 d-flex flex-wrap align-items-center">
                <span>Folder</span>
            </div>
            <select class="col-7" @bind="@folderName">
                @if (listValuesFname != null)
                {
                    @foreach (var folder in listValuesFname)
                    {
                        <option value="@folder.Value">@folder.Label</option>
                    }
                }
            </select>
        </div>
        <div class="row">
            <div class="col-4 d-flex flex-wrap align-items-center">
                <span>Folder</span>
            </div>
            @if (listValuesFiles != null && listValuesFiles.Count > 0 && !string.IsNullOrEmpty(templateName))
            {
                <select class="col-7" @bind="@templateName">
                    @foreach (var val in listValuesFiles)
                    {
                        <option value="@val.Value">@val.Label</option>
                    }
                </select>
            }
            else
            {
                <input class="col-7" disabled>
            }
        </div>
        <div class="mb-3">
            @if (DoorOpInst.userConfirm != "" && DoorOpInst.DtConfirm != null)
            {
                @foreach (var item in currVal)
                {

                    @if (item.Key != "Folder" && item.Key != "template" && item.Key != "shape")
                    {
                        @if (isCombo(item.Key))
                        {
                            <div class="row my-1">
                                <div class="col-4 d-flex flex-wrap align-items-center">
                                    <span>@translate(item.Key)</span>
                                </div>

                                <select class="col-7" @bind="@currVal[item.Key]">
                                    @foreach (var param in comboSet(item.Key))
                                    {
                                        <option value="@param.Split("/")[0]">
                                            @(translate(@param.Split("/")[1]))
                                        </option>
                                    }
                                </select>
                            </div>
                        }
                        else
                        {
                            <div class="row my-1">
                                <div class="col-4 d-flex flex-wrap align-items-center">
                                    <span>@translate(item.Key)</span>
                                </div>

                                <input type="text" class="col-7" @bind="@currVal[item.Key]" />
                            </div>
                        }
                    }
                }
            }
            else
            {

            }
        </div>
        <hr />
        <div class="row">
            <div class="col-6 text-start">
                <button class="btnDelete" @onclick="() => doDeleteInst()">
                    <i class="fa-solid fa-xmark"></i>
                </button>
                @if (DoorOpInst.userConfirm != "" && DoorOpInst.DtConfirm != null)
                {
                    <button class="btnClone" @onclick="() => doClone()">
                        <i class="fa-solid fa-copy"></i>
                    </button>
                }
            </div>
            <div class="col-6 text-end">
                @if (DoorOpInst.userConfirm != "" && DoorOpInst.DtConfirm != null)
                {
                    @if (isChangedVal())
                    {
                        <button class="btnCancel" style="cursor: pointer; --colorCode:#E67E22;" @onclick="() => doCancel()">
                            <i class="fa-solid fa-rotate"></i>
                        </button>
                        <button class="btnSave" style="cursor: pointer; --colorCode:#27AE60;" @onclick="() => doSave()">
                            <i class="fa-solid fa-cloud-arrow-up"></i>
                        </button>
                    }
                    else
                    {
                        <button class="btnCancel" style="cursor: pointer; --colorCode:#7F8C8D;" @onclick="() => doCancel()">
                            <i class="fa-solid fa-rotate"></i>
                        </button>
                        <button class="btnSave" style="cursor: pointer; --colorCode:#7F8C8D;" @onclick="() => doSave()">
                            <i class="fa-solid fa-cloud-arrow-up"></i>
                        </button>
                    }
                }
                else
                {
                    <NavLink href="@pathFinder(DoorOpInst.DoorOpId)" target="_blank">
                        <button class="btnPDFPending">
                            <i class="fa-solid fa-file-pdf"></i>
                        </button>
                    </NavLink>
                }
            </div>
        </div>

    </div>

}