{% import "helpers/system.nunj" as systemMacros %}
{% import "helpers/ui.nunj" as ui %}

<div class="Variant Variant--preview" id="variant-{{ variant.handle }}">

    <div class="Variant-header">
        {{ systemMacros.status(variant.status, 'large') }}
        <h3 class="Variant-title">
            <span class="Variant-componentTitle">{{ component.title }}</span>
            {% if component.hasMultipleVariants %}
            <span class="Variant-titleSplitter">/</span>
            <span class="Variant-variantTitle">{{ variant.title }}</span>
            {% endif %}
        </h3>
        <a href="/components/preview/{{ variant.handlePath }}" target="_blank" class="IconLink IconLink--preview" title="Open preview in new window">
            <i class="IconLink-icon">{{ ui.svg('arrow-new-window', '#999', '18px', '18px' ) }}</i><span class="IconLink-text">Preview</span>
        </a>
    </div>

    <div class="Variant-section Variant-section--preview">
        {{ systemMacros.componentPreview(variant.handlePath, variant.display, true) }}
    </div>

</div> <!-- /.Variant -->