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

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

{% block content %}
<div class="grid-container margin-top-4">
    <div class="grid-row grid-gap">
        <div class="tablet:grid-col-3">
            <c-side_nav aria_label="Component navigation">
                {% for category, components in components_by_category %}
                <c-side_nav.item text="{{ category }}">
                    {% for comp in components %}
                    <c-side_nav.item
                        text="{{ comp.name }}"
                        href="{% url 'component-detail' comp.slug %}"
                        {% if comp.slug == component_slug %}is_current="true"{% endif %}
                    />
                    {% endfor %}
                </c-side_nav.item>
                {% endfor %}
            </c-side_nav>
        </div>
        <div class="tablet:grid-col-9">
            {% block component_content %}{% endblock %}
        </div>
    </div>
</div>
{% endblock %}