@if (dictValCurr == null)
{
    <EgwCoreLib.Razor.LoadingData></EgwCoreLib.Razor.LoadingData>
}
else
{
    <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)
            {
                <NavLink href="@pathFinder(DoorOpInst.DoorOpId, false)" target="_blank" title="Review PDF">
                    <button class="btnPdfSuccess">
                        <i class="fa-solid fa-file-pdf"></i>
                    </button>
                </NavLink>
            }
            <div>
                <h5>@($"{@getTrad(DoorOpInst.ObjectId)} #{instanceN}")</h5>
            </div>
            @if (hasChanged)
            {
                <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>
            @if (orderStatus == 10 || orderStatus == 10000)
            {
                <select class="col-7" @bind="@folderName">
                    @if (listValuesFname != null)
                    {
                        @foreach (var folder in listValuesFname)
                        {
                            <option value="@folder.Value">@folder.Label</option>
                        }
                    }
                </select>
            }
            else
            {
                <input class="col-7" value="@folderName" disabled style="background: #BDC3C7;" />
            }

        </div>
        <div class="row">
            <div class="col-4 d-flex flex-wrap align-items-center">
                <span>Template</span>
            </div>
            @if (listValuesFiles != null && listValuesFiles.Count > 0 && !string.IsNullOrEmpty(templateName) && (orderStatus == 10 || orderStatus == 10000))
            {
                <select class="col-7" @bind="@templateName">
                    @foreach (var val in listValuesFiles)
                    {
                        <option value="@val.Value">@val.Label</option>
                    }
                </select>
            }
            else
            {
                <input class="col-7" value="@templateName" disabled style="background: #BDC3C7;" />
            }
        </div>
        <div class="mb-3">
            @if (DoorOpInst.userConfirm != "" && DoorOpInst.DtConfirm != null)
            {
                @foreach (var item in dictValCurr)
                {

                    @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>
                                @if (orderStatus == 10 || orderStatus == 10000)
                                {
                                    <select class="col-7" @bind="@dictValCurr[item.Key]" @onfocus="isChangedVal">
                                        @foreach (var param in comboSet(item.Key))
                                        {
                                            <option value="@param.Split("/")[0]">
                                                @(translate(@param.Split("/")[1]))
                                            </option>
                                        }
                                    </select>
                                }
                                else
                                {
                                    <input class="col-7" value="@dictValCurr[item.Key]" @onfocus="isChangedVal" disabled style="background: #BDC3C7;" />
                                }
                            </div>
                        }
                        else
                        {
                            <div class="row my-1">
                                <div class="col-4 d-flex flex-wrap align-items-center">
                                    <span>@translate(item.Key)</span>
                                </div>
                                @if (orderStatus == 10 || orderStatus == 10000)
                                {
                                    <input type="text" class="col-7" @bind="@dictValCurr[item.Key]" @onfocus="isChangedVal" />
                                }
                                else
                                {
                                    <input type="text" class="col-7" value="@dictValCurr[item.Key]" @onfocus="isChangedVal" disabled style="background: #BDC3C7;" />
                                }
                            </div>
                        }
                    }
                }
            }
            else
            {
                <i>Missing Confirm</i>
            }
        </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 (hasChanged)
                    {
                        <button class="btnCancel" style="cursor: pointer; --colorCode:#E67E22;" @onclick="() => doCancel()">
                            <i class="fa-solid fa-rotate-left"></i>
                        </button>
                        <button class="btnSave" style="cursor: pointer; --colorCode:#27AE60;" @onclick="() => doSave()">
                            <i class="fa-regular fa-floppy-disk"></i>
                        </button>
                    }
                    else
                    {
                        <button class="btnCancel" style="cursor: pointer; --colorCode:#7F8C8D;" @onclick="() => doCancel()">
                            <i class="fa-solid fa-rotate-left"></i>
                        </button>
                        <button class="btnSave" style="cursor: pointer; --colorCode:#7F8C8D;" @onclick="() => doSave()">
                            <i class="fa-regular fa-floppy-disk"></i>
                        </button>
                    }
                }
                else
                {
                    <NavLink href="@pathFinder(DoorOpInst.DoorOpId, true)" target="_blank">
                        <button class="btnPdfPending">
                            <i class="fa-solid fa-file-pdf"></i>
                        </button>
                    </NavLink>
                }
            </div>
        </div>

    </div>

}