{% load i18n %}

{% comment %}
    This template provides an breadcrumb bar for the hero / hero_keyvisual template. Use it like this:

        {% block pre-section %}
            {% include "hshassets/includes/breadcrumbs.html" %}
        {% endblock %}

    This snippet will render a breadcrumb bar under the <div class="hero"> element. To use it, you need to edit your
    views that they inherit from "hshassets.views.BreadCrumbMixin". Also provide the attributes "breadcrumb_name" and
    "breadcrumb_parent" (only if you have a parent, otherwise the view will be the root element). Example:

        class ExploreView(ListView, BreadCrumbMixin):
            template_name = 'myapp/explore.html'

            breadcrumb_name = _('Explore')
            breadcrumb_parent = 'about'

    Please note that this template should be used via {% include "" %}, not {% extends "" %}!
    This way you can specify your own navigation or hero text or general content stuff.
{% endcomment %}

<div class="breadcrumb-wrapper">
    <div class="container">
        <nav class="breadcrumb" aria-label="breadcrumbs">
            <ul>

                <li><a href="{{ service_it_uri }}"><span class="icon"><i class="fa fa-home"></i></span> IT Services</a></li>

                {% for breadcrumb in breadcrumb_path %}
                    <li {% if forloop.last %}class="is-active"{% endif %}>
                        <a href="{{ breadcrumb.url }}">{{ breadcrumb.name }}</a>
                    </li>
                {% endfor %}

            </ul>
        </nav>
    </div>
</div>