<script>
	import Release from '$lib/components/Release.svelte';
	let { blenderVersions, installedVersions, downloadTasks } = $props();
	import '@webtui/css/components/progress.css';
</script>

<div id="container">
	<h2>Releases</h2>
	<div id="releases">
		{#each blenderVersions as release (release.version)}
			<Release {installedVersions} {downloadTasks} {release} />
		{/each}
	</div>
</div>

<style>
	h2 {
		font-weight: normal;
		margin-bottom: 1rem;
	}
	#container {
		overflow-y: scroll;
		max-height: 100%;
		box-sizing: border-box;
	}
	#releases {
		padding-right: 1rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
</style>
