search-results
	.result(each="{result, i in opts.results}", class="{active: i === currentSelection}")
		h2 {result.name}
		.description {result.description}
	
	script.
		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... */
			this.currentSelection = 0;
		});
		
	style(scoped, type="scss").
		.result {
			background-color: white;
			color: #676767;
			padding: 9px;
			border-top: 1px solid #2a333c;
			
			&:first-child {
				border-top: 0px;
			}
			
			&.active {
				background-color: #e2e2e2;
			}
			
			h2 {
				color: black;
				font-size: 21px;
				margin: 0px;
			}
			
			.description {
				font-size: 13px;
			}
		}