<div data-options="dxView : { name: 'HolidayWeekendSetupPopup' } ">
    <div data-bind="dxPopup: popupOptions ">
        <div class="dx-clearfix" data-options="dxTemplate: { name: 'title' } " style="margin: 0 auto;">
            <div data-bind="dxToolbar: { dataSource: holidayWeekendSetupToolbarItems }"></div>
        </div>
        <div class="dx-clearfix" data-options="dxTemplate: { name: 'content' } ">
            <div id="popupDetail" data-bind="dxscrollview: { }">
                <div class="dx-fieldset">
                    <div class="dx-field">
                        <div class="dx-field-label">@holidaySaturday</div>
                        <div class="dx-field-value" data-bind="dxSwitch: { value: dataModel.Saturday, onText: $G('holiday'), offText: $G('workingday') }"></div>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label">@holidaySunday</div>
                        <div class="dx-field-value" data-bind="dxSwitch: { value: dataModel.Sunday, onText: $G('holiday'), offText: $G('workingday') }"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div data-options="dxView : { name: 'InsertHolidayPopup' } ">
    <div data-bind="dxPopup: insertPopupOptions  ">
        <div class="dx-clearfix" data-options="dxTemplate: { name: 'title' } " style="margin: 0 auto;">
            <div data-bind="dxToolbar: { dataSource: insertHolidayToolbarItems }"></div>
        </div>
        <div class="dx-clearfix" data-options="dxTemplate: { name: 'content' } ">
            <div id="popupDetail" data-bind="dxscrollview: { }">
                <div class="dx-fieldset">
                    <div class="dx-field">
                        <div class="dx-field-label">@holidayName</div>
                        <div class="dx-field-value" data-bind="text: holidayModel.Name(), css: {'dx-state-invisible': isEditModeInPopup }"></div>
                        <div class="dx-field-value" data-bind="dxTextBox: { value: holidayModel.Name, placeholder: '이름 입력' },  css: {'dx-state-invisible': !isEditModeInPopup() }"></div>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label">@holidayYearlyOrNot</div>
                        <div class="dx-field-value" data-bind="dxSwitch: { value: holidayModel.IsYearlyHoliday, onText: $G('yearlyHoliday'), offText: $G('specificHoliday'), css: {'dx-state-invisible': isEditModeInPopup },disabled: disableOnlyEdit }"></div>
                    </div>
                    <!-- ko if: holidayModel.IsYearlyHoliday -->
                    <div class="dx-field">
                        <div class="dx-field-label">@holidayLunarOrSolar</div>
                        <div class="dx-field-value" data-bind="dxSwitch: { value: holidayModel.IsLunar, onText: $G('lunar'), offText: $G('solar'),css: {'dx-state-invisible': isEditModeInPopup },disabled: disableOnlyEdit }"></div>
                    </div>
                    <!-- /ko -->
                </div>
            </div>
        </div>
    </div>
</div>