{% load humanize %}
<nav class="level is-mobile">
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Packages</p>
      <p class="{{ title_class }} is-flex is-align-items-center is-justify-content-center">
        {% if project.package_count %}
          <a href="{% url 'project_packages' project.slug %}">
            {{ project.package_count|intcomma }}
          </a>
          {% if project.vulnerable_package_count %}
            <a href="{% url 'project_packages' project.slug %}?is_vulnerable=yes" class="has-text-danger is-size-5 ml-2">
              {{ project.vulnerable_package_count|intcomma }}
              <i class="fa-solid fa-bug is-size-6"></i>
            </a>
          {% endif %}
        {% else %}
          <span>0</span>
        {% endif %}
      </p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Dependencies</p>
      <p class="{{ title_class }} is-flex is-align-items-center is-justify-content-center">
        {% if project.dependency_count %}
          <a href="{% url 'project_dependencies' project.slug %}">
            {{ project.dependency_count|intcomma }}
          </a>
          {% if project.vulnerable_dependency_count %}
            <a href="{% url 'project_dependencies' project.slug %}?is_vulnerable=yes" class="has-text-danger is-size-5 ml-2">
              {{ project.vulnerable_dependency_count|intcomma }}
              <i class="fa-solid fa-bug is-size-6"></i>
            </a>
          {% endif %}
        {% else %}
          <span>0</span>
        {% endif %}
      </p>
    </div>
  </div>
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Resources</p>
      <p class="{{ title_class }}">
        {% if project.resource_count %}
          <a href="{% url 'project_resources' project.slug %}">
            {{ project.resource_count|intcomma }}
          </a>
        {% else %}
          <span>0</span>
        {% endif %}
      </p>
    </div>
  </div>
  {% if project.relation_count %}
    <div class="level-item has-text-centered">
      <div>
        <p class="heading">Relations</p>
        <p class="{{ title_class }}">
          <a href="{% url 'project_relations' project.slug %}">
            {{ project.relation_count|intcomma }}
          </a>
        </p>
      </div>
    </div>
  {% endif %}
  <div class="level-item has-text-centered">
    <div>
      <p class="heading">Messages</p>
      <p class="{{ title_class }}">
        {% if project.message_count %}
          <a href="{% url 'project_messages' project.slug %}">
            {{ project.message_count|intcomma }}
          </a>
        {% else %}
          <span>0</span>
        {% endif %}
      </p>
    </div>
  </div>
</nav>