{% import "helpers/components.nunj" as comp %}
{% import "helpers/misc.nunj" as ui %}

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

    {% if showHeader %}
    {% set previewUrl = frctl.web.theme.urlFromRoute('render', {render:'preview', handle:variant.handle}) %}
    <div class="Variant-header">
        {{ comp.status(variant.status, 'large') }}
        <h3 class="Variant-title">{{ variant.title }}</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>
    {% endif %}

    {% if variant.notes %}
    <div class="Variant-section Variant-section--notes Prose">
        {{ variant.notes }}
    </div>
    {% endif %}

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

    <div class="Variant-section Variant-section--fileBrowser">
        {{ comp.fileBrowser(variant, variant|render, variant|context|stringify) }}
    </div>

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