{% load design_components %}
<section data-docs-section="usage">
    <l-stack>
    <h2 data-docs-heading>Usage</h2>
    {% for example in usage_examples %}
        <section class="dds-usage-example">
            <l-stack>
            <h4 data-usage-title>{{ example.label }}</h4>
            {% if example.description %}
                <div data-usage-description>{{ example.description }}</div>
            {% endif %}
            <div data-usage-preview data-surface="stage">
                <iframe src="{{ example.preview_url }}"
                        name="{{ example.canvas_id }}"
                        data-canvas-id="{{ example.canvas_id }}"
                        title="{{ example.label }} preview"></iframe>
                <div data-usage-sandbox-link>
                    {% dds__button label="Open in sandbox" icon="external-link" icon_only=True variant="ghost" size="sm" href=example.preview_url %}
                </div>
            </div>
            {% dds__code_block code=example.code language="django" %}
            </l-stack>
        </section>
    {% endfor %}
    {% if component_info.qualified_name != component_info.name and not component_info.is_builtin %}
        <section class="dds-usage-example">
            <l-stack>
            <h4 data-usage-title>Qualified tag usage</h4>
            {% dds__code_block code=tag_signature_long.minimal language="django" %}
            </l-stack>
        </section>
    {% endif %}
    </l-stack>
</section>