{% load lb_tags %}
<c-vars
    class=""
    variant=""
    :variantClasses="{
        'info': 'alert-info',
        'success': 'alert-success',
        'warning': 'alert-warning',
        'error': 'alert-error'
    }"
    style=""
    :styleClasses="{
        'outline': 'alert-outline',
        'dash': 'alert-dash',
        'soft': 'alert-soft'
    }"
    direction=""
    :directionClasses="{
        'vertical': 'alert-vertical',
        'horizontal': 'alert-horizontal'
    }"
/>
{% parse_icon attrs as i %}

<div role="alert" class="alert {{ variantClasses|get_dict_item:variant }} {{ styleClasses|get_dict_item:style }} {{ directionClasses|get_dict_item:direction }} {{ class }}" {{ attrs|strip_icon_attrs }}>
    {% if i.name %}
        <c-component is="lbi" n="{{ i.name }}" w="1em" h="1em" :fill=i.fill class="text-lg {{ i.css_class }}" />
    {% endif %}

    {{ slot }}

    {% if actions %}
        <div>
            {{ actions }}
        </div>
    {% endif %}
</div>