{% extends "layouts/pjax.nunj" if request.isPjax else "layouts/standard.nunj" %}
{% import "helpers/components.nunj" as comp %}
{% import "helpers/misc.nunj" as ui %}

{% set component = frctl.components.find('handle', frctl.web.request.params.handle) %}
{% if not component or component.type == 'variant' or component.isHidden %}{% throw404 'Component not found' %}{% endif %}
{% set sectionTitle = component.title %}
{% set contentModifier = 'panelled' %}

{% block content %}

<div class="Page Page--panelled fr-inner">
    <div class="Page-inner">
        <div class="Component">
            {% set variants = component.variants() %}
            {% set defaultVariant = variants.default() %}
            {% set previewUrl = frctl.web.theme.urlFromRoute('render', {render:'preview', handle: component.handle}) %}
            <div class="Component-header">
                <h2 class="Component-title">{{ component.title }}</h2>
                {% if variants.size == 1 %}
                {{ comp.status(defaultVariant.status, 'labelled') }}
                <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>
                {% else %}
                {{ comp.status(component.status, 'labelled') }}
                {% endif %}
            </div>

            {% if component.notes or variants.size > 1 %}
            <div class="Component-info">
                {% if component.notes %}
                <div class="Component-description Prose">
                    {{ component.notes }}
                </div>
                {% endif %}

                {% if variants.size > 1 %}
                {% set message = "This component has " + variants.size + " variants: " %}
                {% set comma = joiner(', ') %}
                {% for variant in variants.toArray() %}
                    {% 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 = variants.size > 1 %}
            {% for variant in variants.toArray() %}
            {% include 'partials/variant.nunj' %}
            {% endfor %}
            </div> <!-- /.Component-variants -->

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

{% endblock %}