<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<div>
		<h5>{{ state }} slot at {{ slot.start.toFormat("yyyy-LL-dd HH:mm") }}</h5>
		<DiffFieldString
			title="Start"
			:before='slot.serverStart.toFormat("yyyy-LL-dd HH:mm")'
			:after='slot.start.toFormat("yyyy-LL-dd HH:mm")'
			:state
		/>
		<DiffFieldString
			title="End"
			:before='slot.serverEnd.toFormat("yyyy-LL-dd HH:mm")'
			:after='slot.end.toFormat("yyyy-LL-dd HH:mm")'
			:state
		/>
		<DiffFieldSetEntityId
			title="Locations"
			:before="slot.serverLocationIds"
			:after="slot.locationIds"
			:entities="schedule.locations"
			:state
		/>
		<DiffFieldString
			title="Cancelled"
			:before='slot.serverCancelled ? "Yes" : "No"'
			:after='slot.cancelled ? "Yes" : "No"'
			:state
		/>
		<DiffFieldSetEntityId
			title="Assigned"
			:before="slot.serverAssigned"
			:after="slot.assigned"
			:entities="usersStore.users"
			:state
		/>
	</div>
</template>

<script lang="ts" setup>
defineProps<{
	schedule: ClientSchedule,
	slot: ClientScheduleEventSlot,
	state: "deleted" | "created" | "modified",
}>();

const usersStore = useUsersStore();
</script>
