Calendar with date and time range picker

<!--
  Кейс проверяет ЗАКРЫТОЕ состояние триггера (см. PORTING.md §5).
-->
<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Separator } from "@/components/ui/separator"
import { Calendar as CCalendar } from "@/components/ui/calendar"

const date = ref<Date | undefined>(new Date(2026, 0, 12))
</script>

<template>
  <Popover>
    <PopoverTrigger as-child>
      <Button class="group/pick-date w-60 justify-between" variant="outline">
        <span class="truncate text-muted-foreground">{{ `January 12th, 2026` }}</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="text-muted-foreground/80 group-hover:text-foreground shrink-0 transition-colors">
          <path d="M8 2v4" />
          <path d="M16 2v4" />
          <rect width="18" height="18" x="3" y="4" rx="2" />
          <path d="M3 10h18" />
        </svg>
      </Button>
    </PopoverTrigger>
    <PopoverContent align="start" class="w-auto">
      <CCalendar mode="single" v-model="date" class="p-0" />
      <Separator />
      <FieldGroup class="grid grid-cols-2 gap-2.5">
        <Field class="gap-1.5">
          <FieldLabel for="time-from">Start Time</FieldLabel>
          <InputGroup>
            <InputGroupInput
              id="time-from"
              type="time"
              step="1"
              value="10:30:00"
              class="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
            />
            <InputGroupAddon>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
              </svg>
            </InputGroupAddon>
          </InputGroup>
        </Field>
        <Field class="gap-1.5">
          <FieldLabel for="time-to">End Time</FieldLabel>
          <InputGroup>
            <InputGroupInput
              id="time-to"
              type="time"
              step="1"
              value="12:30:00"
              class="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
            />
            <InputGroupAddon>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
              </svg>
            </InputGroupAddon>
          </InputGroup>
        </Field>
      </FieldGroup>
    </PopoverContent>
  </Popover>
</template>