{% load design_components %}
<l-stack data-docs-header-stack>
<header data-docs-header>
    {% if component_label %}
        <h1 data-docs-title>{{ component_label }}</h1>
    {% else %}
        <h1 data-docs-title>{{ component_info.name }}</h1>
    {% endif %}
    {% if is_theme_restricted %}
        <div data-theme-override-notice
             class="dds-theme-override-notice"
             data-available-themes="{{ component_available_themes_csv }}"
             data-supported-label="{{ available_theme_labels_str }}"
             data-theme-overridden="{% if is_theme_overridden %}true{% else %}false{% endif %}"
             role="status"
             aria-live="polite">
            <l-cluster style="--space: var(--dds-space-2xs); align-items: center;">
            {% if is_theme_overridden %}
                {% dds__badge label="Theme overridden" variant="warning" %}
            {% else %}
                {% dds__badge label="Theme restricted" variant="info" %}
            {% endif %}
            <span data-theme-override-text>{{ theme_override_message }}</span>
            </l-cluster>
        </div>
    {% endif %}
</header>
{% if active_variant %}
    <section class="dds-variant-view" data-surface="docs">
        <l-stack>
        <l-cluster data-variant-header>
        {% dds__badge label="Variant" variant="info" %}
        <h2 data-variant-title>{{ active_variant.label }}</h2>
        </l-cluster>
        {% if variant_description %}
            <div class="dds-prose" data-variant-description>{{ variant_description }}</div>
        {% endif %}
        {% if variant_preview_url %}
            <h3 data-variant-subheading>Preview</h3>
            <div data-variant-preview data-surface="stage">
                <iframe src="{{ variant_preview_url }}"
                        name="variant"
                        data-canvas-id="variant"
                        title="{{ active_variant.label }} variant preview"></iframe>
                <div data-variant-sandbox-link>
                    {% dds__button label="Open in sandbox" icon="external-link" icon_only=True variant="ghost" size="sm" href=variant_preview_url %}
                </div>
            </div>
        {% endif %}
        {% if variant_signature.minimal %}
            {% dds__code_block code=variant_signature.minimal language="django" %}
        {% endif %}
        </l-stack>
    </section>
{% else %}
    <section data-docs-section="description">
        <l-stack>
        <h2 data-docs-heading>Description</h2>
        {% if component_description %}
            <div class="dds-prose" data-surface="docs">
                <div data-prose-body>{{ component_description }}</div>
            </div>
        {% else %}
            <p data-docs-empty>No description provided. Add a docstring to the component class.</p>
        {% endif %}
        </l-stack>
    </section>
{% endif %}
</l-stack>