{#
/**
 * @file
 * FlowDrop Content Card Component
 *
 * Displays workflow, pipeline, or job items with rich metadata.
 *
 * Available variables:
 * - title: The card title (required)
 * - description: Optional description
 * - url: Optional link URL
 * - icon: Optional SVG icon markup
 * - status: Status variant (active, inactive, running, completed, failed, pending)
 * - status_label: Custom status label
 * - meta: Array of metadata strings
 * - edited: Last edited timestamp
 * - actions_id: ID for dropdown actions
 *
 * Slots:
 * - actions: Action buttons/dropdown
 */
#}

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

{% set status_map = {
  'active': {'variant': 'success', 'label': 'Active'},
  'inactive': {'variant': 'neutral', 'label': 'Inactive'},
  'running': {'variant': 'info', 'label': 'Running'},
  'completed': {'variant': 'success', 'label': 'Completed'},
  'failed': {'variant': 'error', 'label': 'Failed'},
  'pending': {'variant': 'warning', 'label': 'Pending'}
} %}

<div class="fd-content-card{% if url %} fd-content-card--clickable{% endif %}">
  <{{ tag }}{{ create_attribute(link_attrs) }} class="fd-content-card__main">
    {% if icon %}
      <div class="fd-content-card__icon">
        {{ icon|raw }}
      </div>
    {% endif %}
    
    <div class="fd-content-card__content">
      <div class="fd-content-card__header">
        <h3 class="fd-content-card__title">{{ title }}</h3>
        {% if edited %}
          <span class="fd-content-card__edited">Edited {{ edited }}</span>
        {% endif %}
      </div>
      
      {% if description %}
        <p class="fd-content-card__description">{{ description }}</p>
      {% endif %}
      
      <div class="fd-content-card__footer">
        {% if meta|length > 0 %}
          <div class="fd-content-card__meta">
            {% for item in meta %}
              <span class="fd-content-card__meta-item">{{ item }}</span>
            {% endfor %}
          </div>
        {% endif %}
        
        {% if status %}
          {% set status_config = status_map[status]|default({'variant': 'neutral', 'label': status}) %}
          <span class="fd-content-card__status fd-content-card__status--{{ status_config.variant }}{% if status == 'running' %} fd-content-card__status--animated{% endif %}">
            {{ status_label|default(status_config.label) }}
          </span>
        {% endif %}
      </div>
    </div>
  </{{ tag }}>
  
  {% if actions_id or actions %}
    <div class="fd-content-card__actions">
      {{ actions }}
      {% if actions_id %}
        <button type="button" class="fd-content-card__menu-button" aria-label="Open menu" data-dropdown-toggle="{{ actions_id }}">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z" />
          </svg>
        </button>
      {% endif %}
    </div>
  {% endif %}
</div>


