{% set path = path|default('') %}
{% set separator = separator|default(DIRECTORY_SEPARATOR) %}
{% set hide_links = hide_links|default(false) %}
{% set items = path|split(separator) %}
{% set home_path = home_path|default('') %}

<div class="flex flex-row items-center {{ class }}" 
    separator="{{ separator }}" 
    id="{{ id|default('breadcrumb') }}" 
    current-path="{{ path }}" 
    home-path="{{ home_path }}">             
    {% if icon is not empty %}
        {% if hide_links != true %}
            <a class="p-2 breadcrumb-item {{ link_class }}" path="{{ home_path }}">
                {{ component(icon.name,{ class: icon.class, size: icon.size|default('h-8 w-8'), width: 2, color: icon.color },'svg') }}   
            </a>
        {% else %}
            <div class="p-2">      
                {{ component(icon.name,{ size: icon.size|default('h-8 w-8'), width: 2, color: icon.color },'svg') }}   
            </div>   
        {% endif %}
    {% endif %}             
    <div class="{{ separator_class|default('p-2') }}">{{ separator }}</div>      
    <div class="flex flex-row items-start flex-grow breadcrumb-items">
    {% for item in items %}         
        {% if item is not empty %}
            {% set open_path = open_path ~ separator ~ item %}
            {% if hide_links != true %}           
                <a class="p-2 breadcrumb-item {{ link_class }}" path="{{ open_path }}" {{ params|attr }}>
                    {{ item }}               
                </a>
            {% else %}
                <div class="breadcrumb-item {{ item_class|default('p-2') }}">
                    {{ item }}
                </div>
            {% endif %}
            <div class="{{ separator_class|default('p-2') }}">{{ separator }}</div>
        {% endif %}          
    {% endfor %} 
    </div>               
</div>