{% load i18n %}

<nav aria-label="breadcrumb">
  <ol class="inline-flex items-center space-x-2">
    <li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:index' %}"><i
      class="fas fa-home">&nbsp;</i>{% trans "Forum index" %}</a></li>
    {% if forum %}
      {% for ancestor in forum.get_ancestors %}
        <svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
             fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd"
                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                clip-rule="evenodd"/>
        </svg>
        <li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:forum' ancestor.slug ancestor.id %}">{{ ancestor.name }}</a>
        </li>
      {% endfor %}
      <svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
           fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd"
              d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
              clip-rule="evenodd"/>
      </svg>
      <li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:forum' forum.slug forum.id %}">{{ forum.name }}</a></li>
    {% endif %}
    {% if topic %}
      <svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
           fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd"
              d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
              clip-rule="evenodd"/>
      </svg>
      <li class="breadcrumb-item"><a
        href="{% url 'forum_conversation:topic' forum.slug forum.id topic.slug topic.id %}">{{ topic.subject|truncatewords:4 }}</a></li>
    {% endif %}
  </ol>
</nav>
