<script lang="ts">
	import { DownloadIcon, FuelIcon, ParkingSquareIcon } from "@lucide/svelte";
	import { Button } from "../../ui/button";
	import VehicleSelector from "../VehicleSelector.svelte";
	import Post from "../Post.svelte";
	import RequiresCapability from "../RequiresCapability.svelte";
	import { m } from "$lang/messages";
	import { view } from "../view.svelte";
	import * as Card from "$lib/components/ui/card";
	import SavedRoutes from "../main/SavedRoutes.svelte";
	import SavedLocations from "../main/SavedLocations.svelte";
	import Calendar from "../main/Calendar.svelte";
</script>

<SavedLocations />

<VehicleSelector />

<div
	style="display: flex; gap: 0.5rem; justify-content: space-evenly;"
	class="mt-2"
>
	<Button
		variant="secondary"
		size="lg"
		style="flex: 1;"
		onclick={() => {
			view.switch("nearby-poi", {
				tags: "amenity=fuel",
			});
		}}
	>
		<FuelIcon />
		<!-- TODO: hide if no space -->
		{m["poi.fuel"]()}
	</Button>
	<Button
		variant="secondary"
		size="lg"
		style="flex: 1;"
		onclick={() => {
			view.switch("nearby-poi", {
				tags: "amenity=parking,parking!=street_side",
			});
		}}
	>
		<ParkingSquareIcon />
		<!-- TODO: hide if no space -->
		{m["poi.parking"]()}
	</Button>
</div>

<Calendar />

{#if !window.__TAURI__}
	<Card.Root style="margin-top: 1rem;">
		<Card.Header>
			<Card.Title>{m["sidebar.main.download-app.title"]()}</Card.Title>
		</Card.Header>
		<Card.Content>
			{m["sidebar.main.download-app.description"]()}
		</Card.Content>
		<Card.Footer>
			<a href="/trafficcue.apk" target="_blank" rel="noopener noreferrer">
				<Button>
					<DownloadIcon />
					{m["sidebar.main.download-app.button"]()}
				</Button>
			</a>
		</Card.Footer>
	</Card.Root>
{/if}

<RequiresCapability capability="stores">
	<SavedRoutes />
</RequiresCapability>

<RequiresCapability capability="post">
	<div>
		<h2>In your area</h2>

		<Post />
	</div>
</RequiresCapability>
