<section id="status-bar" class="section--settings section--collapsible" tabindex="-1">
	<div class="section__header">
		<div class="setting__input setting__input--big">
			<input id="statusBar.enabled" name="statusBar.enabled" type="checkbox" data-setting />
			<label for="statusBar.enabled">Status Bar Blame</label>
			<a
				class="link__learn-more"
				title="Learn more"
				href="https://help.gitkraken.com/gitlens/gitlens-features/#status-bar-blame"
			>
				<i class="icon icon__info"></i>
			</a>
		</div>

		<p class="section__header-hint">Adds a Git blame annotation about the current line to the status bar</p>
	</div>

	<div class="section__collapsible">
		<div class="section__group">
			<div class="section__content">
				<div class="settings settings--fixed ml-1">
					<div class="setting" data-enablement="statusBar.enabled">
						<div class="setting__input">
							<input
								id="statusBar.pullRequests.enabled"
								name="statusBar.pullRequests.enabled"
								type="checkbox"
								data-setting
								disabled
							/>
							<label for="statusBar.pullRequests.enabled"
								>Show the Pull Request (if any) that introduced the commit</label
							>
						</div>

						<p class="setting__hint hidden" data-visibility="statusBar.pullRequests.enabled">
							<i class="icon icon__info"></i>Requires a connection to a supported remote service (e.g.
							GitHub)
						</p>
					</div>

					<div class="setting" data-enablement="statusBar.enabled">
						<div class="setting__input setting__input--format">
							<label for="statusBar.format">Annotation&nbsp;format</label>
							<input
								id="statusBar.format"
								name="statusBar.format"
								type="text"
								placeholder="${author}, ${agoOrDate}${' via 'pullRequest}"
								data-setting
								data-setting-preview
								data-default-value="${author}, ${agoOrDate}${' via 'pullRequest}"
								data-popup-trigger
								disabled
							/>
							<label for="statusBar.format" title="See available tokens">
								<i class="icon icon__chevron-down"></i>
							</label>
						</div>
						<div id="statusBar.format.popup" class="popup hidden"></div>
						<span class="setting__hint"
							>Example:
							<span
								data-setting-preview="statusBar.format"
								data-setting-preview-type="commit"
								data-setting-preview-default="${author}, ${agoOrDate}${' via 'pullRequest}"
							></span>
						</span>
					</div>

					<div class="setting" data-enablement="statusBar.enabled">
						<div class="setting__input">
							<label for="statusBar.alignment">Position the annotation on the</label>
							<div class="select-container">
								<select id="statusBar.alignment" name="statusBar.alignment" data-setting disabled>
									<option value="left">left</option>
									<option value="right">right</option>
								</select>
							</div>
						</div>
					</div>

					<div class="setting" data-enablement="statusBar.enabled">
						<div class="setting__input">
							<label class="nowrap" for="statusBar.command">When clicked</label>
							<div class="select-container">
								<select id="statusBar.command" name="statusBar.command" data-setting disabled>
									<option value="gitlens.toggleFileBlame">toggles the file blame</option>
									<option value="gitlens.toggleFileHeatmap">toggles the file heatmap</option>
									<option value="gitlens.toggleFileChanges">
										toggles the file changes since before the commit
									</option>
									<option value="gitlens.toggleFileChangesOnly">
										toggles the file changes from the commit
									</option>
									<option value="gitlens.toggleCodeLens">toggles the Git CodeLens</option>
									<option value="gitlens.diffWithPrevious">
										opens line changes with the previous revision
									</option>
									<option value="gitlens.diffWithWorking">
										opens line changes with the working file
									</option>
									<option value="gitlens.revealCommitInView">
										reveals the commit in the Side Bar
									</option>
									<option value="gitlens.showCommitsInView">shows details of the commit</option>
									<option value="gitlens.showQuickCommitDetails">
										shows quick details of the commit (default)
									</option>
									<option value="gitlens.showQuickCommitFileDetails">
										shows quick file details of the commit
									</option>
									<option value="gitlens.showQuickFileHistory">shows the current file history</option>
									<option value="gitlens.showQuickRepoHistory">
										shows the current branch history
									</option>
									<option value="gitlens.openCommitOnRemote">
										opens the commit on the remote service (when available)
									</option>
									<option value="gitlens.copyRemoteCommitUrl">
										copies the remote commit URL to the clipboard (when available)
									</option>
									<option value="gitlens.openFileOnRemote">
										opens the file revision on the remote service (when available)
									</option>
									<option value="gitlens.copyRemoteFileUrl">
										copies the remote file revision URL to the clipboard (when available)
									</option>
								</select>
							</div>
						</div>
					</div>

					<div class="setting" data-enablement="statusBar.enabled">
						<div class="setting__input">
							<input
								id="statusBar.reduceFlicker"
								name="statusBar.reduceFlicker"
								type="checkbox"
								data-setting
								disabled
							/>
							<label for="statusBar.reduceFlicker">Reduce flashing when updating the annotation</label>
						</div>
						<p class="setting__hint">
							Avoids clearing the previous blame information when changing lines to reduce status bar
							"flashing"
						</p>
					</div>
				</div>
			</div>

			<div class="section__preview">
				<img
					class="image__preview"
					src="#{webroot}/media/status-bar.webp"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/status-bar-right+pr.webp"
					data-visibility="statusBar.enabled &amp; statusBar.alignment =right &amp; statusBar.pullRequests.enabled"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/status-bar-right.webp"
					data-visibility="statusBar.enabled &amp; statusBar.alignment =right &amp; statusBar.pullRequests.enabled =false"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/status-bar-left+pr.webp"
					data-visibility="statusBar.enabled &amp; statusBar.alignment =left &amp; statusBar.pullRequests.enabled"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/status-bar-left.webp"
					data-visibility="statusBar.enabled &amp; statusBar.alignment =left &amp; statusBar.pullRequests.enabled =false"
					loading="lazy"
					width="600"
					height="206"
				/>
			</div>
		</div>

		<div class="section__group">
			<p class="section__hint">
				<i class="icon icon__info"></i> For more options, open the
				<a
					class="secondary"
					title="Open Settings UI"
					href="command:workbench.action.openSettings?%22gitlens.statusBar%22"
					>Settings UI</a
				>
				and search for <b><i>gitlens.statusBar</i></b>
			</p>
		</div>
	</div>
</section>
