{{--
    Small live clock for the topbar (both panels). Ticks client-side via
    Alpine/Intl rather than a Livewire poll, so it costs nothing server-side
    and never drifts out of sync with a stale page.

    The timezone is the CURRENT tenant's Master Control "Locale" setting
    (App\Services\CurrentContext::timezone()) — server default (config
    app.timezone) on the central/master-control panel, where there is no
    single tenant to read a zone from, and for any tenant that hasn't set one.
--}}
@php
    $context = app(\App\Services\CurrentContext::class);
    $timezone = $context->timezone();
    $localeTag = $context->localeTag();
@endphp
<div
    class="fi-topbar-clock hidden items-center gap-2 whitespace-nowrap px-2 text-sm font-medium text-gray-600 sm:flex dark:text-gray-300"
    x-data="{
        tz: @js($timezone),
        locale: @js($localeTag),
        now: new Date(),
        fmt(options) {
            try {
                return new Intl.DateTimeFormat(this.locale, { timeZone: this.tz, ...options }).format(this.now);
            } catch (e) {
                return new Intl.DateTimeFormat(undefined, options).format(this.now);
            }
        },
    }"
    x-init="setInterval(() => (now = new Date()), 1000)"
>
    <svg class="h-4 w-4 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
    </svg>
    <span x-text="fmt({ weekday: 'short', day: '2-digit', month: 'short' })"></span>
    <span class="tabular-nums" x-text="fmt({ hour: '2-digit', minute: '2-digit', second: '2-digit' })"></span>
    <span class="hidden text-xs text-gray-400 dark:text-gray-500 xl:inline" x-text="tz" :title="tz"></span>
</div>
