<div class="mask clear" data-bind="visible: dateEdit(), click: onMainPanelClick"></div>
<div class="mask" data-bind="click: closePopup"></div>
<div class="popup_panel" data-bind="css: {'show_side_panel': calendarAppointments && (guestsEdit() || attendees().length > 0), 'editable': isEditable, 'offset': dateEdit()}">

	<div class="panel_wrap clearfix">
		<div class="side_panel fields">
			<div class="fieldset">
				<div class="row">
					<span class="label" data-i18n="CALENDAR/LABEL_EVENT_HOST" data-bind="i18n: 'text'"></span>
					<span class="value" data-bind="attr: {title: owner}, text: ownerDisplay, css: {'recivedAnim': recivedAnim() && owner() === whomAnimate()}"></span>
				</div>
				<div class="row attendees" data-bind="foreach: attendees">
					<div class="attender" data-bind="css: {
							'pending': status === 0,
							'accepted': status === 1,
							'declined': status === 2,
							'tentative': status === 3
						 }">
						<span class="link remove" data-i18n="CALENDAR/EVENT_GUESTS_REMOVE" data-bind="visible: $parent.isEditable(), click: $parent.removeGuest.bind($parent), i18n: 'title'"></span>
						<!--<span class="name" data-bind="css: {'recivedAnim': $parent.recivedAnim}">-->
						<span class="name" data-bind="css: {'recivedAnim': $parent.recivedAnim() && email === $parent.whomAnimate()}">
							<span class="icon status" data-bind="title: function () {return $parent.getAttenderTextStatus(status)}"></span>
							<span class="text" data-bind="title: email, text: name, visible: name !== ''"></span>
							<span class="text" data-bind="text: email, visible: name === ''"></span>
						</span>
					</div>
				</div>
				<div class="row add_attender" data-bind="visible: isEditable(), css: {'focused': guestEmailFocus()}">
					<span class="link" data-i18n="CALENDAR/EVENT_ADD_GUEST" data-bind="i18n: 'title', click: onAddGuestClick"></span>
					<label for="add_attender_input" class="label placeholder" data-i18n="CALENDAR/LABEL_WEB_EMAIL_OR_NAME" data-bind="i18n: 'text', visible: guestAutocomplete() === ''"></label>
					<input id="add_attender_input" class="value input" type="text" autocomplete="on" data-bind="value: guestAutocomplete, hasfocus: guestEmailFocus, valueUpdate: ['blur', 'afterkeydown'], autocompleteSimple: {callback: autocompleteCallback.bind($data), dataAccessor: guestAutocompleteItem}" />
				</div>
				<div class="row" data-bind="visible: appointment()">
					<span class="buttons" data-bind="visible: true,
				  		css: {'touched': 'isAccepted()' || 'isTentative()' || 'isDeclined()', 'animation': 'animation'}">
						<span class="button" data-i18n="MESSAGE/APPOINTMENT_BUTTON_ACCEPT"
						  data-bind="i18n: 'text', css: {'state': attenderStatus() === Enums.IcalConfigInt.Accepted}, click: function(){doProcessAppointment(Enums.IcalConfigInt.Accepted)}"></span>
						<span class="button" data-i18n="MESSAGE/APPOINTMENT_BUTTON_TENTATIVE"
						  data-bind="i18n: 'text', css: {'state': attenderStatus() === Enums.IcalConfigInt.Tentative}, click: function(){doProcessAppointment(Enums.IcalConfigInt.Tentative)}"></span>
						<span class="button" data-i18n="MESSAGE/APPOINTMENT_BUTTON_DECLINE"
						  data-bind="i18n: 'text', css: {'state': attenderStatus() === Enums.IcalConfigInt.Declined}, click: function(){doProcessAppointment(Enums.IcalConfigInt.Declined)}"></span>
					</span>
				</div>
			</div>
		</div>

		<div class="main_panel">
			<span class="close" data-bind="click: closePopup"></span>
			<span class="title" data-bind="dropdown: {'control': false}, style: {backgroundColor: calendarColor}, css: {'calendar_selector': calendarsList().length > 1 && selectedCalendarIsEditable()}">
				<span class="current">
					<span data-bind="text: selectedCalendarName, fade: {color: calendarColor}"></span>
				</span>
				<span class="dropdown" data-bind="visible: calendarsList().length > 1 && selectedCalendarIsEditable()">
					<span class="dropdown_helper">
						<span class="dropdown_arrow"><span></span></span>
						<span class="dropdown_content" data-bind="foreach: calendarsList()">
							<span class="item" data-bind="visible: $parent.selectedCalendar() !== id, text: name, style: { backgroundColor: color }, click: function () { $parent.selectedCalendar(id) }"></span>
						</span>
					</span>
				</span>
			</span>

			<div class="fields">
				<div class="fieldset">
					<div class="row dates" data-bind="click: isEditable() ? showDates : '', css: {'editable': isEditable()}">
						<span class="value" data-bind="text: startDate() + ' '"></span>
						<span class="value" data-bind="text: startTime, visible: !allDay()"></span>
						<span data-bind="visible: !isEvOneDay() || !isEvOneTime()">&nbsp;&ndash;&nbsp;</span>
						<span class="value" data-bind="text: endDate() + ' ', visible: !isEvOneDay()"></span>
						<span class="value" data-bind="text: endTime, visible: !allDay() && (!isEvOneDay() || !isEvOneTime())"></span>
					</div>

					<div class="subforms" data-bind="visible: dateEdit()">
						<div class="dates_form">
							<div class="form_content">
								<div class="row">
									<input class="date input" type="text" readonly='readonly' data-bind="initDom: startDom, value: startDate" />
									<!--<input class="time input" type="text" data-bind="value: startTime, visible: !allDay()" />-->
									<span class="custom_selector" data-bind="visible: !allDay(), customSelect: {'control': false, 'selected': false, 'input': true, 'options': timeOptions(), value: startTime, optionsText: 'text', optionsValue: 'value'}">
										<input class="value time input" type="text" data-bind="value: startTime" />
										<span class="dropdown">
											<span class="dropdown_helper">
												<span class="dropdown_arrow"><span></span></span>
												<span class="dropdown_content">
												<!--<span class="dropdown_content" data-bind="customScrollbar: {x: false}">-->
													<!--<span class="scroll-inner"></span>-->
												</span>
											</span>
										</span>
									</span>
									<input class="date input" type="text" readonly='readonly' data-bind="initDom: endDom, value: endDate" />
									<!--<input class="time input" type="text" data-bind="value: endTime, visible: !allDay()" />-->
									<span class="custom_selector" data-bind="visible: !allDay(), customSelect: {'control': false, 'selected': false, 'input': true, 'options': timeOptions(), value: endTime, optionsText: 'text', optionsValue: 'value'}">
										<input class="value time input" type="text" data-bind="value: endTime" />
										<span class="dropdown">
											<span class="dropdown_helper">
												<span class="dropdown_arrow"><span></span></span>
												<span class="dropdown_content"></span>
											</span>
										</span>
									</span>
								</div>

								<div class="row allday">
									<label data-bind="css: {'checked': allDay}" class="custom_checkbox">
										<span class="icon"></span>
										<input type="checkbox" data-bind="checked: allDay" id="allday">
									</label>
									<label for="allday" data-i18n="CALENDAR/EVENT_ALLDAY" data-bind="i18n: 'text'"></label>
								</div>

								<div class="repeat_panel" data-bind="visible: allEvents() === Enums.CalendarEditRecurrenceEvent.AllEvents">
									<div class="row" data-bind="visible: true">
										<span class="label" data-i18n="CALENDAR/EVENT_REPEAT_REPEATS" data-bind="i18n: 'text'"></span>
										<select class="value input" data-bind="options: repeatPeriodOptions, optionsText: 'label', optionsValue: 'value', value: repeatPeriod"></select>

										<span class="" data-bind="visible: repeatPeriod() === 1">
											<span class="label" data-i18n="End date" data-bind="i18n: 'text'"></span>
											<input class="date input" type="text" readonly='readonly' data-bind="initDom: repeatEndDom, value: repeatEndDate" />
										</span>


										<span class="" data-bind="visible: repeatPeriod() === 2">
											<span class="label" data-i18n="CALENDAR/EVENT_REPEAT_DAYS" data-bind="i18n: 'text'"></span>
											
											<span class="custom_switcher">
												<label data-bind="css: {'checked': weekMO}">
													<span class="text" data-i18n="CALENDAR/EVENT_REPEAT_MON" data-bind="i18n: 'text'"></span>
													<input type="checkbox" data-bind="checked: weekMO" />
												</label>

												<label data-bind="css: {'checked': weekTU}">
													<span class="text" data-i18n="CALENDAR/EVENT_REPEAT_TUE" data-bind="i18n: 'text'"></span>
													<input type="checkbox" data-bind="checked: weekTU" />
												</label>

												<label data-bind="css: {'checked': weekWE}">
													<span class="text" data-i18n="CALENDAR/EVENT_REPEAT_WED" data-bind="i18n: 'text'"></span>
													<input type="checkbox" data-bind="checked: weekWE" />
												</label>
												
												<label data-bind="css: {'checked': weekTH}">
													<span class="text" data-i18n="CALENDAR/EVENT_REPEAT_THU" data-bind="i18n: 'text'"></span>
													<input type="checkbox" data-bind="checked: weekTH" />
												</label>

												<label data-bind="css: {'checked': weekFR}">
													<span class="text" data-i18n="CALENDAR/EVENT_REPEAT_FRI" data-bind="i18n: 'text'"></span>
													<input type="checkbox" data-bind="checked: weekFR" />
												</label>

												<label data-bind="css: {'checked': weekSA}">
													<span class="text" data-i18n="CALENDAR/EVENT_REPEAT_SAT" data-bind="i18n: 'text'"></span>
													<input type="checkbox" data-bind="checked: weekSA" />
												</label>

												<label data-bind="css: {'checked': weekSU}">
													<span class="text" data-i18n="CALENDAR/EVENT_REPEAT_SUN" data-bind="i18n: 'text'"></span>
													<input type="checkbox" data-bind="checked: weekSU" />
												</label>
											</span>
										</span>

										<span data-bind="visible: repeatPeriod() === 3">
											<span class="label" data-i18n="CALENDAR/EVENT_REPEAT_DAYS" data-bind="i18n: 'text'"></span>
											<span class="value" data-bind="text: monthlyDate()"></span>
										</span>

										<span data-bind="visible: repeatPeriod() === 4">
											<span class="label" data-i18n="CALENDAR/EVENT_REPEAT_DAYS" data-bind="i18n: 'text'"></span>
											<span class="value" data-bind="text: yearlyDate()"></span>
										</span>
									</div>

									<div class="row" data-bind="visible: repeatPeriod() == 2">
										<span class="label" data-i18n="CALENDAR/EVENT_REPEAT_EVERY" data-bind="i18n: 'text'"></span>
										<select class="value input" data-bind="options: repeatWeekIntervalOptions, value: repeatInterval"></select>
										<span class="label" data-i18n="CALENDAR/EVENT_REPEAT_WEEK" data-bind="i18n: 'text'"></span>
									</div>
								</div>
							</div>
							<span class="form_arrow"></span>
						</div>
					</div>
				</div>

				<div class="fieldset">
					<div class="row name" data-bind="css: {'focused': subjectFocus(), 'filled': subject().length > 0}">
						<label for="event_subject" class="label placeholder" data-i18n="CALENDAR/EVENT_SUBJECT" data-bind="i18n: 'text'"></label>
						<div class="value scrollable_field" data-bind="customScrollbar: {x: false}">
							<div class="scroll-inner">
								<span class="input" data-bind="text: subject, visible: !isEditable()"></span>
								<textarea id="event_subject" class="input autosize" data-bind="autosize: {minHeight: 40, autosizeTrigger: autosizeTrigger, scrollableHeight: 110}, customBind: {onKeydown: onKeydown, onKeyup: onKeyup, onPaste: onPaste, valueObserver: subject}, value: subject, valueUpdate: 'afterkeydown', hasfocus: subjectFocus, visible: isEditable()"></textarea>
							</div>
						</div>
					</div>
					<div class="row description" data-bind="css: {'focused': descriptionFocus(), 'filled': description().length > 0}">
						<div class="value scrollable_field" data-bind="customScrollbar: {x: false}">
							<div class="scroll-inner">
								<label for="event_description" class="label placeholder" data-i18n="CALENDAR/EVENT_DESCRIPTION" data-bind="i18n: 'text'"></label>
								<span class="input" data-bind="text: description, visible: !isEditable()"></span>
								<textarea id="event_description" class="input autosize" data-bind="autosize: {minHeight: 26, autosizeTrigger: autosizeTrigger, scrollableHeight: 150}, value: description, valueUpdate: 'afterkeydown', hasfocus: descriptionFocus, visible: isEditable()"></textarea>
							</div>
						</div>
					</div>
					<div class="row location" data-bind="css: {'focused': locationFocus(), 'filled': (location()) ? location().length : false}">
						<div class="value scrollable_field" data-bind="customScrollbar: {x: false}">
							<div class="scroll-inner">
								<label for="event_location" class="label placeholder" data-i18n="CALENDAR/EVENT_LOCATION" data-bind="i18n: 'text'"></label>
								<span class="input" data-bind="text: location, visible: !isEditable()"></span>
								<textarea id="event_location" class="input autosize" data-bind="autosize: {minHeight: 26, autosizeTrigger: autosizeTrigger, scrollableHeight: 74}, customBind: {onKeydown: onKeydown, onKeyup: onKeyup, onPaste: onPaste, valueObserver: location}, value: location, valueUpdate: 'afterkeydown', hasfocus: locationFocus, visible: isEditable()"></textarea>
							</div>
						</div>
					</div>
				</div>
				<div class="alarms_helper" data-bind="foreach: displayedAlarms()">
					<div></div>
				</div>

				<div class="buttons clearfix">
					<div class="subforms">
						<div class="alarm_form" data-bind="visible: displayedAlarms().length > 0">
							<div class="form_content">
								<div class="alarms" data-bind="foreach: displayedAlarms()">
									<span class="item alarm">
										<span class="link remove" data-i18n="CALENDAR/EVENT_REMINDER_REMOVE" data-bind="i18n: 'text', visible: $parent.isEditableReminders(), click: function(oItem) {$parent.removeAlarm(oItem);}"></span>

										<span data-i18n="CALENDAR/EVENT_REMINDER_ALARM" data-bind="i18n: 'text'"></span>
										<span class="value" data-bind="text: $data.text, visible: !$parent.isEditableReminders()"></span>
										<span class="custom_selector" data-bind="visible: $parent.isEditableReminders(), customSelect: {'control': false, 'alarmOptions': $parent.alarmOptions, 'options': $parent.alarmOptions(), value: alarm, optionsText: 'text', optionsValue: 'value'}">
											<span class="link value" data-bind="text: $data.text"></span>
											<span class="dropdown" data-bind="visible: $parent.isEditableReminders()">
												<span class="dropdown_helper">
													<span class="dropdown_arrow"><span></span></span>
													<span class="dropdown_content">
													</span>
												</span>
											</span>
											<span data-i18n="CALENDAR/EVENT_REMINDER_BEFORE" data-bind="i18n: 'text'"></span>
										</span>
									</span>
								</div>
								<span class="link" data-i18n="CALENDAR/EVENT_REMINDER_NEW_ALARM" data-bind="i18n: 'text', click: addAlarm, visible: isEditableReminders() && (displayedAlarms().length < 5)"></span>
							</div>
							<span class="form_arrow"></span>
						</div>
					</div>

					<div class="toolbar">
						<span class="content">
							<span class="item alarm" data-bind="click: isEditableReminders() ? addFirstAlarm : '', css: {'selected': displayedAlarms().length > 0, 'readonly': !isEditableReminders()}">
								<span class="icon" data-i18n="CALENDAR/EVENT_REMINDER" data-bind="i18n: 'title'"></span>
								<span class="text" data-i18n="CALENDAR/EVENT_REMINDER" data-bind="i18n: 'text'"></span>
							</span>
							<span class="item guests" data-bind="visible: calendarAppointments, click: isEditable() ? showGuests : '', css: {'selected': guestsEdit() || attendees().length > 0, 'readonly': !isEditable()}">
								<span class="icon" data-i18n="CALENDAR/EVENT_GUESTS" data-bind="i18n: 'title'"></span>
								<span class="text" data-i18n="CALENDAR/EVENT_GUESTS" data-bind="i18n: 'text'"></span>
								<span class="arrow"></span>
							</span>
						</span>
					</div>
					<span class="button save" data-i18n="CALENDAR/BUTTON_SAVE" data-bind="i18n: 'text', click: onSaveClick, visible: isEditable() || isEditableReminders()"></span>
					<span class="link remove" data-i18n="CALENDAR/LINK_REMOVE" data-bind="i18n: 'text', click: onDeleteClick, visible: isEditForm() && isEditable()"></span>
				</div>

			</div>
		</div>
	</div>

</div>
<span class="helper"></span>