{isInProgress ? 'Current Appointment' : 'Next Appointment'} {#if activeAppointment} {new SvelteDate(activeAppointment.start_time).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })} - {new SvelteDate( new SvelteDate(activeAppointment.start_time).getTime() + activeAppointment.duration_minutes * 60 * 1000 ).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })} {/if}
{#if activeAppointment} {#if isInProgress} In Progress • {timeRemaining} min remaining {#if freeTimeAfter > 0} • {freeTimeAfter} min free {/if} {:else} Starts in {timeRemaining} min {/if} {/if}
{#if loading}
{:else if !activeAppointment}

No appointments right now

Enjoy the break or check tomorrow's schedule

 {:else}
{#if activeAppointment.user?.profile_pic_url} {activeAppointment.user.full_name} {:else}
{activeAppointment.user?.full_name?.charAt(0) || '?'}
{/if}
{activeAppointment.user?.full_name || 'Guest'}
{activeAppointment.user?.phone || '—'}
{#if activeAppointment.user} {/if}
Services
{#each activeAppointment.services as service, index (index)}
{service.service_name || 'Unknown Service'}
{#if service.service_description}
{service.service_description}
{/if}
{service.duration_minutes} mins
{/each}
{#if activeAppointment.notes}
Notes
{activeAppointment.notes}
{/if}
{#if !isInProgress} {/if} {#if isInProgress} {/if}
{/if}