@if (ticket(); as ticket) {
<div class="flex justify-between">
  <span class="text-base">
    {{ ticket.ordinanceType }}
  </span>
  <div>
    @if (ticket.isOverdue) {
    <ng-icon hlm name="lucideCircleAlert" class="text-amber-600"></ng-icon>
    }
  </div>
</div>
<span>
  {{ ticket.patientName }}
</span>
<span>{{ ticket.tourCount }} Tour{{ ticket.tourCount > 1 ? "en" : "" }}</span>
<span class="text-xs self-end">{{ getDistance(ticket.createdAt) }}</span>
}

<!-- <div
  class="group relative flex flex-col gap-1.5 rounded-lg border bg-card p-3 shadow-sm transition-all hover:bg-accent/5 hover:shadow-md cursor-pointer select-none"
  [class.border-destructive]="ticket().isOverdue"
  [class.bg-destructive\/5]="ticket().isOverdue"
  [class.border-border]="!ticket().isOverdue"
>
  <div class="flex items-start justify-between gap-3">
    <span 
      class="text-sm font-semibold leading-tight text-foreground line-clamp-2"
      [class.text-destructive]="ticket().isOverdue"
    >
      {{ ticket().patientName }}
    </span>
  </div>

  <div class="flex items-center justify-between mt-1">
    
    <div class="flex items-center gap-1.5 text-xs">
      @if (ticket().nextStart) {
        <div 
          class="flex items-center gap-1.5 transition-colors"
          [class.text-destructive]="ticket().isOverdue"
          [class.font-medium]="ticket().isOverdue"
          [class.text-muted-foreground]="!ticket().isOverdue"
        >
          <ng-icon 
            hlmIcon 
            [name]="ticket().isOverdue ? 'lucideAlertCircle' : 'lucideCalendarClock'" 
            size="xs"
          />
          <span>{{ ticket().nextStart | date:'dd.MM. HH:mm' }}</span>
        </div>
      } @else {
        <span class="text-muted-foreground/50 italic text-[10px]">Bereits gefahren</span>
      }
    </div>

    <div 
      class="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-medium transition-colors"
      [class.bg-destructive\/10]="ticket().isOverdue"
      [class.text-destructive]="ticket().isOverdue"
      [class.bg-secondary]="!ticket().isOverdue"
      [class.text-secondary-foreground]="!ticket().isOverdue"
    >
      <ng-icon hlmIcon name="lucideCar" size="xs" />
      <span>{{ ticket().tourCount }}</span>
    </div>
  </div>
  
  </div> -->