@props({'name': '', 'value': '', 'placeholder': 'Pick a date', 'locale': 'en-US', 'week_start': 0, 'min': '', 'max': ''})
<div data-slot="date-picker"
  x-data="{
    open: false, picked: '{{ value }}',
    get text() { if (!this.picked) return ''; const [y, m, d] = this.picked.split('-').map(Number); return new Date(y, m - 1, d).toLocaleDateString('{{ locale }}', { dateStyle: 'long' }) },
  }"
  x-on:calendar-select="picked = $event.detail; open = false; $refs.trigger.focus()"
  x-on:keydown.escape="open = false" x-on:click.outside="open = false"
  {{ attributes.cn("relative w-full") }}>
  <input type="hidden" name="{{ name }}" x-bind:value="picked" />
  <button type="button" x-ref="trigger" x-on:click="open = !open" x-bind:aria-expanded="open" class="flex h-9 w-full cursor-pointer items-center gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-left text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 dark:hover:bg-input/50">
    <svg class="size-4 shrink-0 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
    <span class="truncate" x-bind:class="{ 'text-muted-foreground': !picked }" x-text="text || '{{ placeholder }}'">{{ placeholder }}</span>
  </button>
  <div data-slot="date-picker-content" x-show="open" x-cloak
    x-transition:enter="duration-100 ease-out" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
    class="absolute top-full left-0 z-50 mt-1 w-auto rounded-md border bg-popover text-popover-foreground shadow-md">
    <pb-ui.calendar :value="value" :locale="locale" :week_start="week_start" :min="min" :max="max" />
  </div>
</div>