search-results
	.result(each="{result, i in opts.results}", class="{active: i === currentSelection}")
		h2
			| {result.name}
			span.version v{result.latestVersion || "..."}
		.deprecated(if="{result.deprecated}")
			strong Deprecated
			span.reason {result.deprecated}
		.deprecated(if="{result.reserved}")
			strong Reserved
			span.reason {result.reserved}
		.description {result.description || "(no description)"}
	
	script.
		let lastResults;
		
		Object.assign(this, {
			currentSelection: 0,
			moveSelectionDown: function() {
				if (this.currentSelection + 1 < opts.results.length) {
					this.currentSelection += 1;
					this.update();
				}
			},
			moveSelectionUp: function() {
				if (this.currentSelection >= 1) {
					this.currentSelection -= 1;
					this.update();
				}
			}
		})
		
		this.on("update", () => {
			/* Reset the cursor/selection state... */
			if (lastResults !== opts.results) {
				lastResults = opts.results;
				this.currentSelection = 0;
			}
		});
		
	style(scoped, type="scss").
		.result {
			background-color: white;
			color: #333333;
			padding: 9px;
			border-top: 1px solid #2a333c;
			
			&:first-child {
				border-top: 0px;
			}
			
			&.active {
				background-color: #e2e2e2;
			}
			
			h2 {
				color: black;
				font-size: 21px;
				margin: 2px 0px;
			}
			
			.description {
				font-size: 13px;
			}
			
			.version {
				margin-left: 8px;
				color: gray;
				font-style: italic;
				font-size: 13px;
			}
			
			.deprecated {
				display: inline-block;
				background-color: #b9b9b9;
				border-radius: 4px;
				font-size: 12px;
				margin: 2px 0px;
				overflow: hidden;
				margin-left: -2px;
				
				strong, .reason {
					display: inline-block;
				}
				
				strong {
					padding: 4px 6px;
					background-color: #c70000;
					color: #dedede;
				}
				
				.reason {
					padding: 4px 8px;
					color: black;
				}
			}
		}