{% load humanize %}
{% if compliance_alerts or license_clarity_compliance_alert or scorecard_compliance_alert %}
  <div class="column is-half">
    <nav id="compliance-panel" class="panel is-dark">
      <p class="panel-heading">
        Compliance alerts
      </p>
      {% for model_name, model_alerts in compliance_alerts.items %}
        <div class="panel-block">
          <span class="pr-1">
            {{ model_name|title }}
          </span>
          {% for severity, instances_str in model_alerts.items %}
            <a href="{% url 'project_detail' project.slug %}{{ model_name }}/?compliance_alert={{ severity }}">
              <span class="tag is-rounded ml-1 {% if severity == 'error' %}is-danger{% elif severity == 'warning' %}is-warning{% endif %}">
                {{ instances_str|length|intcomma }} {{ severity|title }}
              </span>
            </a>
          {% endfor %}
        </div>
      {% endfor %}
      {% if license_clarity_compliance_alert %}
        <div class="panel-block">
          <span class="pr-1">
            License clarity
          </span>
          <span class="tag is-rounded ml-1
            {% if license_clarity_compliance_alert == 'error' %}is-danger
            {% elif license_clarity_compliance_alert == 'warning' %}is-warning
            {% elif license_clarity_compliance_alert == 'ok' %}is-success
            {% else %}is-light{% endif %}">
            {{ license_clarity_compliance_alert|title }}
          </span>
        </div>
      {% endif %}
      {% if scorecard_compliance_alert %}
          <div class="panel-block">
            <span class="pr-1">
              Scorecard compliance
            </span>
            <span class="tag is-rounded ml-1
              {% if scorecard_compliance_alert == 'error' %}is-danger
              {% elif scorecard_compliance_alert == 'warning' %}is-warning
              {% elif scorecard_compliance_alert == 'ok' %}is-success
              {% else %}is-light{% endif %}">
              {{ scorecard_compliance_alert|title }}
            </span>
          </div>
        {% endif %}
    </nav>
  </div>
{% endif %}