<div class="popup calendar_popup calendar_create" data-test-id="calendar-create-dialog" style="display: none;">
	<div class="mask" data-bind="click: cancelPopup"></div>
	<div class="popup_panel">
		<span class="close" data-bind="click: cancelPopup"></span>
		<span class="popup_heading" data-bind="style: {backgroundColor: selectedColor}, text: popupHeading()"></span>
		<div class="fields">
			<div class="fieldset">
				<div class="row name" data-bind="css: {'focused': calendarNameFocus(), 'filled': (calendarName()) ? calendarName().length : false}">
					<label for="calendar_name" class="label placeholder" data-bind="i18n: {'key': '%MODULENAME%/LABEL_CALENDAR_NAME'}"></label>
					<input id="calendar_name" data-test-id="calendar-create-name" class="value input" type="text" spellcheck="false"  maxlength="200" data-bind="value: calendarName, hasfocus: calendarNameFocus, valueUpdate: 'afterkeydown', onEnter: save" />
				</div>
				<div class="row description" data-bind="css: {'focused': calendarDescriptionFocus(), 'filled': (calendarDescription()) ? calendarDescription().length : false}">
					<label for="calendar_description" class="label placeholder" data-bind="i18n: {'key': '%MODULENAME%/LABEL_CALENDAR_DESCRIPTION'}"></label>
					<input id="calendar_description" class="value input" spellcheck="false"  type="text" maxlength="200" data-bind="value: calendarDescription, hasfocus: calendarDescriptionFocus, valueUpdate: 'afterkeydown', onEnter: save, disable: calendarSubscribed()" />
				</div>
				<div class="row checkbox" data-bind="visible: calendarId() == null && allowSubscribedCalendars()">
					<label class="custom_checkbox" data-bind="css: {'checked': calendarSubscribed()}">
						<span class="icon"></span>
						<input type="checkbox" data-bind="checked: calendarSubscribed" id="calendar_subscribed"/>
					</label>
					<label for="calendar_subscribed" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SUBSCRIBED'}"></label>
				</div>
				<div class="row source" data-bind="css: {'focused': calendarSourceFocus(), 'filled': (calendarSource()) ? calendarSource().length : false}, visible: calendarSubscribed()">
					<label for="calendar_source" class="label placeholder" data-bind="i18n: {'key': '%MODULENAME%/LABEL_CALENDAR_SOURCE'}"></label>
					<input id="calendar_source" class="value input" spellcheck="false"  type="text" maxlength="200" data-bind="value: calendarSource, hasfocus: calendarSourceFocus, valueUpdate: 'afterkeydown', onEnter: save" />
				</div>
			</div>

			<div class="buttons">
				<span class="button save" data-test-id="calendar-create-save" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_SAVE'}, click: save"></span>
				<span class="colors" data-bind="foreach: colors">
					<span class="item color_pick" data-bind="style: {backgroundColor: $data}, css: {'selected': $parent.selectedColor() === $data},
						 click: function () {$parent.selectedColor($data)}"></span>
				</span>
			</div>
		</div>
	</div>
	<span class="helper"></span>
</div>
