{% trans_default_domain 'admin' %}
{#
    Vertical activity timeline (Tailwind Plus "activity feed" pattern). Shared by
    the Postausgang engagement events and the season-notification "Ablauf" flow.

    items: list of maps, each:
      icon        ph:… icon name (rendered as a coloured node)
      svg         raw inline <svg> (alternative to icon, e.g. to dodge on-demand
                  icon fetches); wins over `icon`
      color       Tailwind text-colour class for the node icon (default gray)
      colorStyle  raw CSS colour for the node icon (e.g. a per-type hex)
      kicker      small upper-case label above the title
      title       bold leading text
      text        regular text following the title
      subtitle    muted secondary line
      link        rendered as a monospace chip on the subtitle line
      time        right-aligned timestamp

    Items without icon/svg render a small ring dot.
#}
{% props items = [] %}

<ul role="list" {{ attributes.defaults({ class: 'space-y-6' }) }}>
    {% for item in items %}
        <li class="relative flex gap-x-4">
            <div class="absolute left-0 flex w-6 justify-center {{ loop.last ? 'top-0 h-6' : 'top-0 -bottom-6' }}">
                <div class="w-px bg-gray-200 dark:bg-white/15"></div>
            </div>

            <div class="relative flex size-6 flex-none items-center justify-center bg-white dark:bg-gray-900">
                {% if item.svg|default or item.icon|default %}
                    <span class="grid size-5 place-items-center {{ item.color|default('text-gray-400 dark:text-gray-500') }}"{% if item.colorStyle|default %} style="color: {{ item.colorStyle }}"{% endif %}>
                        {% if item.svg|default %}{{ item.svg|raw }}{% else %}<twig:ux:icon name="{{ item.icon }}" class="size-5" />{% endif %}
                    </span>
                {% else %}
                    <div class="size-1.5 rounded-full bg-gray-100 ring ring-gray-300 dark:bg-white/10 dark:ring-white/20"></div>
                {% endif %}
            </div>

            <div class="min-w-0 flex-auto py-0.5">
                {% if item.kicker|default %}
                    <div class="text-[10px] font-bold uppercase tracking-wide text-gray-400 dark:text-gray-500">{{ item.kicker }}</div>
                {% endif %}
                <p class="text-[13px]/5 text-gray-500 dark:text-gray-400">
                    {%- if item.title|default %}<span class="font-semibold text-gray-900 dark:text-white">{{ item.title }}</span>{% endif -%}
                    {%- if item.text|default %} {{ item.text }}{% endif -%}
                </p>
                {% if item.subtitle|default or item.link|default %}
                    <div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                        {%- if item.subtitle|default %}{{ item.subtitle }}{% endif -%}
                        {%- if item.link|default %}{% if item.subtitle|default %} · {% endif %}<code class="break-all rounded bg-gray-100 px-1 py-px text-[11px] dark:bg-gray-800">{{ item.link }}</code>{% endif -%}
                    </div>
                {% endif %}
            </div>

            {% if item.time|default %}
                <time class="flex-none py-0.5 text-xs/5 tabular-nums text-gray-500 dark:text-gray-400">{{ item.time }}</time>
            {% endif %}
        </li>
    {% endfor %}
</ul>
