<div data-options="dxView : { name: 'WorkResultContentsOverlay' } " class="result-option-pop-wrap">
    <div data-bind="dxPopup: workResultContentsViewOptions">
        <div class="dx-clearfix" data-options="dxTemplate: { name: 'title' } " style="margin: 0 auto;">
            <div data-bind="dxToolbar: { dataSource: toolbarItemsInWorkResult }"></div>
        </div>
        <div class="dx-clearfix" data-options="dxTemplate: { name: 'content' } ">
            <div data-bind="dxScrollView: {}">
                <style>
                    #workContents {
                        display: inline;
                        float: left;
                        width: 280px;
						display:none;
                    }

                    #checkItemList {
                        display: inline;
                        float: left;
                        width: 280px;
                        height: 300px;
						display:none;
                    }
                </style>
                <div class="dx-clearfix" id="workContents">
                    @workContents
                    <div class="dx-fieldset">
                        <div class="dx-field">
                            <div class="dx-field-label">@startDateTime</div>

                            <!-- ko if: isEditableWorkContents -->
                            <div class="dx-field-value" data-bind="dxDateBox: { value: workContentsDataModel.StartDate, format: 'date' }"></div>
                            <div class="dx-field-value" data-bind="dxDateBox: { value: workContentsDataModel.StartTime, format: 'time' }"></div>
                            <!-- /ko -->
                            <!-- ko ifnot: isEditableWorkContents -->
                            <div class="dx-field-value" data-bind="text: $G.date( workContentsDataModel.StartDate() )"></div>
                            <div class="dx-field-value" data-bind="text: $G.time( workContentsDataModel.StartDate() )"></div>
                            <!-- /ko -->
                        </div>
                        <div class="dx-field">
                            <div class="dx-field-label">@endDateTime</div>
                            <!-- ko if: isEditableWorkContents -->
                            <div class="dx-field-value" data-bind="dxDateBox: { value: workContentsDataModel.EndDate, format: 'date' }"></div>
                            <div class="dx-field-value" data-bind="dxDateBox: { value: workContentsDataModel.EndTime, format: 'time' }"></div>
                            <!-- /ko -->
                            <!-- ko ifnot: isEditableWorkContents -->
                            <div class="dx-field-value" data-bind="text: $G.date( workContentsDataModel.EndDate() )"></div>
                            <div class="dx-field-value" data-bind="text: $G.time( workContentsDataModel.EndDate() )"></div>
                            <!-- /ko -->
                        </div>
                        <div class="dx-field cw-multi-field-overlay">
                            <div class="dx-field-label">@workerName</div>
                            <div class="dx-field-value" data-bind="text: workContentsDataModel.WorkerUserName"></div>
                        </div>
                        <div class="dx-field cw-multi-field-overlay">
                            <div class="dx-field-label">@workProgress</div>
                            <!-- ko if: isEditableWorkContents -->
                            <div class="dx-field-value" data-bind="dxSelectBox: {
                                dataSource: progressesInWorkResult,
                                displayExpr: 'Name' ,
                                valueExpr: 'WorkProgressId' ,
                                value: workContentsDataModel.ProgressId }">
                            </div>
                            <!-- /ko -->
                            <!-- ko ifnot: isEditableWorkContents -->
                            <div class="dx-field-value" data-bind="text: workContentsDataModel.ProgressName"></div>
                            <!-- /ko -->
                        </div>
                    </div>
                </div>
                <!-- ko if: isShowCheckItemListInWorkContents -->
                <div class="dx-clearfix" id="checkItemList">
                    @checkItemList
                    <div class="dx-fieldset">
                        <ul data-bind="foreach: workContentsCheckItems">
                            <li>
                                <div style="float:left; width:140px" data-bind="text: $data.Name"></div>

                                <!-- ko if: $data.IsYesNoResult -->
                                <div style="float:left; width:140px" data-bind="dxSwitch: { value: $data.BoolResult, onText: $G('yes'), offText: $G('no')  }"></div>
                                <!-- /ko -->
                                <!-- ko ifnot: $data.IsYesNoResult -->
                                <div style="float:left; width:140px" data-bind="dxTextBox: { value: $data.TextResult }"></div>
                                <!-- /ko -->
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- /ko -->
				
				<div class="dx-fieldset">
					<div class="result_data_container">
						<div class="result_popup_table_wrap fl" style="width:350px;">
							<p class="body_sub_title">@workContents</p>
							<table>
								<caption class="skip">결과 옵션</caption>
								<thead class="skip">
									<tr>
										<th>작업</th>
										<th>결과</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="result_item_td_small">
											<div class="dx-field-label">@startDateTime</div>
										</td>
										<!-- ko if: isEditableWorkContents -->
										<td class="result_con">
											<div class="dx-field-value result_day_select" data-bind="dxDateBox: { value: workContentsDataModel.StartDate, format: 'date' }"></div>
											<div class="dx-field-value result_time_select" data-bind="dxDateBox: { value: workContentsDataModel.StartTime, format: 'time' }"></div>
										</td>
										<!-- /ko -->
										<!-- ko ifnot: isEditableWorkContents -->
										<td class="result_con">
											<div class="dx-field-value result_day_select" data-bind="text: $G.date( workContentsDataModel.StartDate() )"></div>
											<div class="dx-field-value result_time_select" data-bind="text: $G.time( workContentsDataModel.StartDate() )"></div>
										</td>
										<!-- /ko -->
									</tr>
									<tr>
										<td class="result_item_td_small">
											<div class="dx-field-label">@endDateTime</div>
										</td>
										<!-- ko if: isEditableWorkContents -->
										<td class="result_con">
											<div class="dx-field-value result_day_select" data-bind="dxDateBox: { value: workContentsDataModel.EndDate, format: 'date' }"></div>
											<div class="dx-field-value result_time_select" data-bind="dxDateBox: { value: workContentsDataModel.EndTime, format: 'time' }"></div>
										</td>
										<!-- /ko -->
										<!-- ko ifnot: isEditableWorkContents -->
										<td class="result_con">
											<div class="dx-field-value result_day_select" data-bind="text: $G.date( workContentsDataModel.EndDate() )"></div>
											<div class="dx-field-value result_time_select" data-bind="text: $G.time( workContentsDataModel.EndDate() )"></div>
										</td>
										<!-- /ko -->
									</tr>
									<tr>
										<td class="result_item_td_small">
											<div class="dx-field-label">@workerName</div>
										</td>
										<td class="result_con">
											<div class="dx-field-value" data-bind="text: workContentsDataModel.WorkerUserName"></div>
										</td>
									</tr>
									<tr>
										<td class="result_item_td_small">
											<div class="dx-field-label">@workProgress</div>
										</td>
										<td class="result_con">
											<!-- ko if: isEditableWorkContents -->
											<div class="dx-field-value" data-bind="dxSelectBox: {
												dataSource: progressesInWorkResult,
												displayExpr: 'Name' ,
												valueExpr: 'WorkProgressId' , ,
												value: workContentsDataModel.ProgressId }">
											</div>
											<!-- /ko -->
											<!-- ko ifnot: isEditableWorkContents -->
											<div class="dx-field-value" data-bind="text: workContentsDataModel.ProgressName"></div>
											<!-- /ko -->
										</td>
									</tr>
								</tbody>
							</table>
							<table>
							<caption class="skip">결과 옵션</caption>
							<tbody>
								<tr>
									<td class="result_item result_item_var">@workContents</td>
								</tr>
								<tr>
									<td class="result_con">
										<div class="dx-field-value" data-bind="dxTextArea: { value: workContentsDataModel.WorkContents, height: 240 }, css: {'dx-state-invisible': !isEditableWorkContents() }"></div>
										<div class="dx-field-value cw-wordwrap" data-bind="text: workContentsDataModel.WorkContents, css: {'dx-state-invisible': isEditableWorkContents }"></div>
									</td>
								</tr>
							</tbody>
						</table>
						</div>
						
                        <div class="result_popup_table_wrap2 fl width_45per" style="width:285px; height:487px; margin-left:10px;" >
                            <p class="body_sub_title">@checkItemList</p>
                            <div data-bind="dxScrollView: {}" style="height: 460px;">
                                <table>
                                    <caption class="skip">결과 옵션2</caption>
                                    <thead class="skip">
                                        <tr>
                                            <th>작업</th>
                                            <th>결과</th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind="foreach: workContentsCheckItems">
                                        <tr>
                                            <td class="result_item_respon" data-bind="text: $data.Name"></td>
                                            <!-- ko if: $data.IsYesNoResult -->
                                            <td class="result_con">
                                                <div data-bind="dxSwitch: { value: $data.BoolResult, onText: $G('yes'), offText: $G('no')  }" class="margin_left10px"></div>
                                            </td>
                                            <!-- /ko -->
                                            <!-- ko ifnot: $data.IsYesNoResult -->
                                            <td class="result_con"><div data-bind="dxTextBox: { value: $data.TextResult }"></div></td>
                                            <!-- /ko -->
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>					
					</div>			
				</div>
				
				
            </div>
        </div>
    </div>
</div>