Overleaf/services/web/app/views/project/editor/binary-file.pug

div.binary-file.full-size(
	ng-controller="BinaryFileController"
	ng-show="ui.view == 'file'"
	ng-if="openFile"
)
	img(
		ng-show="!failedLoad"
		ng-src="/project/{{ project_id }}/file/{{ openFile.id }}"
		ng-if="isImageFile()"
		ng-class="{'img-preview': !imgLoaded}"
		onerror="sl_binaryFilePreviewError()"
		onabort="sl_binaryFilePreviewError()"
		onload="sl_binaryFilePreviewLoaded()"
	)

	img(
		ng-show="!failedLoad"
		ng-src="/project/{{ project_id }}/file/{{ openFile.id }}?format=png"
		ng-if="isPreviewableFile()"
		ng-class="{'img-preview': !imgLoaded}"
		onerror="sl_binaryFilePreviewError()"
		onabort="sl_binaryFilePreviewError()"
		onload="sl_binaryFilePreviewLoaded()"
	)
	
	div(ng-if="isTextFile() && !textPreview.error")
		div.text-loading(ng-show="textPreview.loading && !textPreview.error")
			| #{translate('loading')}...
		div.text-preview(ng-show="textPreview.data && !textPreview.loading && !textPreview.error")
			div.scroll-container
				p
					| {{ textPreview.data }}
				p(ng-show="textPreview.shouldShowDots")
					| ...
	
	p.no-preview(
		ng-if="failedLoad || textPreview.error || isUnpreviewableFile()"
	) #{translate("no_preview_available")}

	div.binary-file-footer
		// Linked Files: URL
		div(ng-if="openFile.linkedFileData.provider == 'url'")
			p
				i.fa.fa-fw.fa-external-link-square.fa-rotate-180.linked-file-icon
				| Imported from
				|
				a(ng-href='{{openFile.linkedFileData.url}}') {{ displayUrl(openFile.linkedFileData.url) }}
				|
				| at {{ openFile.created | formatDate:'h:mm a' }} {{ openFile.created | relativeDate }}

		// Linked Files: Project File
		div(ng-if="openFile.linkedFileData.provider == 'project_file'")
			p
				i.fa.fa-fw.fa-external-link-square.fa-rotate-180.linked-file-icon
				| Imported from
				|
				a(ng-if='!openFile.linkedFileData.v1_source_doc_id'
					ng-href='/project/{{openFile.linkedFileData.source_project_id}}' target="_blank")
					| {{ openFile.linkedFileData.source_project_display_name }}
				span(ng-if='openFile.linkedFileData.v1_source_doc_id')
					| {{ openFile.linkedFileData.source_project_display_name }}
				| /{{ openFile.linkedFileData.source_entity_path.slice(1) }},
				|
				| at {{ openFile.created | formatDate:'h:mm a' }} {{ openFile.created | relativeDate }}

		// Linked Files: Project Output File
		div(ng-if="openFile.linkedFileData.provider == 'project_output_file'")
			p
				i.fa.fa-fw.fa-external-link-square.fa-rotate-180.linked-file-icon
				| Imported from the output of
				|
				a(ng-if='!openFile.linkedFileData.v1_source_doc_id'
					ng-href='/project/{{openFile.linkedFileData.source_project_id}}' target="_blank")
					| {{ openFile.linkedFileData.source_project_display_name }}
				span(ng-if='openFile.linkedFileData.v1_source_doc_id')
					| {{ openFile.linkedFileData.source_project_display_name }}
				| : {{ openFile.linkedFileData.source_output_file_path }},
				|
				| at {{ openFile.created | formatDate:'h:mm a' }} {{ openFile.created | relativeDate }}

		// Bottom Controls
		span(ng-if="openFile.linkedFileData.provider")
			button.btn.btn-success(
				href, ng-click="refreshFile(openFile)",
				ng-disabled="refreshing"
			)
				i.fa.fa-fw.fa-refresh(ng-class={'fa-spin': refreshing})
				|
				span(ng-show="!refreshing") Refresh
				span(ng-show="refreshing") Refreshing...
			|  
		a.btn.btn-info(
			ng-href="/project/{{ project_id }}/file/{{ openFile.id }}"
		)
			i.fa.fa-fw.fa-download
			|
			| #{translate("download")}
		div(ng-if="refreshError")
			br
			.alert.alert-danger.col-md-6.col-md-offset-3
				| Error: {{ refreshError}}