<div class="appointment" data-bind="visible: !!ical(), with: ical">
	<div class="fields">
		<div class="row" data-bind="visible: visibleRequestButtons() && lastModification()">
			<div class="buttons"
				 data-bind="css: {'touched': isAccepted() || isTentative() || isDeclined(), 'animation': animation}"
			>
				<span class="button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_ACCEPT_APPOINTMENT'},
					css: {'selected_button': isAccepted, 'disabled': isAppointmentActionInProgress() && !isAccepted()},
					click: acceptAppointment"></span>
				<span class="button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_TENTATIVE_APPOINTMENT'},
					css: {'selected_button': isTentative, 'disabled': isAppointmentActionInProgress() && !isTentative()},
					click: tentativeAppointment"></span>
				<span class="button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_DECLINE_APPOINTMENT'},
					css: {'selected_button': isDeclined, 'disabled': isAppointmentActionInProgress() && !isDeclined()},
					click: declineAppointment"></span>
			</div>
		</div>

		<div class="row row_info" data-bind="visible: visibleRequestButtons() && !lastModification()">
			<span data-bind="i18n: {'key': '%MODULENAME%/INFO_OLD_VERSION_INVITATION'}"></span>
		</div>

		<div class="row row_info" data-bind="visible: isCancelType() && cancelDecision() !== ''">
			<span data-bind="text: cancelDecision"></span>
		</div>

		<div class="row row_info" data-bind="visible: isReplyType() && replyDecision() !== ''">
			<span data-bind="text: replyDecision"></span>
		</div>

		<div class="row" data-bind="visible: isSaveType() && !calendarIsChosen()">
			<div class="buttons">
				<span class="button" data-bind="i18n: {'key': '%MODULENAME%/ACTION_ADD_ICAL'}, click: addEvents"></span>
			</div>
		</div>

		<div class="row row_info" data-bind="visible: isSaveType() && calendarIsChosen()">
			<span data-bind="i18n: {'key': '%MODULENAME%/REPORT_EVENT_SAVED'}, visible: isJustSaved"></span>
			<span data-bind="i18n: {'key': '%MODULENAME%/REPORT_EVENT_EXISTS'}, visible: !isJustSaved()"></span>
		</div>

		<div class="row fluid calendar" data-bind="visible: visibleCalendarRow">
			<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_CALENDAR'}"></span>:
			<span class="value">
				<select class="value input" data-bind="visible: visibleCalendarDropdown, options: calendars,
						optionsValue: 'id', optionsText: 'name', value: selectedCalendarId"></select>
				<span data-bind="visible: visibleCalendarName, text: chosenCalendarName"></span>
				<span data-bind="visible: visibleFirstCalendarName, text: firstCalendarName"></span>
			</span>
		</div>

		<div class="row fluid location" data-bind="visible: location() !== ''">
			<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_LOCATION'}"></span>:
			<span class="value" data-bind="html: location"></span>
		</div>

		<div class="row fluid when">
			<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_WHEN'}"></span>:
			<span class="value" data-bind="text: when"></span>
		</div>

		<!-- ko if: !isSaveType() && organizer() !== '' -->
		<div class="row fluid organizer">
			<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ORGANIZER'}"></span>:
			<span class="value" data-bind="text: organizerText"></span>
		</div>
		<!-- /ko -->

		<!-- ko if: !isSaveType() && attendee() !== '' && attendeeListText() === '' -->
		<div class="row fluid attendee">
			<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ATTENDEE'}"></span>:
			<span class="value" data-bind="text: attendeeText"></span>
		</div>
		<!-- /ko -->

		<!-- ko if: !isSaveType() && attendeeListText() !== '' -->
		<div class="row fluid attendee">
			<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ATTENDEES'}"></span>:
			<div class="value" style="max-height: 71px; overflow: hidden;" data-bind="customScrollbar: {x: false, y: true}">
				<div class="scroll-inner" data-bind="text: attendeeListText"></div>
			</div>
		</div>
		<!-- /ko -->

		<!-- ko if: summary() !== '' -->
		<div class="row fluid summary">
			<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_TITLE'}"></span>:
			<span class="value" data-bind="text: summary"></span>
		</div>
		<!-- /ko -->

		<!-- ko if: description() !== '' -->
		<div class="row fluid description">
			<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_DESCRIPTION'}"></span>:
			<span class="value" data-bind="html: description"></span>
		</div>
		<!-- /ko -->
	</div>
</div>
