{# Display a card for content based on slug with optional parameter overrides #}
{% macro card(slug, image="", title="", text="", content_type="") %}
{% if slug is starting_with("http://") or slug is starting_with("https://") %}
{# External URL - skip data lookup and use provided parameters #}
{% if image %}
{% set final_image = image %}
{% else %}
{% set final_image = "" %}
{% endif %}
{% if title %}
{% set final_title = title %}
{% else %}
{% set final_title = "Link" %}
{% endif %}
{% if text %}
{% set final_text = text %}
{% else %}
{% set final_text = "External Link" %}
{% endif %}
{% if content_type %}
{% set final_content_type = content_type %}
{% else %}
{% set final_content_type = "Link" %}
{% endif %}
{% set final_url = slug %}
{% set target_blank = true %}
{% else %}
{# Internal content - perform data lookup #}
{% set data = get_data_by_slug(slug=slug) %}
{% if image %}
{% set final_image = image %}
{% else %}
{% set final_image = data.image %}
{% endif %}
{% if title %}
{% set final_title = title %}
{% else %}
{% set final_title = data.title %}
{% endif %}
{% if text %}
{% set final_text = text %}
{% else %}
{% set final_text = data.text %}
{% endif %}
{% if content_type %}
{% set final_content_type = content_type %}
{% else %}
{% set final_content_type = data.content_type %}
{% endif %}
{% set final_url = url_for(path=data.slug ~ ".html") %}
{% set target_blank = false %}
{% endif %}
<div class="card" style="display: flex; align-items: center; border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin: 16px 0; text-decoration: none; color: inherit;">
<a href="{{ final_url }}" {% if target_blank %}target="_blank"{% endif %} style="display: flex; align-items: center; text-decoration: none; color: inherit; width: 100%;">
<div class="card-image" style="flex-shrink: 0; margin-right: 16px;">
<img src="{{ final_image }}" alt="{{ final_title }}" style="width: 100px; height: 100px; object-fit: cover; border-radius: 4px;">
</div>
<div class="card-content" style="flex: 1;">
<div class="card-type" style="font-size: 0.75em; color: #999; text-transform: uppercase; font-weight: 600; margin-bottom: 2px;">{{ final_content_type }}</div>
<div class="card-title" style="font-weight: bold; font-size: 1.1em; margin-bottom: 4px;">{{ final_title }}</div>
<div class="card-text" style="color: #666; font-size: 0.9em;">{{ final_text }}</div>
</div>
</a>
</div>
{% endmacro card %}