{#
================================================================================
Content Tiles Component (Kida-Native)
================================================================================

Flexible content display with optional headers, multiple content sources,
and variant display modes.

Variants:
- compact: Stacked Chirp UI resource cards (default)
- cards: Chirp UI resource-card grid
- minimal: Compact Chirp UI resource-card list

Usage:
{{ content_tiles(title='Section', children=posts, variant='cards') }}
================================================================================
#}

{% from 'chirpui/badge.html' import badge %}
{% from 'chirpui/card.html' import resource_card %}
{% from 'chirpui/layout.html' import grid, stack %}

{# =============================================================================
CONTENT TILES COMPONENT
============================================================================= #}
{% def content_tiles(
title=none,
children=none,
subsections=none,
related=none,
related_title=none,
related_limit=5,
variant='compact',
show_descriptions=true,
show_icons=true,
group_by=none,
page=none
) %}
{% let all_items = [] %}
{% let page_path = page?._path ?? '' %}

{# Add subsections with metadata #}
{% if subsections %}
{% for subsection in subsections %}
{% let sub_pages = subsection?.pages ?? [] %}
{% set _ = all_items.append({
'type': 'section',
'group': 'children',
'obj': subsection,
'title': subsection?.title ?? 'Untitled',
'href': subsection?.href ?? subsection?._path ?? '',
'description': subsection?.metadata?.description ?? '',
'weight': subsection?.weight ?? 999,
'page_count': sub_pages | length,
'icon': subsection?.metadata?.icon ?? ''
}) %}
{% end %}
{% end %}

{# Add child pages with metadata #}
{% if children %}
{% for post in children %}
{# Skip the current page #}
{% if (post._path | default('')) != page_path %}
{% let post_content = post?.content ?? '' %}
{% let post_desc = post?.metadata?.description ?? '' %}
{% let desc = post_desc ?? (post_content | strip_html | excerpt(120) if post_content else '') %}
{% set _ = all_items.append({
'type': 'page',
'group': 'children',
'obj': post,
'title': post?.title ?? 'Untitled',
'href': post?.href ?? post?._path ?? '',
'description': desc,
'weight': post?.weight ?? 999,
'date': post.date | default(none),
'icon': post?.metadata?.icon ?? ''
}) %}
{% end %}
{% end %}
{% end %}

{# Add related pages (deduped) #}
{% let related_pages = [] %}
{% if related is sameas true %}
{% let page_related = page?.related_posts ?? [] %}
{% let related_pages = page_related[:related_limit] %}
{% elif related %}
{% let related_pages = related %}
{% end %}

{# Build set of existing URLs for dedup #}
{% let children_urls = [] %}
{% for item in all_items %}
{% set _ = children_urls.append(item.href) %}
{% end %}

{% for rel_page in related_pages %}
{% let rel_path = rel_page?._path ?? '' %}
{% let rel_href = rel_page?.href ?? rel_page?._path ?? '' %}
{% let is_current = rel_path == page_path %}
{% let is_duplicate = rel_href in children_urls %}
{% if not is_current and not is_duplicate %}
{% let rel_content = rel_page?.content ?? '' %}
{% let rel_desc = rel_page?.metadata?.description ?? '' %}
{% let desc = rel_desc ?? (rel_content | strip_html | excerpt(100) if rel_content else '') %}
{% set _ = all_items.append({
'type': 'related',
'group': 'related',
'obj': rel_page,
'title': rel_page?.title ?? 'Untitled',
'href': rel_href,
'description': desc,
'weight': rel_page?.weight ?? 999,
'date': rel_page?.date,
'icon': rel_page?.metadata?.icon ?? ''
}) %}
{% end %}
{% end %}

{% if all_items | length > 0 %}
{# Sort items #}
{% let sorted_items = all_items | sort(attribute='group,weight,title') if group_by == 'type' else all_items |
sort(attribute='weight,title') %}

<section class="chirp-theme-resource-list chirp-theme-resource-list--{{ variant }}">
  {% if title %}
  <h2 class="chirp-theme-resource-list__title">{{ title }}</h2>
  {% end %}

  {% match variant %}
  {# ===== CARDS VARIANT ===== #}
  {% case 'cards' %}
  {% call grid(cols=3, gap='md', cls='chirp-theme-resource-list__grid') %}
    {% for item in sorted_items %}
    {% let item_type = item?.type ?? '' %}
    {% let item_icon = item?.icon ?? ('folder' if item_type == 'section' else ('link' if item_type == 'related' else 'file-text')) %}
    {% let item_meta = (item.page_count ~ ' page' ~ ('s' if item.page_count != 1 else '')) if item_type == 'section' and (item?.page_count ?? 0) > 0 else ('Related' if item_type == 'related' else (item.date | time_ago if item?.date else none)) %}
    {% call resource_card(
      item?.href ?? '',
      item?.title ?? item,
      description=(item.description | excerpt_for_card(item?.title ?? '') | excerpt(120)) if show_descriptions and item?.description else none,
      top_meta=item_meta,
      cls='chirp-theme-resource-item chirp-theme-resource-item--' ~ item_type
    ) %}
    {% slot badges %}
    {% if show_icons %}<span class="chirpui-card__icon">{{ item_icon | icon }}</span>{% end %}
    {% if item_type == 'related' %}{{ badge('Related', variant='secondary') }}{% end %}
    {% end %}
    {% end %}
    {% end %}
  {% end %}

  {# ===== MINIMAL VARIANT ===== #}
  {% case 'minimal' %}
  {% call stack(gap='xs', cls='chirp-theme-resource-list__stack') %}
    {% for item in sorted_items %}
    {% let item_type = item?.type ?? '' %}
    {% call resource_card(
      item?.href ?? '',
      item?.title ?? item,
      top_meta='Related' if item_type == 'related' else none,
      cls='chirp-theme-resource-item chirp-theme-resource-item--minimal chirp-theme-resource-item--' ~ item_type
    ) %}
    {% slot badges %}{% if item_type == 'related' %}{{ badge('Related', variant='secondary') }}{% end %}{% end %}
    {% end %}
    {% end %}
  {% end %}

  {# ===== COMPACT VARIANT (default) ===== #}
  {% case _ %}
  {% call stack(gap='xs', cls='chirp-theme-resource-list__stack') %}
    {% for group in sorted_items | groupby('group') %}
    {% let group_name = group.grouper %}
    {% let group_items = group.list %}
    {# Group headers when group_by='type' #}
    {% if group_by == 'type' and group_name == 'related' and related_title %}
    <h3 class="chirp-theme-resource-list__group-title">{{ related_title }}</h3>
    {% end %}
    {% for item in group_items %}
    {% let item_type = item?.type ?? '' %}
    {% let item_icon = item?.icon ?? ('folder' if item_type == 'section' else ('link' if item_type == 'related' else 'file-text')) %}
    {% let item_meta = (item.page_count ~ ' page' ~ ('s' if item.page_count != 1 else '')) if item_type == 'section' and (item?.page_count ?? 0) > 0 else ('Related' if item_type == 'related' else (item.date | time_ago if item?.date else none)) %}
    {% call resource_card(
      item?.href ?? '',
      item?.title ?? item,
      description=(item.description | excerpt_for_card(item?.title ?? '')) if show_descriptions and item?.description else none,
      top_meta=item_meta,
      cls='chirp-theme-resource-item chirp-theme-resource-item--compact chirp-theme-resource-item--' ~ item_type
    ) %}
    {% slot badges %}
    {% if show_icons %}<span class="chirpui-card__icon">{{ item_icon | icon }}</span>{% end %}
    {% if item_type == 'related' %}{{ badge('Related', variant='secondary') }}{% end %}
    {% end %}
    {% end %}
    {% end %}
    {% end %}
  {% end %}
  {% end %}
</section>
{% end %}
{% end %}