aside.change-list(
	ng-if="history.isV2 && history.viewMode === HistoryViewModes.POINT_IN_TIME"
	ng-controller="HistoryV2ListController"
)
	history-entries-list(
		entries="history.updates"
		current-user="user"
		load-entries="loadMore()"
		load-disabled="history.loading || history.atEnd"
		load-initialize="ui.view == 'history'"
		is-loading="history.loading"
		on-entry-select="handleEntrySelect(selectedEntry)"
	)

aside.change-list(
	ng-if="history.isV2 && history.viewMode === HistoryViewModes.COMPARE"
	ng-controller="HistoryListController"
	infinite-scroll="loadMore()"
	infinite-scroll-disabled="history.loading || history.atEnd"
	infinite-scroll-initialize="ui.view == 'history'"
)
	.infinite-scroll-inner
		ul.list-unstyled(
			ng-class="{\
				'hover-state': history.hoveringOverListSelectors\
			}"
		)
			li.change(
				ng-repeat="update in history.updates"
				ng-class="{\
					'first-in-day': update.meta.first_in_day,\
					'selected': update.inSelection,\
					'selected-to': update.selectedTo,\
					'selected-from': update.selectedFrom,\
					'hover-selected': update.inHoverSelection,\
					'hover-selected-to': update.hoverSelectedTo,\
					'hover-selected-from': update.hoverSelectedFrom,\
				}"
				ng-controller="HistoryListItemController"
			)

				div.day(ng-show="update.meta.first_in_day") {{ update.meta.end_ts | relativeDate }}

				div.selectors
					div.range
					form
						input.selector-from(
							type="radio"
							name="fromVersion"
							ng-model="update.selectedFrom"
							ng-value="true"
							ng-mouseover="mouseOverSelectedFrom()"
							ng-mouseout="mouseOutSelectedFrom()"
							ng-show="update.afterSelection || update.inSelection"
						)
					form
						input.selector-to(
							type="radio"
							name="toVersion"
							ng-model="update.selectedTo"
							ng-value="true"
							ng-mouseover="mouseOverSelectedTo()"
							ng-mouseout="mouseOutSelectedTo()"
							ng-show="update.beforeSelection || update.inSelection"
						)

				div.description(ng-click="select()")
					div.time {{ update.meta.end_ts | formatDate:'h:mm a' }}
					div.action.action-edited(ng-if="history.isV2 && update.pathnames.length > 0")
						| #{translate("file_action_edited")}
					div.docs(ng-repeat="pathname in update.pathnames")
						.doc {{ pathname }}
					div.docs(ng-repeat="project_op in update.project_ops")
						div(ng-if="project_op.rename")
							.action #{translate("file_action_renamed")} 
							.doc {{ project_op.rename.pathname }} &rarr; {{ project_op.rename.newPathname }}
						div(ng-if="project_op.add")
							.action #{translate("file_action_created")}
							.doc {{ project_op.add.pathname }}
						div(ng-if="project_op.remove")
							.action #{translate("file_action_deleted")}
							.doc {{ project_op.remove.pathname }}
					div.users
						div.user(ng-repeat="update_user in update.meta.users")
							.color-square(ng-if="update_user != null", ng-style="{'background-color': 'hsl({{ update_user.hue }}, 70%, 50%)'}")
							.color-square(ng-if="update_user == null", ng-style="{'background-color': 'hsl(100, 70%, 50%)'}")
							.name(ng-if="update_user && update_user.id != user.id" ng-bind="displayName(update_user)") 
							.name(ng-if="update_user && update_user.id == user.id") You
							.name(ng-if="update_user == null") #{translate("anonymous")}
						div.user(ng-if="update.meta.users.length == 0")
							.color-square(style="background-color: hsl(100, 100%, 50%)")
							span #{translate("anonymous")}

		.loading(ng-show="history.loading")
			i.fa.fa-spin.fa-refresh
			| &nbsp;&nbsp; #{translate("loading")}...
			
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"
				entry="entry"
				current-user="$ctrl.currentUser"
				on-select="$ctrl.onEntrySelect({ selectedEntry: selectedEntry })"
				ng-show="!$ctrl.isLoading"
			)
			.loading(ng-show="$ctrl.isLoading")
				i.fa.fa-spin.fa-refresh
				| &nbsp;&nbsp; #{translate("loading")}...

script(type="text/ng-template", id="historyEntryTpl")
	.history-entry(
		ng-class="{\
			'history-entry-first-in-day': $ctrl.entry.meta.first_in_day,\
			'history-entry-selected': $ctrl.entry.inSelection,\
			'history-entry-selected-to': $ctrl.entry.selectedTo,\
			'history-entry-selected-from': $ctrl.entry.selectedFrom,\
			'history-entry-hover-selected': $ctrl.entry.inHoverSelection,\
			'history-entry-hover-selected-to': $ctrl.entry.hoverSelectedTo,\
			'history-entry-hover-selected-from': $ctrl.entry.hoverSelectedFrom,\
		}"
	)

		time.history-entry-day(ng-if="::$ctrl.entry.meta.first_in_day") {{ ::$ctrl.entry.meta.end_ts | relativeDate }}

		.history-entry-details(ng-click="$ctrl.onSelect({ selectedEntry: $ctrl.entry })")
			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.users.length == 0")
						span.name(
							ng-style="$ctrl.getUserCSSStyle();"
						) #{translate("anonymous")}