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

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

    {% if showHeader %}
    <div class="Variant-header">
        {{ systemMacros.status(variant.status, 'large') }}
        <h3 class="Variant-title">{{ variant.title }}</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>
    {% endif %}

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

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

    <div class="Variant-section Variant-section--fileBrowser">
        {{ systemMacros.fileBrowser(variant) }}
    </div>

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