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

{% block content %}
<div class="Page Page--panelled fr-inner">
    <div class="Page-inner">
        <div class="Component">

            <div class="Component-header">
                <h2 class="Component-title">{{ component.title }}</h2>
                {{ systemMacros.status(component.status, 'labelled') }}
                {% if not component.hasMultipleVariants %}
                <a href="/components/preview/{{ component.variants[0].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>
                {% endif %}
            </div>

            {% if component.readme or component.hasMultipleVariants %}
            <div class="Component-info">
                {% if component.readme %}
                <div class="Component-description Prose">
                    {{ component.readme }}
                </div>
                {% endif %}

                {% if component.hasMultipleVariants %}
                {% set message = "This component has " + component.variants|length + " variants: " %}
                {% set comma = joiner(', ') %}
                {% for variant in component.variants %}
                    {% set message = message + comma() + '<a href="#variant-' + variant.handle + '">' + variant.title + '</a>' %}
                {% endfor %}
                {{ ui.notification(message) }}
                {% endif %}
            </div> <!-- /.Component-info -->
            {% endif %}

            <div class="Component-variants">
            {% set showHeader = component.hasMultipleVariants %}
            {% for variant in component.variants %}
            {% include 'partials/variant.nunj' %}
            {% endfor %}
            </div> <!-- /.Component-variants -->

        </div> <!-- /.Component -->
    </div> <!-- /.Page-inner -->
</div> <!-- /.Page -->

{% endblock %}