<section id="heatmap" class="section--settings section--collapsible" tabindex="-1">
	<div class="section__header">
		<h2>
			File Heatmap
			<a
				class="link__learn-more"
				title="Learn more"
				href="https://help.gitkraken.com/gitlens/gitlens-features/#gutter-heatmap"
			>
				<i class="icon icon__info"></i>
			</a>
		</h2>

		<p class="section__header-hint">
			Adds on-demand heatmap (age) indicators to the file to show how recently lines were changed
		</p>
		<div class="section__header-info">
			<i class="icon icon--md icon__bulb"></i>
			<div>
				<p>
					Use the
					<span class="command hidden" data-visibility="heatmap.toggleMode =file">
						GitLens: Toggle File Heatmap Annotations
					</span>
					<a
						class="command hidden"
						title="Run command"
						href="command:gitlens.toggleFileHeatmap"
						data-visibility="heatmap.toggleMode =window"
					>
						GitLens: Toggle File Heatmap Annotations
					</a>
					command to turn the annotations on or off
				</p>
				<p>Press <kbd>Esc</kbd> to turn off the annotations</p>
			</div>
		</div>
	</div>

	<div class="section__collapsible">
		<div class="section__group">
			<div class="section__content">
				<p class="setting__hint">
					<i class="icon icon__info"></i> Indicator color reflects the age of the most recent change (hot or
					cold), while indicator brightness ranges from bright (newer) to dim (older) based on the relative
					age
				</p>

				<div class="setting">
					<div class="setting__input">
						<label for="heatmap.toggleMode">Toggle annotations </label>
						<div class="select-container">
							<select id="heatmap.toggleMode" name="heatmap.toggleMode" data-setting>
								<option value="file">individually for each file</option>
								<option value="window">for all files</option>
							</select>
						</div>
					</div>
				</div>

				<div class="settings">
					<div class="setting">
						<div class="setting__input">
							<input
								id="heatmap.locations"
								name="heatmap.locations"
								type="checkbox"
								value="gutter"
								data-setting
								data-setting-type="array"
							/>
							<label for="heatmap.locations">Add gutter indicator</label>
						</div>
					</div>

					<div class="setting">
						<div class="setting__input">
							<input
								id="heatmap.locations-1"
								name="heatmap.locations"
								type="checkbox"
								value="line"
								data-setting
								data-setting-type="array"
							/>
							<label for="heatmap.locations-1">Add line highlight</label>
						</div>
					</div>

					<div class="setting">
						<div class="setting__input">
							<input
								id="heatmap.locations-2"
								name="heatmap.locations"
								type="checkbox"
								value="overview"
								data-setting
								data-setting-type="array"
							/>
							<label for="heatmap.locations-2">Add scroll bar indicator</label>
						</div>
					</div>
				</div>

				<div class="setting">
					<div class="setting__input">
						<input id="heatmap.fadeLines" name="heatmap.fadeLines" type="checkbox" data-setting />
						<label for="heatmap.fadeLines">Fade out older lines</label>
					</div>
				</div>

				<div class="setting">
					<div class="setting__input">
						<label for="heatmap.ageThreshold">Hot/cold threshold </label>
						<input
							id="heatmap.ageThreshold"
							name="heatmap.ageThreshold"
							type="number"
							placeholder="90"
							data-setting
							data-default-value="90"
						/>
						<label for="heatmap.ageThreshold"> days</label>
					</div>
				</div>
			</div>

			<div class="section__preview">
				<img
					class="image__preview"
					src="#{webroot}/media/heatmap.webp"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/heatmap-gutter.webp"
					data-visibility="heatmap.locations +gutter"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/heatmap-scrollbar.webp"
					data-visibility="heatmap.locations +overview"
					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.heatmap%22"
					>Settings UI</a
				>
				and search for <b><i>gitlens.heatmap</i></b>
			</p>
		</div>
	</div>
</section>
