{% import "helpers/system.nunj" as systemMacros %}
{% import "helpers/ui.nunj" as ui %}
{% set variant = variant.preRender() | resolve %}
<div class="Variant Variant--preview" id="variant-{{ variant.handle }}">
    {% set previewUrl = theme.urlFromRoute('component-render', {render:'preview', entityPath:variant.handlePath}) %}
    <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="{{ previewUrl }}" 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 -->