<section id="commits-view" class="section--settings section--collapsible" tabindex="-1">
	<div class="section__header">
		<h2>
			Commits view
			<a
				class="link__learn-more"
				title="Learn more"
				href="https://help.gitkraken.com/gitlens/side-bar/#commits-view"
			>
				<i class="icon icon__info"></i>
			</a>
		</h2>

		<p class="section__header-hint">
			Adds a
			<a class="command command--show-view" title="Show View in Side Bar" href="command:gitlens.showCommitsView"
				>Commits view</a
			>
			to visualize, explore, and manage Git commits
		</p>
	</div>

	<div class="section__collapsible">
		<div class="section__group">
			<div class="section__content">
				<div class="settings settings--fixed ml-1">
					<div class="setting">
						<div class="setting__input setting__input--inner-select">
							<input
								id="views.commits.showBranchComparison"
								name="views.commits.showBranchComparison"
								type="checkbox"
								value="working"
								data-setting
							/>
							<label for="views.commits.showBranchComparison">Show a comparison of the</label>
							<div class="select-container">
								<select
									id="views.commits.showBranchComparison"
									name="views.commits.showBranchComparison"
									data-setting
									data-enablement="views.commits.showBranchComparison !false"
								>
									<option value="branch">current branch</option>
									<option value="working">working tree</option>
								</select>
							</div>
							<label for="views.commits.showBranchComparison"
								>with a user-selected reference (branch, tag, etc)
							</label>
						</div>
					</div>

					<div class="section__group">
						<div class="section__content">
							<div class="settings settings--fixed">
								<div class="setting">
									<div class="setting__input">
										<input
											id="views.commits.pullRequests.enabled"
											name="views.commits.pullRequests.enabled"
											type="checkbox"
											data-setting
										/>
										<label for="views.commits.pullRequests.enabled"
											>Show associated pull requests</label
										>
									</div>
									<p class="setting__hint">
										Requires a connection to a supported remote service (e.g. GitHub)
									</p>
								</div>

								<div class="settings settings--fixed ml-2">
									<div class="setting" data-enablement="views.commits.pullRequests.enabled">
										<div class="setting__input">
											<input
												id="views.commits.pullRequests.showForBranches"
												name="views.commits.pullRequests.showForBranches"
												type="checkbox"
												data-setting
												disabled
											/>
											<label for="views.commits.pullRequests.showForBranches"
												>Show the pull request associated with the current branch</label
											>
										</div>
									</div>

									<div class="setting" data-enablement="views.commits.pullRequests.enabled">
										<div class="setting__input">
											<input
												id="views.commits.pullRequests.showForCommits"
												name="views.commits.pullRequests.showForCommits"
												type="checkbox"
												data-setting
												disabled
											/>
											<label for="views.commits.pullRequests.showForCommits"
												>Show the pull request that introduced each commit</label
											>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="setting">
						<div class="setting__input">
							<label for="views.commits.files.layout">Layout files</label>
							<div class="select-container">
								<select id="views.commits.files.layout" name="views.commits.files.layout" data-setting>
									<option value="auto">automatically</option>
									<option value="list">as a list</option>
									<option value="tree">as a tree</option>
								</select>
							</div>
						</div>
						<p class="setting__hint" data-visibility="views.commits.files.layout =auto">
							Chooses the best layout based on the number of files at each nesting level
						</p>
					</div>

					<div class="setting">
						<div class="setting__input">
							<label for="views.commits.files.icon">File icons</label>
							<div class="select-container">
								<select id="views.commits.files.icon" name="views.commits.files.icon" data-setting>
									<option value="type">show file type (default)</option>
									<option value="status">show file status</option>
								</select>
							</div>
						</div>
					</div>

					<div class="setting">
						<div class="setting__input">
							<input
								id="views.commits.files.compact"
								name="views.commits.files.compact"
								type="checkbox"
								data-setting
							/>
							<label for="views.commits.files.compact">Use compact file layout</label>
						</div>
						<p class="setting__hint">Compacts (flattens) unnecessary nesting when using a tree layouts</p>
					</div>

					<div class="setting">
						<div class="setting__input">
							<input
								id="views.commits.avatars"
								name="views.commits.avatars"
								type="checkbox"
								data-setting
							/>
							<label for="views.commits.avatars">Use author avatars</label>
						</div>
					</div>

					<div class="setting">
						<div class="setting__input setting__input--format">
							<label for="views.formats.commits.label">Commit&nbsp;label&nbsp;format</label>
							<input
								id="views.formats.commits.label"
								name="views.formats.commits.label"
								type="text"
								placeholder="${❰ tips ❱➤  }${message}"
								data-setting
								data-setting-preview
								data-default-value="${❰ tips ❱➤  }${message}"
								data-popup-trigger
							/>
							<label for="views.formats.commits.label" title="See available tokens">
								<i class="icon icon__chevron-down"></i>
							</label>
						</div>
						<div id="views.formats.commits.label.popup" class="popup hidden"></div>
						<span class="setting__hint"
							>Example:
							<span
								data-setting-preview="views.formats.commits.label"
								data-setting-preview-type="commit"
								data-setting-preview-default="${❰ tips ❱➤  }${message}"
							></span>
						</span>
					</div>

					<div class="setting">
						<div class="setting__input setting__input--format">
							<label for="views.formats.commits.description">Commit&nbsp;description&nbsp;format</label>
							<input
								id="views.formats.commits.description"
								name="views.formats.commits.description"
								type="text"
								placeholder="${author, }${agoOrDate}"
								data-setting
								data-setting-preview
								data-default-value="${author, }${agoOrDate}"
								data-popup-trigger
							/>
							<label for="views.formats.commits.description" title="See available tokens">
								<i class="icon icon__chevron-down"></i>
							</label>
						</div>
						<div id="views.formats.commits.description.popup" class="popup hidden"></div>
						<span class="setting__hint"
							>Example:
							<span
								data-setting-preview="views.formats.commits.description"
								data-setting-preview-type="commit"
								data-setting-preview-default="${author, }${agoOrDate}"
							></span>
						</span>
					</div>
				</div>
			</div>

			<div class="section__preview">
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-auto-compare+pr+commit-pr.webp"
					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-auto-compare+pr.webp"
					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-auto-compare+commit-pr.webp"
					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-auto-compare.webp"
					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled =false"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-auto-compare.webp"
					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-auto-pr+commit-pr.webp"
					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-auto-pr.webp"
					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-auto-commit-pr.webp"
					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-auto.webp"
					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled =false"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-auto.webp"
					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
					loading="lazy"
					width="600"
					height="400"
				/>

				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-tree-compare+pr+commit-pr.webp"
					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-tree-compare+pr.webp"
					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits = false"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-tree-compare+commit-pr.webp"
					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-tree-compare.webp"
					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled =false"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-tree-compare.webp"
					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false "
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-tree-pr+commit-pr.webp"
					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-tree-pr.webp"
					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-tree-commit-pr.webp"
					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-tree.webp"
					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled =false"
					loading="lazy"
					width="600"
					height="400"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/commits-view-tree.webp"
					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
					loading="lazy"
					width="600"
					height="400"
				/>
			</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.views.commits%22"
					>Settings UI</a
				>
				and search for <b><i>gitlens.views.commits</i></b> or
				<b><i>gitlens.views</i></b>
			</p>
		</div>
	</div>
</section>
