<div class="Browser-panel Browser-code" data-role="tab-panel" id="browser-{{ entity.id }}-panel-context">
    <code class="Code Code--lang-{{ frctl.theme.get('format') }}">
        {% if not entity.isCollated or entity.isVariant or entity.variants().size == 1 %}
            {% if entity.hasContext() | async %}
            <pre>{{ entity.getResolvedContext()  | async | format(frctl.theme.get('format')) | highlight(frctl.theme.get('format')) }}</pre>
            {% else %}
            <pre>{{ '/* No context defined for this component. */' | highlight('js') }}</pre>
            {% endif %}
        {% else %}
        {% for variant in entity.variants().items() %}
            <pre>
{% if variant.hasContext() | async -%}
{{ '<span class="hljs-comment">/* ' + variant.label + ' */</span>' }}
{{ variant.getResolvedContext()  | async | format(frctl.theme.get('format')) | highlight(frctl.theme.get('format')) }}
{%- else -%}
    {{ '<span class="hljs-comment">/* ' + variant.label + ': No context defined */</span>' }}
{%- endif %}

</pre>
        {% endfor %}
        {% endif %}
    </code>
</div>
