{% load design_components %}
<section data-docs-section="usage">
    <l-stack>
    <h2 data-docs-heading>Usage</h2>
    <section class="dds-usage-example">
        <l-stack>
        <h4 data-usage-title>Minimal example</h4>
        <div data-usage-preview data-surface="stage">
            <iframe src="{{ minimal_preview_url }}"
                    name="minimal"
                    data-canvas-id="minimal"
                    title="Minimal example preview"></iframe>
            <div data-usage-sandbox-link>
                {% dds__button label="Open in sandbox" icon="external-link" icon_only=True variant="ghost" size="sm" href=minimal_preview_url %}
            </div>
        </div>
        {% dds__code_block code=tag_signature.minimal language="django" %}
        </l-stack>
    </section>
    {% if tag_signature.maximal != tag_signature.minimal %}
        <section class="dds-usage-example">
            <l-stack>
            <h4 data-usage-title>All parameters</h4>
            <div data-usage-preview data-surface="stage">
                <iframe src="{{ maximal_preview_url }}"
                        name="maximal"
                        data-canvas-id="maximal"
                        title="All parameters preview"></iframe>
                <div data-usage-sandbox-link>
                    {% dds__button label="Open in sandbox" icon="external-link" icon_only=True variant="ghost" size="sm" href=maximal_preview_url %}
                </div>
            </div>
            {% dds__code_block code=tag_signature.maximal language="django" %}
            </l-stack>
        </section>
    {% endif %}
    {% 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>