aside.change-list(
	ng-if="history.isV2"
	ng-controller="HistoryV2ListController"
)
	history-entries-list(
		ng-if="!history.showOnlyLabels && !history.error"
		entries="history.updates"
		range-selection-enabled="history.viewMode === HistoryViewModes.COMPARE"
		selected-history-version="history.selection.range.toV"
		selected-history-range="history.selection.range"
		current-user="user"
		current-user-is-owner="project.owner._id === user.id"
		users="projectUsers"
		load-entries="loadMore()"
		load-disabled="history.loading || history.atEnd"
		load-initialize="ui.view == 'history'"
		is-loading="history.loading"
		free-history-limit-hit="history.freeHistoryLimitHit"
		on-version-select="handleVersionSelect(version)"
		on-range-select="handleRangeSelect(selectedToV, selectedFromV)"
		on-label-delete="handleLabelDelete(label)"
	)
	history-labels-list(
		ng-if="history.showOnlyLabels && !history.error"
		labels="history.labels"
		range-selection-enabled="history.viewMode === HistoryViewModes.COMPARE"
		selected-history-version="history.selection.range.toV"
		selected-history-range="history.selection.range"
		current-user="user"
		users="projectUsers"
		is-loading="history.loading"
		on-version-select="handleVersionSelect(version)"
		on-range-select="handleRangeSelect(selectedToV, selectedFromV)"
		on-label-delete="handleLabelDelete(label)"
	)
				
script(type="text/ng-template", id="historyEntriesListTpl")
	.history-entries(
		infinite-scroll="$ctrl.loadEntries()"
		infinite-scroll-disabled="$ctrl.loadDisabled"
		infinite-scroll-initialize="$ctrl.loadInitialize"
	)
		.infinite-scroll-inner
			history-entry(
				ng-repeat="entry in $ctrl.entries"
				range-selection-enabled="$ctrl.rangeSelectionEnabled"
				is-dragging="$ctrl.isDragging"
				selected-history-version="$ctrl.selectedHistoryVersion"
				selected-history-range="$ctrl.selectedHistoryRange"
				hovered-history-range="$ctrl.hoveredHistoryRange"
				entry="entry"
				current-user="$ctrl.currentUser"
				users="$ctrl.users"
				on-select="$ctrl.handleEntrySelect(selectedEntry)"
				on-label-delete="$ctrl.onLabelDelete({ label: label })"
			)
			.loading(ng-show="$ctrl.isLoading")
				i.fa.fa-spin.fa-refresh
				| &nbsp;&nbsp; #{translate("loading")}…
			.history-entries-list-upgrade-prompt(
				ng-if="$ctrl.freeHistoryLimitHit && $ctrl.currentUserIsOwner"
				ng-controller="FreeTrialModalController"
			)
				p #{translate("currently_seeing_only_24_hrs_history")}
				p: strong #{translate("upgrade_to_get_feature", {feature:"full Project History"})}
				ul.list-unstyled
					li 
						i.fa.fa-check &nbsp;
						| #{translate("unlimited_projects")}
					
					li
						i.fa.fa-check &nbsp;
						| #{translate("collabs_per_proj", {collabcount:'Multiple'})}
					
					li 
						i.fa.fa-check &nbsp;
						| #{translate("full_doc_history")}
					
					li 
						i.fa.fa-check &nbsp;
						| #{translate("sync_to_dropbox")}

					li 
						i.fa.fa-check &nbsp;
						| #{translate("sync_to_github")}

					li  
						i.fa.fa-check &nbsp;
						|#{translate("compile_larger_projects")}
				p.text-center
					a.btn.btn-primary(
						href
						ng-class="buttonClass"
						ng-click="startFreeTrial('history')"
					) #{translate("start_free_trial")}
				p.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")}
			.history-entries-list-upgrade-prompt(
				ng-if="$ctrl.freeHistoryLimitHit && !$ctrl.currentUserIsOwner"
			) 
				p #{translate("currently_seeing_only_24_hrs_history")}
				strong #{translate("ask_proj_owner_to_upgrade_for_full_history")}

script(type="text/ng-template", id="historyEntryTpl")
	time.history-entry-day(ng-if="::$ctrl.entry.meta.first_in_day") {{ ::$ctrl.entry.meta.end_ts | relativeDate }}

	.history-entry(
		ng-class="{\
			'history-entry-first-in-day': $ctrl.entry.meta.first_in_day,\
			'history-entry-selected': !$ctrl.isDragging && $ctrl.isEntrySelected(),\
			'history-entry-selected-to': $ctrl.rangeSelectionEnabled && !$ctrl.isDragging && $ctrl.selectedHistoryRange.toV === $ctrl.entry.toV,\
			'history-entry-selected-from': $ctrl.rangeSelectionEnabled && !$ctrl.isDragging && $ctrl.selectedHistoryRange.fromV === $ctrl.entry.fromV,\
			'history-entry-hover-selected': $ctrl.rangeSelectionEnabled && $ctrl.isDragging && $ctrl.isEntryHoverSelected(),\
			'history-entry-hover-selected-to': $ctrl.rangeSelectionEnabled && $ctrl.isDragging && $ctrl.hoveredHistoryRange.toV === $ctrl.entry.toV,\
			'history-entry-hover-selected-from': $ctrl.rangeSelectionEnabled && $ctrl.isDragging && $ctrl.hoveredHistoryRange.fromV === $ctrl.entry.fromV,\
		}"
		history-droppable-area
		history-droppable-area-on-drop="$ctrl.onDrop(boundary)"
		history-droppable-area-on-over="$ctrl.onOver(boundary)"
	)
		.history-entry-details(
			ng-click="$ctrl.onSelect({ selectedEntry: $ctrl.entry })"
		)
			.history-entry-toV-handle(
				ng-show="$ctrl.rangeSelectionEnabled && $ctrl.selectedHistoryRange && ((!$ctrl.isDragging && $ctrl.selectedHistoryRange.toV === $ctrl.entry.toV) || ($ctrl.isDragging && $ctrl.hoveredHistoryRange.toV === $ctrl.entry.toV))"
				history-draggable-boundary="toV"
				history-draggable-boundary-on-drag-start="$ctrl.onDraggingStart()"
				history-draggable-boundary-on-drag-stop="$ctrl.onDraggingStop(isValidDrop, boundary)"
			)

			history-label(				
				ng-repeat="label in $ctrl.entry.labels | orderBy : '-created_at'"
				ng-init="user = $ctrl.buildUserView(label)"
				label-text="label.comment"
				label-owner-name="$ctrl.displayNameById(label.user_id) || 'Anonymous'"
				label-creation-date-time="label.created_at"
				is-owned-by-current-user="label.user_id === $ctrl.currentUser.id"
				on-label-delete="$ctrl.onLabelDelete({ label: label })"
			)

			ol.history-entry-changes
				li.history-entry-change(
					ng-repeat="pathname in ::$ctrl.entry.pathnames"
				)
					span.history-entry-change-action #{translate("file_action_edited")} 
					span.history-entry-change-doc {{ ::pathname }}
				li.history-entry-change(
					ng-repeat="project_op in ::$ctrl.entry.project_ops"
				)
					span.history-entry-change-action(
						ng-if="::project_op.rename"
					) #{translate("file_action_renamed")}
					span.history-entry-change-action(
						ng-if="::project_op.add"
					) #{translate("file_action_created")}
					span.history-entry-change-action(
						ng-if="::project_op.remove"
					) #{translate("file_action_deleted")}
					span.history-entry-change-doc {{ ::$ctrl.getProjectOpDoc(project_op) }}
			.history-entry-metadata
				time.history-entry-metadata-time {{ ::$ctrl.entry.meta.end_ts | formatDate:'h:mm a' }}
				span
					|
					| &bull;
					|
				ol.history-entry-metadata-users
					li.history-entry-metadata-user(ng-repeat="update_user in ::$ctrl.entry.meta.users")
						span.name(
							ng-if="::update_user && update_user.id != $ctrl.currentUser.id"
							ng-style="$ctrl.getUserCSSStyle(update_user);"
						) {{ ::$ctrl.displayName(update_user) }} 
						span.name(
							ng-if="::update_user && update_user.id == $ctrl.currentUser.id"
							ng-style="$ctrl.getUserCSSStyle(update_user);"
						) You
						span.name(
							ng-if="::update_user == null"
							ng-style="$ctrl.getUserCSSStyle(update_user);"
						) #{translate("anonymous")}
					li.history-entry-metadata-user(
						ng-if="::$ctrl.entry.meta.origin && $ctrl.entry.meta.users.length == 0"
						ng-switch on="::$ctrl.entry.meta.origin.kind"
					)
						span.name(
							ng-switch-when="history-resync"
							ng-style="$ctrl.getUserCSSStyle()"
						) #{translate("overleaf_history_system")}
						span.name(
							ng-switch-when="history-migration"
							ng-style="$ctrl.getUserCSSStyle()"
						) #{translate("overleaf_history_system")}
						span.name(
							ng-switch-default
							ng-style="$ctrl.getUserCSSStyle()"
						) #{translate("anonymous")}
					li.history-entry-metadata-user(ng-if="::!$ctrl.entry.meta.origin && $ctrl.entry.meta.users.length == 0")
						span.name(
							ng-style="$ctrl.getUserCSSStyle();"
						) #{translate("anonymous")}
				span(ng-if="::$ctrl.entry.meta.origin.kind === 'dropbox'")
					| (#{translate("history_entry_origin_dropbox")})
				span(ng-if="::$ctrl.entry.meta.origin.kind === 'upload'")
					| (#{translate("history_entry_origin_upload")})
				span(ng-if="::$ctrl.entry.meta.origin.kind === 'git-bridge'")
					| (#{translate("history_entry_origin_git")})
				span(ng-if="::$ctrl.entry.meta.origin.kind === 'github'")
					| (#{translate("history_entry_origin_github")})

			.history-entry-fromV-handle(
				ng-show="$ctrl.rangeSelectionEnabled && $ctrl.selectedHistoryRange && ((!$ctrl.isDragging && $ctrl.selectedHistoryRange.fromV === $ctrl.entry.fromV) || ($ctrl.isDragging && $ctrl.hoveredHistoryRange.fromV === $ctrl.entry.fromV))"
				history-draggable-boundary="fromV"
				history-draggable-boundary-on-drag-start="$ctrl.onDraggingStart()"
				history-draggable-boundary-on-drag-stop="$ctrl.onDraggingStop(isValidDrop, boundary)"
			)

script(type="text/ng-template", id="historyLabelsListTpl")
	.history-labels-list
		.history-version-with-label(
			ng-repeat="versionWithLabel in $ctrl.versionsWithLabels | orderBy:'-version' track by versionWithLabel.version"
			ng-class="{\
				'history-version-with-label-selected': !$ctrl.isDragging && $ctrl.isVersionSelected(versionWithLabel.version),\
				'history-version-with-label-selected-to': !$ctrl.isDragging && $ctrl.selectedHistoryRange.toV === versionWithLabel.version,\
				'history-version-with-label-selected-from': !$ctrl.isDragging && $ctrl.selectedHistoryRange.fromV === versionWithLabel.version,\
				'history-version-with-label-hover-selected': $ctrl.isDragging && $ctrl.isVersionHoverSelected(versionWithLabel.version),\
				'history-version-with-label-hover-selected-to': $ctrl.isDragging && $ctrl.hoveredHistoryRange.toV === versionWithLabel.version,\
				'history-version-with-label-hover-selected-from': $ctrl.isDragging && $ctrl.hoveredHistoryRange.fromV === versionWithLabel.version,\
			}"
			ng-click="$ctrl.handleVersionSelect(versionWithLabel)"
			history-droppable-area
			history-droppable-area-on-drop="$ctrl.onDrop(boundary, versionWithLabel)"
			history-droppable-area-on-over="$ctrl.onOver(boundary, versionWithLabel)"
		)
			.history-entry-toV-handle(
				ng-show="$ctrl.rangeSelectionEnabled && $ctrl.selectedHistoryRange && ((!$ctrl.isDragging && $ctrl.selectedHistoryRange.toV === versionWithLabel.version) || ($ctrl.isDragging && $ctrl.hoveredHistoryRange.toV === versionWithLabel.version))"
				history-draggable-boundary="toV"
				history-draggable-boundary-on-drag-start="$ctrl.onDraggingStart()"
				history-draggable-boundary-on-drag-stop="$ctrl.onDraggingStop(isValidDrop, boundary)"
			)
			div(
				ng-repeat="label in versionWithLabel.labels track by label.id"
			)
				history-label(
					show-tooltip="false"
					label-text="label.comment"
					is-owned-by-current-user="label.user_id === $ctrl.currentUser.id"
					on-label-delete="$ctrl.onLabelDelete({ label: label })"
					is-pseudo-current-state-label="label.isPseudoCurrentStateLabel"
				)
				.history-entry-label-metadata
					.history-entry-label-metadata-user(
						ng-if="!label.isPseudoCurrentStateLabel"
						ng-init="user = $ctrl.buildUserView(label)"
					)
						| Saved by 
						span.name(
							ng-if="user && user._id !== $ctrl.currentUser.id"
							ng-style="$ctrl.getUserCSSStyle(user, versionWithLabel);"
						) {{ ::user.displayName }}
						span.name(
							ng-if="user && user._id == $ctrl.currentUser.id"
							ng-style="$ctrl.getUserCSSStyle(user, versionWithLabel);"
						) You
						span.name(
							ng-if="user == null"
							ng-style="$ctrl.getUserCSSStyle(user, versionWithLabel);"
						) #{translate("anonymous")}
					time.history-entry-label-metadata-time {{ ::label.created_at | formatDate }}
			.history-entry-fromV-handle(
				ng-show="$ctrl.rangeSelectionEnabled && $ctrl.selectedHistoryRange && ((!$ctrl.isDragging && $ctrl.selectedHistoryRange.fromV === versionWithLabel.version) || ($ctrl.isDragging && $ctrl.hoveredHistoryRange.fromV === versionWithLabel.version))"
				history-draggable-boundary="fromV"
				history-draggable-boundary-on-drag-start="$ctrl.onDraggingStart()"
				history-draggable-boundary-on-drag-stop="$ctrl.onDraggingStop(isValidDrop, boundary)"
			)
			
		.loading(ng-show="$ctrl.isLoading")
			i.fa.fa-spin.fa-refresh
			| &nbsp;&nbsp; #{translate("loading")}…
