{#- chirp-ui: Timeline component
    Vertical timeline for activity feeds, order tracking, audit logs.

    Usage:
        from "chirpui/timeline.html" import timeline, timeline_item

        timeline(items=[
            {"title": "Created", "date": "Jan 1", "content": "Order placed"},
            {"title": "Shipped", "date": "Jan 3", "content": "In transit"}
        ])

        Or with slot:
        call timeline()
            timeline_item("Created", "Jan 1", "Order placed")
            timeline_item("Shipped", "Jan 3", "In transit")
        end

    Variants:
        timeline_item("Deployed", "Now", icon="◎", variant="success")
        timeline_item("Error", "12:05", variant="error", avatar="/img/user.jpg")
        timeline(hoverable=true)
-#}

{% def timeline(items=none, hoverable=false, cls="") %}
{% set hover_class = " chirpui-timeline--hoverable" if hoverable else "" %}
<div class="chirpui-timeline{{ hover_class }}{{ " " ~ cls if cls else "" }}">
    {% if items %}
        {% for item in items %}
        <div class="chirpui-timeline__item{% if item.variant %} chirpui-timeline__item--{{ item.variant }}{% end %}{% if item.href %} chirpui-timeline__item--link{% end %}">
            {% if item.avatar %}
            <img class="chirpui-timeline__avatar" src="{{ item.avatar }}" alt="" aria-hidden="true">
            {% elif item.icon %}
            <div class="chirpui-timeline__icon" aria-hidden="true">{{ item.icon | icon }}</div>
            {% else %}
            <div class="chirpui-timeline__dot" aria-hidden="true"></div>
            {% end %}
            <div class="chirpui-timeline__content">
                {% if item.time %}
                <span class="chirpui-timeline__time">{{ item.time }}</span>
                {% end %}
                <div class="chirpui-timeline__header">
                    <span class="chirpui-timeline__title">{{ item.title }}</span>
                    <span class="chirpui-timeline__date">{{ item.date }}</span>
                </div>
                {% if item.content %}
                <div class="chirpui-timeline__body">{{ item.content }}</div>
                {% end %}
            </div>
            {% if item.href %}<a href="{{ item.href }}" class="chirpui-timeline__link-overlay" aria-label="{{ item.title }}"></a>{% end %}
        </div>
        {% end %}
    {% else %}
        {% slot %}
    {% end %}
</div>
{% end %}

{% def timeline_item(title, date, content=none, icon=none, avatar=none, variant="", time=none, href=none, cls="") %}
{% set variant_class = " chirpui-timeline__item--" ~ variant if variant else "" %}
{% set link_class = " chirpui-timeline__item--link" if href else "" %}
<div class="chirpui-timeline__item{{ variant_class }}{{ link_class }}{{ " " ~ cls if cls else "" }}">
    {% if avatar %}
    <img class="chirpui-timeline__avatar" src="{{ avatar }}" alt="" aria-hidden="true">
    {% elif icon %}
    <div class="chirpui-timeline__icon" aria-hidden="true">{{ icon | icon }}</div>
    {% else %}
    <div class="chirpui-timeline__dot" aria-hidden="true"></div>
    {% end %}
    <div class="chirpui-timeline__content">
        {% if time %}
        <span class="chirpui-timeline__time">{{ time }}</span>
        {% end %}
        <div class="chirpui-timeline__header">
            <span class="chirpui-timeline__title">{{ title }}</span>
            <span class="chirpui-timeline__date">{{ date }}</span>
            <div class="chirpui-timeline__header-actions">{% slot header_actions %}</div>
        </div>
        {% if content %}
        <div class="chirpui-timeline__body">{{ content }}</div>
        {% else %}
        <div class="chirpui-timeline__body">{% slot content %}</div>
        {% end %}
    </div>
    {% if href %}<a href="{{ href }}" class="chirpui-timeline__link-overlay" aria-label="{{ title }}"></a>{% end %}
</div>
{% end %}