<template>
	<section class="shift">
		<h3>{{ shift.name }}</h3>
		<p>{{ shift.description ?? "No description provided" }}</p>

		<h4>Timeslots</h4>
		<ul>
			<li v-for="slot in shift.slots.values()" :key="slot.id">
				{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
				<p v-if="slot.assigned">
					Assigned:
					{{ [...slot.assigned].map(id => usersStore.users.get(id)?.name).join(", ") }}
				</p>
			</li>
		</ul>
	</section>
</template>

<script lang="ts" setup>
import { DateTime } from '~/shared/utils/luxon';

defineProps<{
	shift: ClientScheduleShift
}>()

const accountStore = useAccountStore();
const usersStore = useUsersStore();
await usersStore.fetch();

function formatTime(time: DateTime) {
	return time.toFormat("yyyy-LL-dd HH:mm");
}
</script>

<style scoped>
.shift {
	background: color-mix(in oklab, var(--background), grey 20%);
	padding: 0.5rem;
	border-radius: 0.5rem;
}
.shift h3 {
	margin: 0;
}
.shift + .shift {
	margin-block-start: 0.5rem;
}

button {
	padding-inline: 0.2em;
}
button.active {
	color: color-mix(in oklab, var(--foreground), green 50%);
}
</style>
