{% load i18n %}

<style>
    .breadcrumb, .breadcrumb:last-child, .breadcrumb .material-icons {
        color: grey;
    }

    .breadcrumb div {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .breadcrumb .material-icons {
        margin-right: 0;
    }


    .breadcrumb::before {
        display: none;
    }

    .bread-icon {
        font-size: 25px;
        color: grey;
        line-height: 1.5;
        margin-right: 10px;
        margin-left: 10px;
    }

</style>
<div class="nav-wrapper" style="height: 65px;">
  <div class="col s12" style="display: flex; justify-content: center;">
    <div class="breadcrumb {% if step == 1 %}primary-color-text{% else %}green-text{% endif %}">
      <div>
        <i class="material-icons iconify {% if step == 1 %}primary-color-text{% else %}green-text{% endif %}"
           data-icon="{% if step > 1 %}mdi:checkbox-marked-circle-outline{% else %}mdi:checkbox-blank-circle-outline{% endif %}"></i>
        {% trans "Select items" %}
      </div>
    </div>
    <i class="material-icons bread-icon iconify" data-icon="mdi:chevron-right"></i>
    <div class="breadcrumb {% if step == 2 %}primary-color-text{% elif step > 2 %}green-text{% endif %}">
      <div>
        <i class="material-icons iconify {% if step == 2 %}primary-color-text{% elif step > 2 %}green-text{% endif %}"
           data-icon="{% if step > 2 %}mdi:checkbox-marked-circle-outline{% else %}mdi:checkbox-blank-circle-outline{% endif %}"></i>
        {% trans "Select processing option" %}
      </div>
    </div>
    <i class="material-icons bread-icon iconify" data-icon="mdi:chevron-right"></i>
    <div class="breadcrumb {% if step == 3 %}primary-color-text{% elif step > 3 %}green-text{% endif %}">
      <div>
        <i class="material-icons iconify {% if step == 3 %}primary-color-text{% elif step > 3 %}green-text{% endif %}"
           data-icon="{% if step > 3 %}mdi:checkbox-marked-circle-outline{% else %}mdi:checkbox-blank-circle-outline{% endif %}"></i>
        {% trans "Confirm" %}
      </div>
    </div>
  </div>
</div>