<template>
	<div class="search-results search-results--tasks">
		<div class="simple-subtitle">
			Tasks
			<span class="toolbar__search-count">
				{{ results.length }}
			</span>
		</div>
		<w-divider />
		<div class="search-results__task-list">
			<TaskTile
				v-for="(task, index) in results"
				:key="index"
				:task="task"
			/>
		</div>
	</div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';

export default Vue.extend({
	props: {
		results: Object as PropType<any[]>
	}
});
</script>

<style lang="scss">
.search-results__task-list {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 0.75rem;

	.task-tile {
		box-shadow: none;
		border: 2px solid var(--color-shade-3);
	}
}
</style>