{{ if !is_homepage }}
    <div class="flex items-center gap-x-2 pt-4">
        {{ parent }}
        <div class="flex items-center">
            {{ partial:components/atoms/icons/chevron-left }}
            <a href="{{ url }}" class="{{ ['mx-2', 'text-sm', 'font-medium', 'hover:text-primary-500', 'hover:underline'] | classes }}">{{ 'Back'|trans }}</a>
            |
        </div>
        {{ /parent }}

        <nav class="flex" aria-label="Breadcrumb">
            <ol role="list" class="flex items-center space-x-2">
                {{ nav:breadcrumbs }}
                    <li>
                        <div class="flex items-center">
                            {{ if !first }}
                                {{ partial:components/atoms/icons/chevron-right }}
                            {{ /if }}

                            {{ if is_current }}
                                <span class="{{ ['ml-2' => !first, 'text-sm', 'font-medium', 'text-primary-500'] | classes }}">{{ title }}</span>
                            {{ else }}
                                <a href="{{ url }}" class="{{ ['ml-2' => !first, 'text-sm', 'font-medium', 'hover:text-primary-500', 'hover:underline'] | classes }}">{{ title }}</a>
                            {{ /if }}
                        </div>
                    </li>
                {{ /nav:breadcrumbs }}
            </ol>
        </nav>
    </div>
{{ /if }}