<div class="collection-header"><h5>{{ root_function.name|default:project.name }}</h5></div>
    {% for function in functions %}
        <a class="collection-item" href="{% url 'project_nested' project.id function.id %}">
             {{ function.name }}{% if function.amount > 1%}<span class="collection-item__amount">{{ function.amount }}</span>{% endif %}
             <a role="button" data-function="{{ function.id }}"
                class="collection-item__delete object-delete btn-flat waves-effect btn-floating">
                 <i class="material-icons red-text">delete_forever</i>
             </a>
         </a>
     {% endfor %}
     {% for reference in references %}
          <a class="collection-item" href="{% url 'project_nested' project.id reference.refers.id %}">
              {{ reference.refers.name }}<span class="collection-item__amount">(reference)</span>
          </a>
     {% endfor %}
     {% include "./popup-form.html" with title="Add object" type="function" inputs=function_create_form project_id=project.id parent_function_id=root_function.id %}
</div>

<a role="button" data-function="{{ function.id }}"
   class="collection-item__delete object-delete btn-flat waves-effect btn-floating">
   <i class="material-icons red-text">delete_forever</i>
</a>

.collection-item {
  border-right: none;
  position: relative;
  text-overflow: ellipsis;
  color: $rhdhv-dark-blue;

  &__delete {
    float: left;
  }
}