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

		<p class="section__header-hint">Adds detailed blame information accessible via hovers</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="hovers.enabled">
						<div class="setting__input">
							<input id="hovers.avatars" name="hovers.avatars" type="checkbox" data-setting disabled />
							<label for="hovers.avatars">Use author avatars</label>
						</div>
					</div>

					<div class="section__group">
						<div class="section__content">
							<div class="settings settings--fixed">
								<div class="setting" data-enablement="hovers.enabled">
									<div class="setting__input">
										<input
											id="hovers.autolinks.enabled"
											name="hovers.autolinks.enabled"
											type="checkbox"
											data-setting
											disabled
										/>
										<label for="hovers.autolinks.enabled">Show autolinks in commit messages</label>
									</div>
								</div>

								<div class="settings settings--fixed ml-2">
									<div
										class="setting"
										data-enablement="hovers.enabled &amp; hovers.autolinks.enabled"
									>
										<div class="setting__input">
											<input
												id="hovers.autolinks.enhanced"
												name="hovers.autolinks.enhanced"
												type="checkbox"
												data-setting
												disabled
											/>
											<label for="hovers.autolinks.enhanced"
												>Enhance autolinks with remote details</label
											>
										</div>
										<p class="setting__hint">
											Requires a connection to a supported remote service (e.g. GitHub)
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="setting" data-enablement="hovers.enabled">
						<div class="setting__input">
							<input
								id="hovers.pullRequests.enabled"
								name="hovers.pullRequests.enabled"
								type="checkbox"
								data-setting
								disabled
							/>
							<label for="hovers.pullRequests.enabled"
								>Show the Pull Request (if any) that introduced the commit</label
							>
						</div>

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

		<div class="section__group section__group--rev mt-05">
			<div class="section__content">
				<div class="settings settings--fixed ml-1">
					<div class="setting hidden" data-visibility="currentLine.enabled" data-enablement="hovers.enabled">
						<div class="setting__input">
							<input
								id="hovers.currentLine.enabled"
								name="hovers.currentLine.enabled"
								type="checkbox"
								data-setting
								disabled
							/>
							<label for="hovers.currentLine.enabled">Show hovers for the current line</label>
						</div>
					</div>

					<div
						class="setting hidden"
						data-visibility="currentLine.enabled =false"
						data-enablement="hovers.enabled"
					>
						<div class="setting__input">
							<input
								id="hovers.currentLine.enabled-1"
								name="hovers.currentLine.enabled"
								type="checkbox"
								data-setting
								data-add-settings-on="hovers.currentLine.over=line"
								disabled
							/>
							<label for="hovers.currentLine.enabled-1">Show hovers for the current line</label>
						</div>
					</div>

					<div class="settings settings--fixed ml-2">
						<div
							class="setting hidden"
							data-visibility="currentLine.enabled"
							data-enablement="hovers.enabled &amp; hovers.currentLine.enabled"
						>
							<div class="setting__input">
								<label for="hovers.currentLine.over">Shown when over the</label>
								<div class="select-container">
									<select
										id="hovers.currentLine.over"
										name="hovers.currentLine.over"
										data-setting
										disabled
									>
										<option value="annotation">annotation only</option>
										<option value="line">line &amp; annotation</option>
									</select>
								</div>
							</div>
						</div>

						<div
							class="setting hidden"
							data-visibility="currentLine.enabled =false"
							data-enablement="hovers.enabled &amp; hovers.currentLine.enabled &amp; currentLine.enabled"
						>
							<div class="setting__input">
								<label for="hovers.currentLine.over">Shown when over the</label>
								<div class="select-container">
									<select
										id="hovers.currentLine.over"
										name="hovers.currentLine.over"
										data-setting
										disabled
									>
										<option value="annotation">annotation only</option>
										<option value="line">line</option>
									</select>
								</div>
							</div>
						</div>

						<div class="setting" data-enablement="hovers.enabled &amp; hovers.currentLine.enabled">
							<div class="setting__input">
								<input
									id="hovers.currentLine.details"
									name="hovers.currentLine.details"
									type="checkbox"
									data-setting
									disabled
								/>
								<label for="hovers.currentLine.details">Add blame details</label>
							</div>
						</div>

						<div class="setting" data-enablement="hovers.enabled &amp; hovers.currentLine.enabled">
							<div class="setting__input">
								<input
									id="hovers.currentLine.changes"
									name="hovers.currentLine.changes"
									type="checkbox"
									data-setting
									disabled
								/>
								<label for="hovers.currentLine.changes">Add changes (diff)</label>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="section__preview" data-visibility="hovers.enabled">
				<img
					class="image__preview"
					src="#{webroot}/media/hovers-currentLine.webp"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-currentLine-on.webp"
					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled =false"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-currentLine-on+pr.webp"
					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-details+pr+changes.webp"
					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.pullRequests.enabled"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-details+changes.webp"
					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.pullRequests.enabled =false"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-details+pr.webp"
					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.pullRequests.enabled"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-details.webp"
					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.pullRequests.enabled =false"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-changes.webp"
					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes"
					loading="lazy"
					width="600"
					height="206"
				/>
			</div>
		</div>

		<div class="section__group section__group--rev">
			<div class="section__content">
				<div class="settings settings--fixed ml-1">
					<div class="setting" data-enablement="hovers.enabled">
						<div class="setting__input">
							<input
								id="hovers.annotations.enabled"
								name="hovers.annotations.enabled"
								type="checkbox"
								data-setting
								disabled
							/>
							<label for="hovers.annotations.enabled">Show hovers while annotating</label>
						</div>
					</div>

					<div class="settings settings--fixed ml-2">
						<div class="setting" data-enablement="hovers.enabled &amp; hovers.annotations.enabled">
							<div class="setting__input">
								<div class="setting__input">
									<label for="hovers.annotations.over">Shown when over the</label>
									<div class="select-container">
										<select
											id="hovers.annotations.over"
											name="hovers.annotations.over"
											data-setting
											disabled
										>
											<option value="annotation">annotation only</option>
											<option value="line">line &amp; annotation</option>
										</select>
									</div>
								</div>
							</div>
						</div>

						<div class="setting" data-enablement="hovers.enabled &amp; hovers.annotations.enabled">
							<div class="setting__input">
								<input
									id="hovers.annotations.details"
									name="hovers.annotations.details"
									type="checkbox"
									data-setting
									disabled
								/>
								<label for="hovers.annotations.details">Add blame details</label>
							</div>
						</div>

						<div class="setting" data-enablement="hovers.enabled &amp; hovers.annotations.enabled">
							<div class="setting__input">
								<input
									id="hovers.annotations.changes"
									name="hovers.annotations.changes"
									type="checkbox"
									data-setting
									disabled
								/>
								<label for="hovers.annotations.changes">Add changes (diff)</label>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="section__preview" data-visibility="hovers.enabled">
				<img
					class="image__preview hidden"
					src="#{webroot}/media/hovers-annotations.webp"
					data-visibility="blame.compact =false"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview hidden"
					src="#{webroot}/media/hovers-annotations-compact.webp"
					data-visibility="blame.compact"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-annotations-currentLine-on.webp"
					data-visibility="currentLine.enabled"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-details+pr+changes.webp"
					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes &amp; hovers.pullRequests.enabled"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-details+changes.webp"
					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes &amp; hovers.pullRequests.enabled =false"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-details+pr.webp"
					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false &amp; hovers.pullRequests.enabled"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-details.webp"
					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false &amp; hovers.pullRequests.enabled =false"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/hovers-changes.webp"
					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details =false &amp; hovers.annotations.changes"
					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.hovers%22"
					>Settings UI</a
				>
				and search for <b><i>gitlens.hovers</i></b>
			</p>
		</div>
	</div>
</section>
