{#
  Content Components

  Reusable macro-based content display components for the Bengal default theme.

  Components:
    - article_card(article, show_excerpt=True, show_image=False): Rich article preview card
    - child_page_tiles(posts=None, subsections=None): Subsections and child pages as compact tiles
    - tag_list(tags, small=False, linkable=True): Styled tag badges
    - popular_tags(limit=10): Tag cloud widget with popular tags
    - random_posts(count=3): Random post discovery widget

  Usage:
    {% from 'partials/content-components.html' import article_card, tag_list %}
    {{ article_card(post, show_image=True) }}
    {{ tag_list(page.tags, small=True) }}
#}

{#
  Article Card Component

  Displays a rich card preview of an article with metadata, tags, and optional image.

  Args:
    article: Page object to display (required)
    show_excerpt: Boolean (default: True) - show description/excerpt
    show_image: Boolean (default: False) - show featured image

  Example:
    {{ article_card(post, show_image=True, show_excerpt=True) }}
#}
{% macro article_card(article, show_excerpt=True, show_image=False) %}
<article class="article-card {% if article | has_tag('featured') %}featured-card{% endif %}">
    {% if show_image and article.metadata.get('image') %}
    {# Responsive image with srcset - dogfooding image_srcset() #}
    <img
        src="{{ image_url(article.metadata.get('image'), width=800) }}"
        srcset="{{ article.metadata.get('image') | image_srcset([400, 800, 1200]) }}"
        sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1200px"
        alt="{{ article.metadata.get('image') | image_alt }}"
        class="article-card-image"
        loading="lazy"
    >
    {% endif %}

    <div class="article-card-content">
        {# Tag badges - dogfooding has_tag() #}
        <div class="article-card-badges">
            {% if article | has_tag('featured') %}
            <span class="badge badge-featured">⭐ Featured</span>
            {% endif %}
            {% if article | has_tag('tutorial') %}
            <span class="badge badge-tutorial">📚 Tutorial</span>
            {% endif %}
            {% if article | has_tag('new') %}
            <span class="badge badge-new">✨ New</span>
            {% endif %}
        </div>

        <h2 class="article-card-title">
            <a href="{{ url_for(article) }}">{{ article.title }}</a>
        </h2>

        <div class="article-card-meta">
            {% if article.date %}
            <time datetime="{{ article.date | date_iso }}" title="{{ article.date | dateformat('%B %d, %Y') }}">
                {{ article.date | time_ago }}
            </time>
            {% endif %}

            {% if article.metadata.get('author') %}
            <span class="author">{{ article.metadata.get('author') }}</span>
            {% endif %}

            {% if article.content %}
            <span class="reading-time">
                {{ article.content | reading_time }} min read
            </span>
            {% endif %}
        </div>

        {% if show_excerpt %}
        <p class="article-card-excerpt">
            {% if article.metadata.get('description') %}
                {{ article.metadata.get('description') }}
            {% elif article.content %}
                {{ article.content | strip_html | excerpt(150) }}
            {% endif %}
        </p>
        {% endif %}

        {% if article.tags %}
        <div class="article-card-footer">
            {{ tag_list(article.tags, small=True) }}
        </div>
        {% endif %}
    </div>
</article>
{% endmacro %}

{#
  Child Page Tiles Component

  Displays subsections and child pages as compact row-based items with icons.

  Args:
    posts: List of child pages to display (optional, defaults to None)
    subsections: List of child sections to display (optional, defaults to None)

  Example:
    {{ child_page_tiles(posts=page.regular_pages, subsections=page.sections) }}
#}
{% macro child_page_tiles(posts=None, subsections=None) %}
{% if posts or subsections %}
{# Merge subsections and pages into unified list #}
{% set all_items = [] %}

{# Add subsections with metadata #}
{% if subsections %}
  {% for subsection in subsections %}
    {% set _ = all_items.append({
      'type': 'section',
      'obj': subsection,
      'title': subsection.title,
      'url': url_for(subsection),
      'description': subsection.metadata.get('description', '') if subsection.metadata and subsection.metadata.get('description', '') else '',
      'weight': subsection.metadata.get('weight', 999999) if subsection.metadata else 999999,
      'page_count': subsection.pages | length if subsection.pages else 0
    }) %}
  {% endfor %}
{% endif %}

{# Add pages with metadata #}
{% if posts %}
  {% for post in posts %}
    {% set _ = all_items.append({
      'type': 'page',
      'obj': post,
      'title': post.title,
      'url': url_for(post),
      'description': post.metadata.get('description', '') if post.metadata and post.metadata.get('description', '') else (post.content | strip_html | excerpt(120) if post.content else ''),
      'weight': post.metadata.get('weight', 999999) if post.metadata else 999999,
      'date': post.date if post.date else none
    }) %}
  {% endfor %}
{% endif %}

{# Sort by weight (ascending), then title #}
{% set sorted_items = all_items | sort(attribute='weight,title') %}

<section class="child-items">
  <div class="child-items-list">
    {% for item in sorted_items %}
    <article class="child-item">
      <div class="child-item-icon">
        {% if item.type == 'section' %}
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
        </svg>
        {% else %}
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
          <polyline points="14 2 14 8 20 8"></polyline>
        </svg>
        {% endif %}
      </div>

      <div class="child-item-content">
        <span class="child-item-title">
          <a href="{{ item.url }}">{{ item.title }}</a>

        {% if item.description %}
        <span class="child-item-description">{{ item.description }}</span>
        {% endif %}

        <span class="child-item-meta">
          {% if item.type == 'section' and item.page_count > 0 %}
          <span class="meta-item">{{ item.page_count }} page{{ 's' if item.page_count != 1 }}</span>
          {% elif item.type == 'page' and item.date %}
          <span class="meta-item">{{ item.date | time_ago }}</span>
          {% endif %}
        </span>
        </span>
      </div>
    </article>
    {% endfor %}
  </div>
</section>
{% endif %}
{% endmacro %}

{#
  Tag List Component

  Displays tags as styled badges, optionally linkable to tag archive pages.

  Args:
    tags: List of tag strings (required)
    small: Boolean (default: False) - use smaller size
    linkable: Boolean (default: True) - make tags clickable

  Example:
    {{ tag_list(page.tags) }}
    {{ tag_list(article.tags, small=True, linkable=False) }}
#}
{% macro tag_list(tags, small=False, linkable=True) %}
<div class="tags {% if small %}tags-small{% endif %}">
    {% for tag in tags %}
        {% if linkable %}
        {# Locale-aware tag link: if prefix strategy and non-default or default_in_subdir, prefix with language #}
        {% set _i18n = site.config.get('i18n', {}) %}
        {% set _lang = current_lang() %}
        {% set _default = _i18n.get('default_language', 'en') if _i18n else 'en' %}
        {% set _in_subdir = _i18n.get('default_in_subdir', False) if _i18n else False %}
        {% set _prefix = '' %}
        {% if _i18n and _i18n.get('strategy') == 'prefix' and _lang and (_in_subdir or _lang != _default) %}
        {% set _prefix = '/' ~ _lang %}
        {% endif %}
        <a href="{{ _prefix }}/tags/{{ tag | lower | replace(' ', '-') }}/" class="tag">
            {{ tag }}
        </a>
        {% else %}
        <span class="tag">{{ tag }}</span>
        {% endif %}
    {% endfor %}
</div>
{% endmacro %}

{#
  Popular Tags Component

  Displays a tag cloud widget showing the most frequently used tags across the site.

  Args:
    limit: Number of tags to show (default: 10)

  Example:
    {{ popular_tags(limit=20) }}
#}
{% macro popular_tags_widget(limit=10) %}
{% set top_tags = popular_tags(limit=limit) %}
{% if top_tags %}
<div class="popular-tags-widget">
  <h3>Popular Topics</h3>
  <div class="tag-cloud">
    {% for tag, count in top_tags %}
    <!-- DEBUG: tag={{ tag }}, count={{ count }}, count_type={{ count|string }} -->
    <a href="{{ tag_url(tag) }}" class="tag-bubble" data-count="{{ count }}">
      {{ tag }}
      <span class="tag-count">{{ count }}</span>
    </a>
    {% endfor %}
  </div>
</div>
{% endif %}
{% endmacro %}

{#
  Random Posts Component

  Displays a widget with randomly selected posts from the site.

  Args:
    count: Number of random posts to show (default: 3)

  Example:
    {{ random_posts(count=5) }}
#}
{% macro random_posts(count=3) %}
{% set random_posts = site.regular_pages | sample(count) %}
{% if random_posts %}
<aside class="random-posts-widget">
    <h3>You Might Also Like</h3>
    <div class="random-posts-list">
        {% for post in random_posts %}
        <article class="random-post-item">
            <h4>
                <a href="{{ url_for(post) }}">{{ post.title }}</a>
            </h4>
            {% if post.date %}
            <time datetime="{{ post.date | date_iso }}">
                {{ post.date | time_ago }}
            </time>
            {% endif %}
        </article>
        {% endfor %}
    </div>
</aside>
{% endif %}
{% endmacro %}