<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="Assigned"
			:before="slot.serverAssigned"
			:after="slot.assigned"
			:entities="usersStore.users"
			:state
		/>
	</div>
</template>

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

const usersStore = useUsersStore();
</script>
