---
import { Image } from "astro:assets";

import { api } from "$lib/api";
import { getLatestDownloads } from "$lib/downloads";

import Layout from "$layouts/Layout.astro";

const latestDownloads = await getLatestDownloads();
const downloads = latestDownloads.success ? latestDownloads.data : [];

const patchNotes = await api.builds.v1.getPatchNotes();
---

<Layout>
	<div class="container">
		<div class="page-header">
			<p><a href="/">&larr; Back to home</a></p>
			<h1>Downloads</h1>
		</div>
		<p class="lead">
			Choose the build for your platform.
		</p>

		{
			downloads.length > 0 ? (
				<div class="row">
					{downloads.map((download) => (
						<div class="span4">
							<div class="well text-center download-card">
								<p>
									<Image
										src={download.icon}
										alt=""
										width="72"
										height="72"
									/>
								</p>
								<h3>{download.label}</h3>
								<p>{download.version}</p>
								<p>
									<a
										href={download.href}
										class="btn btn-primary"
										aria-label={`Download for ${download.label}`}
									>
										Download
									</a>
								</p>
							</div>
						</div>
					))}
				</div>
			) : (
				<div class="alert alert-warning">
					Downloads are unavailable right now.
				</div>
			)
		}

		<section class="download-patch-notes">
			<div class="page-header">
				<h2>Patch Notes</h2>
			</div>
			{
				patchNotes.length > 0 ? (
					patchNotes.map((patchNote) => (
						<div class="well patch-note">
							<h3>{patchNote.version}</h3>
							<p class="muted">{patchNote.date}</p>
							<ul>
								{patchNote.changes.map((change) => (
									<li>{change}</li>
								))}
							</ul>
						</div>
					))
				) : (
					<div class="well patch-note">
						<p>No patch notes yet.</p>
					</div>
				)
			}
		</section>
	</div>
</Layout>