<div data-options="dxView : { name: 'ConfigDataPopup'} ">
    <div data-bind="dxPopup: popupOptions ">
        <div class="dx-clearfix" data-options="dxTemplate: { name: 'title' } " style="margin: 0 auto;">
            <div data-bind="dxToolbar: { dataSource: toolbarItems }"></div>
        </div>
        <div class="dx-clearfix" data-options="dxTemplate: { name: 'content' } ">
            <div class="dx-fieldset">
                <p class="body_sub_title_2depth" style="font-weight: bold;">데이터 로드 DB 설정</p>
                <div class="dx-field cw-multi-field">
                    <div class="dx-field">
                        <div class="dx-field-label cw-multi-field-label-ex">DB IP</div>
                        <div class="dx-field-value" data-bind="text: dataModel.LoadDBIP, css: {'dx-state-invisible': isEditModeInPopup }"></div>
                        <div class="dx-field-value" style="width: 310px" data-bind="dxTextBox: { value: dataModel.LoadDBIP, placeholder: '데이터를 불러올 DB IP 입력' }, css: {'dx-state-invisible': isEditModeInPopup() == false }"></div>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label w-multi-field-label-ex">User ID</div>
                        <div class="dx-field-value" data-bind="text: dataModel.LoadDBUserID, css: {'dx-state-invisible': isEditModeInPopup }"></div>
                        <div class="dx-field-value" style="width: 310px" data-bind="dxTextBox: { value: dataModel.LoadDBUserID, placeholder: '데이터를 불러올 User ID 입력' }, css: {'dx-state-invisible': isEditModeInPopup() == false }"></div>
                    </div>
                    <div class="dx-field" data-bind="css: {'dx-state-invisible': isEditModeInPopup() == false} ">
                        <div class="dx-field-label cw-multi-field-label">User PW</div>
                        <div class="dx-field-value" data-bind="css: {'dx-state-invisible': isEditModeInPopup}"></div>
                        <div class="dx-field-value" style="width: 310px" data-bind="dxTextBox: { value: dataModel.LoadDBUserPW, mode: 'password', placeholder: '데이터를 불러올 User PW 입력' }, css: {'dx-state-invisible': isEditModeInPopup() == false }"></div>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label cw-multi-field-label">DB Name</div>
                        <div class="dx-field-value" data-bind="text: dataModel.LoadDBName, css: {'dx-state-invisible': isEditModeInPopup }"></div>
                        <div class="dx-field-value" style="width: 310px" data-bind="dxTextBox: { value: dataModel.LoadDBName, placeholder: '데이터베이스 이름 입력' }, css: {'dx-state-invisible': isEditModeInPopup() == false }"></div>
                    </div>
                </div>

                <p></p>
                <p class="body_sub_title_2depth" style="font-weight: bold;">결과 저장 DB 설정</p>
                <div class="dx-field cw-multi-field">
                    <div class="dx-field">
                        <div class="dx-field-label cw-multi-field-label-ex">DB IP</div>
                        <div class="dx-field-value" data-bind="text: dataModel.TargetDBIP, css: {'dx-state-invisible': isEditModeInPopup }"></div>
                        <div class="dx-field-value" style="width: 310px" data-bind="dxTextBox: { value: dataModel.TargetDBIP, placeholder: '결과를 저장할 DB IP 입력' }, css: {'dx-state-invisible': isEditModeInPopup() == false }"></div>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label w-multi-field-label-ex">User ID</div>
                        <div class="dx-field-value" data-bind="text: dataModel.TargetDBUserID, css: {'dx-state-invisible': isEditModeInPopup }"></div>
                        <div class="dx-field-value" style="width: 310px" data-bind="dxTextBox: { value: dataModel.TargetDBUserID, placeholder: '결과를 저장할 User ID 입력' }, css: {'dx-state-invisible': isEditModeInPopup() == false }"></div>
                    </div>
                    <div class="dx-field" data-bind="css: {'dx-state-invisible': isEditModeInPopup() == false} ">
                        <div class="dx-field-label cw-multi-field-label">User PW</div>
                        <div class="dx-field-value" data-bind="css: {'dx-state-invisible': isEditModeInPopup}"></div>
                        <div class="dx-field-value" style="width: 310px" data-bind="dxTextBox: { value: dataModel.TargetDBUserPW, mode: 'password', placeholder: '결과를 저장할 User PW 입력' }, css: {'dx-state-invisible': isEditModeInPopup() == false }"></div>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label cw-multi-field-label">DB Name</div>
                        <div class="dx-field-value" data-bind="text: dataModel.TargetDBName, css: {'dx-state-invisible': isEditModeInPopup }"></div>
                        <div class="dx-field-value" style="width: 310px" data-bind="dxTextBox: { value: dataModel.TargetDBName, placeholder: '데이터베이스 이름 입력' }, css: {'dx-state-invisible': isEditModeInPopup() == false }"></div>
                    </div>
                </div>

                <p></p>
                <p class="body_sub_title_2depth" style="font-weight: bold;">데이터 기간 설정</p>
                <div class="dx-field cw-multi-field">
                    <div class="dx-field">
                        <div class="dx-field-label cw-multi-field-label">시작 날짜</div>
                        <div class="dx-field-value" data-bind="text: $G.date(dataModel.InitialDate()), css: {'dx-state-invisible': isEditModeInPopup }"></div>
                        <div class="dx-field-value dxDateBox_IconLocation" data-bind="dxDateBox: { value: dataModel.InitialDate, format: 'date', formatString: 'yyyy-MM-dd'}, css: {'dx-state-invisible': isEditModeInPopup() == false }"></div>
                    </div>
                </div>

                <p></p>
                <p class="body_sub_title_2depth" style="font-weight: bold;">데이터 모델 설정</p>
                <div class="dx-field cw-multi-field">
                    <div class="dx-field">
                        <div class="dx-field-label cw-multi-field-label">선형 예측 모델</div>
                        <div class="dx-field-value" style="width: 310px" data-bind=" text: dataModel.LinearFilterLength, css: {'dx-state-invisible': isEditModeInPopup }"></div>
                        <div class="dx-field-value" style="width: 310px" data-bind="dxTextBox: { value: dataModel.LinearFilterLength, placeholder: '필터 길이(W/W, N/W, W/N, N/N) (1 ~ 24 사이)' },  css: {'dx-state-invisible': isEditModeInPopup() == false }"></div>
                    </div>
                    <div class="dx-field">
                        <div class=" dx-field-label cw-multi-field-label">비선형 예측 모델</div>
                        <div class="dx-field-value" data-bind="text: dataModel.NonlinearTestSize, css: {'dx-state-invisible': isEditModeInPopup }"></div>
                        <div class="dx-field-value" style="width: 310px" data-bind="dxTextBox: { value: dataModel.NonlinearTestSize, placeholder: 'Test 셋 크기 (0 ~ 1 사이)' },  css: {'dx-state-invisible': isEditModeInPopup() == false }"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>