{#
/**
 * @file
 * FlowDrop Stat Card Component
 *
 * Displays a statistic with label, value, and optional icon.
 * Used in dashboard headers for displaying counts and metrics.
 *
 * Available variables:
 * - value: The statistic value (required)
 * - label: The label for the statistic (required)
 * - icon: Optional SVG icon markup
 * - variant: Color variant (default, primary, success, warning, error)
 * - url: Optional URL to make the card a link
 * - trend: Optional trend direction (up, down, neutral)
 * - trend_value: Optional trend value string
 */
#}

{% set variant = variant|default('default') %}

{% set tag = url ? 'a' : 'div' %}
{% set link_attrs = url ? {'href': url} : {} %}

<{{ tag }}{{ create_attribute(link_attrs) }} class="fd-stat-card fd-stat-card--{{ variant }}{% if url %} fd-stat-card--clickable{% endif %}">
  {% if icon %}
    <div class="fd-stat-card__icon">
      {{ icon|raw }}
    </div>
  {% endif %}
  
  <div class="fd-stat-card__content">
    <div class="fd-stat-card__value">
      {{ value }}
      {% if trend and trend_value %}
        <span class="fd-stat-card__trend fd-stat-card__trend--{{ trend }}">
          {% if trend == 'up' %}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="fd-stat-card__trend-icon">
              <path fill-rule="evenodd" d="M12.577 4.878a.75.75 0 01.919-.53l4.78 1.281a.75.75 0 01.531.919l-1.281 4.78a.75.75 0 01-1.449-.387l.81-3.022a19.407 19.407 0 00-5.594 5.203.75.75 0 01-1.139.093L7 10.06l-4.72 4.72a.75.75 0 01-1.06-1.061l5.25-5.25a.75.75 0 011.06 0l3.074 3.073a20.923 20.923 0 015.545-4.931l-3.042-.815a.75.75 0 01-.53-.919z" clip-rule="evenodd" />
            </svg>
          {% elseif trend == 'down' %}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="fd-stat-card__trend-icon">
              <path fill-rule="evenodd" d="M1.22 5.222a.75.75 0 011.06 0L7 9.942l3.768-3.769a.75.75 0 011.113.058 20.908 20.908 0 013.813 7.254l1.574-2.727a.75.75 0 011.3.75l-2.475 4.286a.75.75 0 01-1.025.275l-4.287-2.475a.75.75 0 01.75-1.3l2.71 1.565a19.422 19.422 0 00-3.013-6.024L7.53 11.533a.75.75 0 01-1.06 0l-5.25-5.25a.75.75 0 010-1.06z" clip-rule="evenodd" />
            </svg>
          {% endif %}
          {{ trend_value }}
        </span>
      {% endif %}
    </div>
    <div class="fd-stat-card__label">{{ label }}</div>
  </div>
  
  {% if url %}
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="fd-stat-card__arrow">
      <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd" />
    </svg>
  {% endif %}
</{{ tag }}>


