{% extends "demo_app/base.html" %}

{% block title %}django-cotton-uswds — Components{% endblock %}

{% block content %}
<div class="grid-container margin-top-4">
    <h1 class="font-heading-2xl">Components</h1>
    <p class="usa-intro">Browse all django-cotton-uswds components.</p>

    {% for category, components in components_by_category %}
    <h2 class="font-heading-xl margin-top-4">{{ category }}</h2>
    <ul class="usa-list">
        {% for comp in components %}
        <li><a href="{% url 'component-detail' comp.slug %}">{{ comp.name }}</a></li>
        {% endfor %}
    </ul>
    {% endfor %}
</div>
{% endblock %}