Overleaf/services/web/app/views/project/list/modals.pug

script(type='text/ng-template', id='newTagModalTemplate')
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) ×
		h3 #{translate("create_new_folder")}
	.modal-body
		form(name="newTagForm", novalidate)
			input.form-control(
				type="text",
				placeholder="New Folder Name",
				required,
				ng-model="inputs.newTagName",
				on-enter="create()",
				focus-on="open",
				stop-propagation="click"
			)
	.modal-footer
		.modal-footer-left
			span.text-danger.error(ng-show="state.error") #{translate("generic_something_went_wrong")}
		//- We stop propagation to stop the clicks from closing the
		//- 'move to folder' menu.
		button.btn.btn-default(
			ng-click="cancel()"
			stop-propagation="click"
		) #{translate("cancel")}
		button.btn.btn-primary(
			ng-disabled="newTagForm.$invalid || state.inflight"
			ng-click="create()"
			stop-propagation="click"
		)
			span(ng-show="!state.inflight") #{translate("create")}
			span(ng-show="state.inflight") #{translate("creating")}...

script(type='text/ng-template', id='deleteTagModalTemplate')
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) ×
		h3 #{translate("delete_folder")}
	.modal-body
		p #{translate("about_to_delete_folder")}
		ul
			li
				strong {{tag.name}}
	.modal-footer
		.modal-footer-left
			span.text-danger.error(ng-show="state.error") #{translate("generic_something_went_wrong")}
		button.btn.btn-default(
			ng-click="cancel()"
		) #{translate("cancel")}
		button.btn.btn-danger(
			ng-click="delete()",
			ng-disabled="state.inflight"
		)
			span(ng-show="state.inflight") #{translate("deleting")}...
			span(ng-show="!state.inflight") #{translate("delete")}

script(type='text/ng-template', id='renameTagModalTemplate')
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) ×
		h3 #{translate("rename_folder")}
	.modal-body
		form(name="renameTagForm", novalidate)
			input.form-control(
				type="text",
				placeholder="Tag Name",
				ng-model="inputs.tagName",
				required,
				on-enter="rename()",
				focus-on="open"
			)
	.modal-footer
		.modal-footer-left
			span.text-danger.error(ng-show="state.error") #{translate("generic_something_went_wrong")}
		button.btn.btn-default(ng-click="cancel()") #{translate("cancel")}
		button.btn.btn-primary(
			ng-click="rename()",
			ng-disabled="renameTagForm.$invalid || state.inflight"
		)
			span(ng-show="!state.inflight") #{translate("rename")}
			span(ng-show="state.inflight") #{translate("renaming")}...

script(type='text/ng-template', id='renameProjectModalTemplate')
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) ×
		h3 #{translate("rename_project")}
	.modal-body
		.alert.alert-danger(ng-show="state.error.message") {{ state.error.message}} 
		.alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")}
		form(name="renameProjectForm", novalidate)
			input.form-control(
				type="text",
				placeholder="Project Name",
				ng-model="inputs.projectName",
				required,
				on-enter="rename()",
				focus-on="open"
			)
	.modal-footer
		button.btn.btn-default(ng-click="cancel()") #{translate("cancel")}
		button.btn.btn-primary(
			ng-click="rename()",
			ng-disabled="renameProjectForm.$invalid || state.inflight"
		)
			span(ng-show="!state.inflight") #{translate("rename")}
			span(ng-show="state.inflight") #{translate("renaming")}...

script(type='text/ng-template', id='cloneProjectModalTemplate')
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) ×
		h3 #{translate("copy_project")}
	.modal-body
		.alert.alert-danger(ng-show="state.error.message") {{ state.error.message}} 
		.alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")}
		form(name="cloneProjectForm", novalidate)
			.form-group
				label #{translate("new_name")}
				input.form-control(
					type="text",
					placeholder="New Project Name",
					required,
					ng-model="inputs.projectName",
					on-enter="clone()",
					focus-on="open"
				)
	.modal-footer
		button.btn.btn-default(
			ng-disabled="state.inflight"
			ng-click="cancel()"
		) #{translate("cancel")}
		button.btn.btn-primary(
			ng-disabled="cloneProjectForm.$invalid || state.inflight"
			ng-click="clone()"
		)
			span(ng-hide="state.inflight") #{translate("copy")}
			span(ng-show="state.inflight") #{translate("copying")} ...

script(type='text/ng-template', id='newProjectModalTemplate')
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) ×
		h3 #{translate("new_project")}
	.modal-body
		.alert.alert-danger(ng-show="state.error.message") {{ state.error.message}} 
		.alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")}
		form(novalidate, name="newProjectForm")
			input.form-control(
				type="text",
				placeholder="Project Name",
				required,
				ng-model="inputs.projectName",
				on-enter="create()",
				focus-on="open"
			)
	.modal-footer
		button.btn.btn-default(
			ng-disabled="state.inflight"
			ng-click="cancel()"
		) #{translate("cancel")}
		button.btn.btn-primary(
			ng-disabled="newProjectForm.$invalid || state.inflight"
			ng-click="create()"
		)
			span(ng-hide="state.inflight") #{translate("create")}
			span(ng-show="state.inflight") #{translate("creating")} ...

script(type='text/ng-template', id='deleteProjectsModalTemplate')
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) ×
		h3(ng-if="action == 'delete'") #{translate("delete_projects")}
		h3(ng-if="action == 'leave'") #{translate("leave_projects")}
		h3(ng-if="action == 'delete-and-leave'") #{translate("delete_and_leave_projects")}
	.modal-body
		div(ng-show="projectsToDelete.length > 0")
			p #{translate("about_to_delete_projects")}
			ul
				li(ng-repeat="project in projectsToDelete | orderBy:'name'")
					strong {{project.name}}
		div(ng-show="projectsToLeave.length > 0")
			p #{translate("about_to_leave_projects")}
			ul
				li(ng-repeat="project in projectsToLeave | orderBy:'name'")
					strong {{project.name}}
	.modal-footer
		button.btn.btn-default(
			ng-click="cancel()"
		) #{translate("cancel")}
		button.btn.btn-danger(
			ng-click="delete()"
		) #{translate("confirm")}

script(type="text/template", id="qq-project-uploader-template")
	div.qq-uploader-selector
		div(qq-hide-dropzone="").qq-upload-drop-area-selector.qq-upload-drop-area
			span.qq-upload-drop-area-text-selector #{translate('drop_files_here_to_upload')}
		div.qq-upload-button-selector.btn.btn-primary.btn-lg
			div #{translate('select_a_zip_file')}
		span.or.btn-lg #{translate('or')}
		span.drag-here.btn-lg #{translate('drag_a_zip_file')}
		span.qq-drop-processing-selector
			span #{translate('creating_project')}
			span.qq-drop-processing-spinner-selector
		ul.qq-upload-list-selector
			li
				div.qq-progress-bar-container-selector
					div(
						role="progressbar"
						aria-valuenow="0"
						aria-valuemin="0"
						aria-valuemax="100"
						class="qq-progress-bar-selector qq-progress-bar"
					)
				span.qq-upload-file-selector.qq-upload-file
				span.qq-upload-size-selector.qq-upload-size
				a(type="button").qq-btn.qq-upload-cancel-selector.qq-upload-cancel #{translate('cancel')}
				button(type="button").qq-btn.qq-upload-retry-selector.qq-upload-retry #{translate('retry')}
				span(role="status").qq-upload-status-text-selector.qq-upload-status-text

script(type="text/ng-template", id="uploadProjectModalTemplate")
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) ×
		h3 #{translate("upload_zipped_project")}
	.modal-body(
		fine-upload
		endpoint="/project/new/upload"
		template-id="qq-project-uploader-template"
		multiple="false"
		allowed-extensions="['zip']"
		on-complete-callback="onComplete"
	)
	.modal-footer
		button.btn.btn-default(ng-click="cancel()") #{translate("cancel")}

script(type="text/ng-template", id="userProfileModalTemplate")
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="done()"
		) ×
		h3 #{translate("your_profile")}
	.modal-body
		form(enctype='multipart/form-data', method='post')

			.form-group
				label(for="first_name") #{translate("first_name")}
				input.form-control(
					type='text',
					name='first_name',
					ng-model="userInfoForm.first_name",
					placeholder="First Name",
					select-when="formVisable"
				)

			.form-group
				label(for="last_name") #{translate("last_name")}
				input.form-control(
					type='text',
					name='last_name',
					ng-model="userInfoForm.last_name",
					placeholder='Last Name'
				)

			.form-group.user_details_auto_complete
				label(for="institution") #{translate("institution")}
				autocomplete(
					ng-model="userInfoForm.institution",
					name="institution",
					data="institutions",
					on-type="updateInstitutionsList",
					attr-placeholder="Institution",
					attr-inputclass="form-control"
				)

			.form-group.user_details_auto_complete
				label(for="role") #{translate("role")}
				autocomplete(
					ng-model="userInfoForm.role",
					name="role",
					data="roles",
					attr-placeholder="Role",
					attr-inputclass="form-control"
				)


	.modal-footer
		button.btn.btn-info(ng-click="done()") #{translate("done")}

script(type="text/ng-template", id="v1ImportModalTemplate")
	.modal-header
		button.close(ng-click="dismiss()") ×
		h3 Move Project to Overleaf v2

	.modal-body.v1-import-wrapper
		.v1-import-step-1(ng-show="step === 1")
			.v1-import-row
				.v1-import-col
					img.v1-import-img(
						src="/img/v1-import/v2-editor.png"
						alt="The new V2 Editor."
					)
				.v1-import-col
					h2.v1-import-title Try the Overleaf v2 Editor
					p The Overleaf v2 editor has many great new features including:
					ul
						li Faster real-time collaboration
						li See your coauthors’ cursors
						li Chat with math support
						li Tracked changes and commenting
						li Improved LaTeX autocomplete
						li Two-way Dropbox sync
			p.v1-import-cta Would you like to move #[strong {{project.name}}] into Overleaf v2?

		.v1-import-step-2(ng-show="step === 2")
			.v1-import-row
				.v1-import-warning.v1-import-col(aria-label="Warning symbol.")
					i.fa.fa-flask
				.v1-import-col
					h2.v1-import-title #[strong Warning:] Overleaf v2 is Experimental
					p We are still working hard to bring some Overleaf v1 features to the v2 editor. In v2 there is:
					ul
						li <strong>No Journals and Services</strong> menu to submit directly to our partners yet
						li <strong>No Rich Text (WYSIWYG)</strong> mode yet
						li <strong>No linked files</strong> (to URLs or to files in other Overleaf projects) yet
						li <strong>No Zotero and CiteULike</strong> integrations yet
						li <strong>No labelled versions</strong> yet
					p.row-spaced-small
						| If you currently use the <strong>Overleaf Git bridge</strong> with your v1 project, you can migrate your project to the Overleaf v2 GitHub integration.
						|
						a(href='https://www.overleaf.com/help/343-working-offline-in-overleaf-v2', target='_blank') Read More.
			.v1-import-cta
				p
					strong Please note: you cannot move this project back to v1 once you have moved it to v2. If this is an important project, please consider making a clone in v1 before you move the project to v2.
				p Are you sure you want to move #[strong {{project.name}}] into Overleaf v2?

	.modal-footer.v1-import-footer
		div(ng-show="step === 1")
			if settings.overleaf && settings.overleaf.host
				a.btn.btn-primary.v1-import-btn(
					ng-href=settings.overleaf.host + "/{{project.id}}"
				) No thanks, open in v1
			button.btn.btn-primary.v1-import-btn(
				ng-click="moveToConfirmation()"
			) Yes, move project to v2
		div(ng-show="step === 2")
			form(
				async-form="v1Import",
				name="v1ImportForm",
				action="{{'/overleaf/project/'+ project.id + '/import'}}"
				method="POST"
				ng-cloak
			)
				input(name='_csrf', type='hidden', value=csrfToken)
				form-messages(for="v1ImportForm")
				if settings.overleaf && settings.overleaf.host
					a.btn.btn-primary.v1-import-btn(
						ng-href=settings.overleaf.host + "/{{project.id}}"
						ng-class="{disabled: v1ImportForm.inflight || v1ImportForm.response.success}"
					) No thanks, open in v1
				input.btn.btn-primary.v1-import-btn(
					type="submit",
					value="Yes, move project to v2"
					ng-disabled="v1ImportForm.inflight || v1ImportForm.response.success"
				)