<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="px-4 flex justify-start items-center overflow-x-auto breadcrumbs">
    @for (breadcrumb of prepareBreadcrumbs(); track breadcrumb) {
        <div class="h-8 flex items-center">
            @if (breadcrumb.parentBreadcrumb) {
                <div class="mx-3.5">&raquo;</div>
            }
            @if (breadcrumb.versionedFlowState) {
                <div
                    class="mr-1.5"
                    [class]="getVersionControlClass(breadcrumb)"
                    [title]="getVersionControlTooltip(breadcrumb)"></div>
            }
            @if (isCurrentProcessGroupBreadcrumb(breadcrumb)) {
                <a
                    #currentProcessGroup
                    class="current-process-group font-bold"
                    [routerLink]="['/process-groups', breadcrumb.id]">
                    {{ getBreadcrumbLabel(breadcrumb) }}
                </a>
            } @else {
                <a [routerLink]="['/process-groups', breadcrumb.id]">
                    {{ getBreadcrumbLabel(breadcrumb) }}
                </a>
            }
        </div>
    }
</div>
