{{define "flight_card"}}
{{$v := .View}}
{{$f := .Flight}}
{{$isArr := eq $f.Direction "arrival"}}
<article class="flight-card {{if $isArr}}flight-card--arrival{{else}}flight-card--departure{{end}}">
  <div class="flight-card__strip {{statusStrip $v $f.Status}}"></div>
  <div class="flight-card__body">
    <div class="flight-card__header">
      <div class="flex items-center gap-3">
        <div class="flight-card__logo">
          {{if airlineLogo $f.Airline}}
          <img src="{{airlineLogo $f.Airline}}" alt="{{$f.Airline}}" class="h-full w-full object-contain" loading="lazy" decoding="async" />
          {{else}}
          <div class="flex h-full w-full items-center justify-center rounded-lg {{if $isArr}}flight-table__icon--arrival{{else}}flight-table__icon--departure{{end}}">
            {{template "flight_dir_icon" $isArr}}
          </div>
          {{end}}
        </div>
        <div>
          <h3 class="font-display text-lg font-bold text-slate-900 dark:text-white">{{$f.FlightNumber}}</h3>
          <p class="text-sm text-slate-500 dark:text-slate-400">{{$f.Airline}}</p>
        </div>
      </div>
      <span class="{{statusBadge $v $f.Status}}">{{statusLabel $v $f.Status}}</span>
    </div>
    <div class="mt-5 grid grid-cols-[1fr_auto_1fr] items-center gap-3">
      <div>
        <p class="font-display text-2xl font-bold text-slate-900 dark:text-white">{{if $isArr}}{{if $f.OriginCity}}{{$f.OriginCity}}{{else}}{{$f.Origin}}{{end}}{{else}}{{if $f.OriginCity}}{{$f.OriginCity}}{{else}}BGI{{end}}{{end}}</p>
        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{if $isArr}}{{$f.Origin}}{{else}}{{t $v "flights.barbados"}}{{end}}</p>
      </div>
      <div class="flight-route">
        <div class="flight-route__line"></div>
        <span class="flight-route__plane" aria-hidden="true">{{template "flight_dir_icon" $isArr}}</span>
      </div>
      <div class="text-right">
        <p class="font-display text-2xl font-bold text-slate-900 dark:text-white">{{if $isArr}}{{if $f.DestinationCity}}{{$f.DestinationCity}}{{else}}BGI{{end}}{{else}}{{if $f.DestinationCity}}{{$f.DestinationCity}}{{else}}{{$f.Destination}}{{end}}{{end}}</p>
        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{{if $isArr}}{{t $v "flights.barbados"}}{{else}}{{$f.Destination}}{{end}}</p>
      </div>
    </div>
    <div class="flight-card__footer">
      <span class="text-sm font-bold tabular-nums text-slate-800 dark:text-slate-200">
        {{$f.ScheduledTime}}{{if and $f.EstimatedTime (ne $f.EstimatedTime $f.ScheduledTime)}} · {{$f.EstimatedTime}}{{end}}
      </span>
      <div class="flex flex-wrap items-center gap-2">
        {{if $f.Gate}}<span class="chip">{{t $v "flights.gate"}} {{$f.Gate}}</span>{{end}}
        {{if .ShowLink}}<a href="/flights" class="text-sm font-semibold text-brand-600 hover:underline dark:text-brand-300">{{t $v "flights.details"}} →</a>{{end}}
      </div>
    </div>
  </div>
</article>
{{end}}