{% for view in groups %}
<div id="{{ view.group.name | replace(' ', '_') }}" role="tabpanel" class="m-4 mb-4{% if loop.index > 1 %} hidden{% endif %}">
    <div class="p-3 bg-amber-100/40 rounded-sm w-full flex align-middle">
        <div class="text-amber-100 mt-1.5">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
            </svg>
        </div>
        <div class="ml-2 text-amber-100 text-sm">
            <div class="prose">
                {{ view.group.description | markdown }}
            </div>
        </div>
    </div>

    <div class="flex items-center space-x-1">
        <h2 class="uppercase my-4 mr-2 font-medium">Issues</h2>
        {% if view.num_major_issues > 0 %}
        <span class="text-xs border rounded px-1 uppercase text-red-400 border-red-400">{{ view.num_major_issues }}
            major</span>
        {% endif %}
        {% if view.num_medium_issues > 0 %}
        <span class="text-xs border rounded px-1 uppercase text-amber-200 border-amber-200">{{ view.num_medium_issues }}
            medium</span>
        {% endif %}
        {% if view.num_minor_issues > 0 %}
        <span class="text-xs border rounded px-1 uppercase text-blue-200 border-blue-200">{{ view.num_minor_issues }}
            info</span>
        {% endif %}
    </div>

    {% with issues=view.issues %}
        {% include "scan_report/html/_issues_table.html" %}
    {% endwith %}
</div>
{% endfor %}

{% if issues|length == 0 %}
<div class="m-4">
    <div class="p-3 bg-green-100/40 rounded-sm w-full flex align-middle">
        <p class="ml-2 my-1 text-green-50 text-sm">
            We found no issues in your model. Good job!
        </p>
    </div>
</div>
{% endif %}