div#trackChanges(ng-show="ui.view == 'track-changes'")
	.upgrade-prompt(ng-show="!project.features.versioning")
		.message(ng-show="project.owner._id == user.id")
			p You need to upgrade your account to use the History feature.
			p
				a.btn.btn-info(
					href="/user/subscription/plans"
					target="_blank"
					ng-click="startedFreeTrial = true"
				) Start Free Trial
			p.small(ng-show="startedFreeTrial") Please refresh the page after starting your free trial.
		.message(ng-show="project.owner._id != user.id")
			p Please ask the project owner to upgrade to use the History feature.

	aside.change-list(
		ng-controller="TrackChangesListController"
		infinite-scroll="loadMore()"
		infinite-scroll-disabled="trackChanges.loading || trackChanges.atEnd"
		infinite-scroll-initialize="ui.view == 'track-changes'"
	)
		.infinite-scroll-inner
			ul.list-unstyled(
				ng-class="{\
					'hover-state': trackChanges.hoveringOverListSelectors\
				}"
			)
				li.change(
					ng-repeat="update in trackChanges.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="TrackChangesListItemController"
				)

					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.docs(ng-repeat="(doc_id, doc) in update.docs")
							span.doc {{ doc.entity.name }}
						div.users
							div.user(ng-repeat="update_user in update.meta.users")
								.color-square(ng-style="{'background-color': 'hsl({{ update_user.hue }}, 100%, 50%)'}")
								span(ng-if="update_user.id != user.id") {{update_user.first_name}} {{update_user.last_name}}
								span(ng-if="update_user.id == user.id") You
							div.user(ng-if="update.meta.users.length == 0")
								.color-square(style="background-color: hsl(100, 100%, 50%)")
								span Anonymous

			.loading(ng-show="trackChanges.loading")
				i.fa.fa-spin.fa-refresh
				|   Loading...

	.diff.full-size(ng-controller="TrackChangesDiffController")
		.diff-editor.hide-ace-cursor(
			ace-editor="track-changes",
			ng-show="!!trackChanges.diff && !trackChanges.diff.loading && !trackChanges.diff.deleted",
			theme="settings.theme",
			font-size="settings.fontSize",
			text="trackChanges.diff.text",
			highlights="trackChanges.diff.highlights",
			read-only="true",
			resize-on="layout:main:resize"
		)
		.diff-deleted.text-centered(
			ng-show="trackChanges.diff.deleted"
		)
			p.text-serif {{ trackChanges.diff.doc.name }} has been deleted.
			p 
				a.btn.btn-primary.btn-lg(
					href,
					ng-click="restoreDeletedDoc()"
				) Restore
		.loading-panel(ng-show="trackChanges.diff.loading")
			i.fa.fa-spin.fa-refresh
			|   Loading...
		.error-panel(ng-show="trackChanges.diff.error")
			.alert.alert-danger Sorry, something went wrong :(