div#trackChanges(ng-show="ui.view == 'track-changes'")
	aside.change-list(
		ng-controller="TrackChangesListController"
	)
		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") {{user.first_name}} {{user.last_name}}
							span(ng-if="update_user.id == user.id") You

	.diff.full-size
		.diff-editor.hide-ace-cursor(
			ace-editor,
			ng-show="!!trackChanges.diff && !trackChanges.diff.loading",
			theme="settings.theme",
			font-size="settings.fontSize",
			text="trackChanges.diff.text",
			annotations="trackChanges.diff.annotations",
			read-only="true"
		)
		.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 :(