{{/*
  Metric Card Partial - ShadCN-style individual card

  Usage: {{ partial "metric-card.html" (dict "label" "Open Issues" "value" 42 "subtext" "5 new this week" "info" "Tooltip text") }}

  Parameters:
    - label: The metric label
    - value: The metric value
    - descriptor: Optional muted descriptor shown at bottom (e.g., ">30 days", "last 7d")
    - subtext: Optional subtext below the value
    - info: Optional tooltip text explaining the metric
    - sparkline: Optional array of values for a mini chart (last 10 data points)
    - sparklineColor: Optional color for sparkline (default: primary blue)
    - trend: Optional trend percentage (positive = up, negative = down, 0 = no change)
    - trendGoodDirection: Optional "up" or "down" to indicate which direction is good (default: "down" for issues/PRs)
    - link: Optional URL to link to (e.g., GitHub filtered issues/PRs)
    - total: Optional total to display (e.g., 50) - shown as "/50" after value
    - percent: Optional percentage to display (e.g., 45.2 for "45.2%") - shown after total
    - percentLabel: Optional label for the percent tooltip (e.g., "of opened")
*/}}

{{- $hasLink := .link -}}
{{- $linkClasses := cond $hasLink "hover:border-base-content/30 hover:shadow-sm transition-all cursor-pointer group" "" -}}
<div class="relative bg-base-100 border border-base-300 rounded-lg p-4 {{ $linkClasses }}"{{ with .link }} onclick="window.open('{{ . }}', '_blank')" role="link" tabindex="0" onkeydown="if(event.key==='Enter')window.open('{{ . }}', '_blank')"{{ end }}>
  {{- if $hasLink -}}
  {{/* Corner fold/earmark indicator for clickable cards - grows on hover */}}
  <svg class="earmark absolute bottom-0 right-0 pointer-events-none" style="width:16px;height:16px;transition:all 0.2s ease;opacity:0.5;" viewBox="0 0 16 16" fill="currentColor"><path d="M16 0 L16 16 L0 16 Z"/></svg>
  {{- end -}}
  <div class="flex items-start justify-between gap-2 mb-1">
    <div class="text-xs font-medium text-base-content/70 inline-flex items-center gap-1 overflow-visible">
      {{ .label }}
      {{ with .info }}<div class="tooltip tooltip-top"><div class="tooltip-content" style="white-space:pre-line;text-align:left">{{ . }}</div><i class="fa-solid fa-circle-info text-base-content/40 cursor-help"></i></div>{{ end }}
    </div>
    {{- if isset . "trend" -}}
      {{- $trend := .trend -}}
      {{- $goodDir := .trendGoodDirection | default "down" -}}
      {{- if ne $trend 0.0 -}}
        {{- $isUp := gt $trend 0.0 -}}
        {{- $isGood := eq $isUp (eq $goodDir "up") -}}
        {{- $colorClass := cond $isGood "text-success" "text-error" -}}
        {{- $arrow := cond $isUp "↑" "↓" -}}
        {{- $absVal := cond $isUp $trend (mul $trend -1) -}}
        <span class="inline-flex items-center gap-0.5 text-[10px] font-medium {{ $colorClass }}">
          <span>{{ $arrow }}</span>
          <span>{{ printf "%.2f" $absVal }}%</span>
        </span>
      {{- else -}}
        <span class="inline-flex items-center text-[10px] font-medium text-base-content/30">—</span>
      {{- end -}}
    {{- else -}}
      <span class="inline-flex items-center text-[10px] font-medium text-base-content/20">—</span>
    {{- end -}}
  </div>
  <div class="flex items-end justify-between gap-2 h-8">
    <div class="flex items-end h-full">
      <span class="text-2xl font-bold leading-none{{ with .valueClass }} {{ . }}{{ end }}">
        {{- if isset . "value" -}}
          {{- $v := .value -}}
          {{- if (eq (printf "%T" $v) "float64") -}}
            {{ lang.FormatNumber 0 $v }}
          {{- else if (eq (printf "%T" $v) "int") -}}
            {{ lang.FormatNumber 0 $v }}
          {{- else -}}
            {{ $v }}
          {{- end -}}
        {{- else -}}
          —
        {{- end -}}
      </span>
      {{- if and (isset . "total") (isset . "percent") -}}
        {{- $total := .total -}}
        {{- $pct := .percent -}}
        {{- $pctLabel := .percentLabel | default "of total" -}}
        {{- if gt $total 0 -}}
          <span class="tooltip tooltip-top" style="margin-bottom: 3px;"><span class="tooltip-content text-xs">{{ $pctLabel }}</span><span class="text-xs text-base-content/40 font-normal">/{{ lang.FormatNumber 0 $total }}{{- if and (gt $pct 0.0) (le $pct 100.0) }} ({{ printf "%.0f" $pct }}%){{- end -}}</span></span>
        {{- end -}}
      {{- end -}}
    </div>
    {{- with .sparkline -}}
      {{- if gt (len .) 1 -}}
        {{- $color := $.sparklineColor | default "rgb(0, 102, 204)" -}}
        <div class="h-8 w-16 flex-shrink-0">
          <canvas class="sparkline h-full w-full" data-sparkline='{{ . | jsonify }}' data-color='{{ $color }}'></canvas>
        </div>
      {{- end -}}
    {{- end -}}
  </div>
  {{ with .subtext }}<div class="text-[10px] text-base-content/40 mt-1">{{ . }}</div>{{ end }}
  {{ with .descriptor }}<div class="text-[10px] text-base-content/30 mt-1.5 font-normal">{{ . }}</div>{{ end }}
</div>