documize/gui/app/templates/components/document/content-linker.hbs

<div id={{concat "content-linker-modal-" page.id}} class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">Insert Link</div>
			<div class="modal-body">

				<div class="container">

					<div class="row">
						<div class="col mt-3 mb-5">
							<ul class="tabnav-control text-center">
								<li class="tab {{if tab1Selected 'selected'}}" {{action 'onTabSelect' 1}}>Section</li>
								<li class="tab {{if tab2Selected 'selected'}}" {{action 'onTabSelect' 2}}>Attachment</li>
								<li class="tab {{if tab3Selected 'selected'}}" {{action 'onTabSelect' 3}}>Search</li>
							</ul>
						</div>
					</div>

					{{#if showSections}}
						<div class="row">
							<div class="col content-linker-modal-container">
								<p>Link to content within this document</p>
								{{ui/ui-list-picker items=candidates.pages nameField='title' singleSelect=true onSelect=(action 'setSelection')}}
							</div>
						</div>
					{{/if}}

					{{#if showAttachments}}
						<div class="row">
							<div class="col content-linker-modal-container">
								<p>Link to an attachment within this document</p>
								<div class="widget-list-picker">
									<ul class="options">
										{{#each candidates.attachments as |item|}}
											<li class="option {{if item.selected 'selected'}}" {{action 'setSelection' item}}>
												<div class="text text-truncate">
													<img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}" />
													{{item.title}}
												</div>
												{{#if item.selected}}
													<i class="material-icons">check</i>
												{{/if}}
											</li>
										{{/each}}
									</ul>
								</div>
							</div>
						</div>
					{{/if}}

					{{#if showSearch}}
						<div class="row">
							<div class="col content-linker-modal-container">
								<div class="input-control">
									<label>Search</label>
									<div class="tip">For content or attachments</div>
									{{focus-input id="content-linker-search" type="input" value=keywords placeholder="keyword search" autocomplete="off"}}
								</div>
								{{#unless hasMatches}}
								Nothing found.
								{{/unless}}
								<div class="widget-list-picker">
									<ul class="options">
										{{#each matches.documents as |item|}}
											<li class="option {{if item.selected 'selected'}}" {{action 'setSelection' item}}>
												<div class="text text-truncate">
													{{item.title}}<br/>{{item.context}}
												</div>
												{{#if item.selected}}
													<i class="material-icons">check</i>
												{{/if}}
											</li>
										{{/each}}
										{{#each matches.pages as |item|}}
											<li class="option {{if item.selected 'selected'}}" {{action 'setSelection' item}}>
												<div class="text text-truncate">
													{{item.title}}<br/>{{item.context}}
												</div>
												{{#if item.selected}}
													<i class="material-icons">check</i>
												{{/if}}
											</li>
										{{/each}}
										{{#each matches.attachments as |item|}}
											<li class="option {{if item.selected 'selected'}}" {{action 'setSelection' item}}>
												<div class="text text-truncate">
													<img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}" />
													{{item.title}}
												</div>
												{{#if item.selected}}
													<i class="material-icons">check</i>
												{{/if}}
											</li>
										{{/each}}
									</ul>
								</div>
							</div>
						</div>
					{{/if}}

				</div>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-outline-secondary" {{action 'onCancel'}}>Cancel</button>
				<button type="button" class="btn btn-success" {{action 'onInsertLink'}}>Insert</button>
			</div>
		</div>
	</div>
</div>