{% load lb_tags lbr_tags %}
<c-vars
    first
    last
    start=""
    startBox
    end=""
    endBox
    variant=""
    :variantHrClasses="{
        'neutral': 'bg-neutral',
        'primary': 'bg-primary',
        'secondary': 'bg-secondary',
        'accent': 'bg-accent',
        'info': 'bg-info',
        'success': 'bg-success',
        'warning': 'bg-warning',
        'error': 'bg-error'
    }"
    :variantIconClasses="{
        'neutral': 'text-neutral',
        'primary': 'text-primary',
        'secondary': 'text-secondary',
        'accent': 'text-accent',
        'info': 'text-info',
        'success': 'text-success',
        'warning': 'text-warning',
        'error': 'text-error'
    }"
/>
{% parse_icon attrs as i %}
{% lbr_props "timeline.item" attrs=attrs as rx %}

<li class="{{ rx.classes }}" {{ rx.attrs }}>
    {% if not first %}<hr {% if variant %}class="{{ variantHrClasses|get_dict_item:variant }}"{% endif %} />{% endif %}

    {% if startSlot %}
        {{ startSlot }}
    {% elif start %}
        <div class="timeline-start {% if startBox %}timeline-box{% endif %}">{{ start }}</div>
    {% endif %}

    {% if middleSlot %}
        {{ middleSlot }}
    {% elif i.name %}
        <div class="timeline-middle">
            <c-component is="lbi" n="{{ i.name }}" w="1.25em" h="1.25em" :fill=i.fill class="{{ variantIconClasses|get_dict_item:variant }} {{ i.css_class }}" />
        </div>
    {% endif %}

    {% if endSlot %}
        {{ endSlot }}
    {% elif end %}
        <div class="timeline-end {% if endBox %}timeline-box{% endif %}">{{ end }}</div>
    {% endif %}

    {{ slot }}

    {% if not last %}<hr {% if variant %}class="{{ variantHrClasses|get_dict_item:variant }}"{% endif %} />{% endif %}
</li>