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

{% macro preview(ref, display, embed) %}
{% set iframeUrl = frctl.web.theme.urlFromRoute('render', {render:'iframe', handle:ref}) %}
<div class="ComponentPreview" data-behaviour="preview">
    <div class="ComponentPreview-wrapper">
        <iframe id="preview-{{ ref }}" class="ComponentPreview-iframe" allowtransparency="true"{% if display %} style="{% for property, value in display %}{{ property }}: {{ value }} !important; {% endfor %}"{% endif %} src="{{ iframeUrl }}"></iframe>
    </div>
</div>
{% endmacro %}

{% macro embeddedCode(str, highlight, lang) %}
<code class="Code Code--embedded Code--lang-{{lang}}">
    <pre>{% if highlight %}{{ str | highlight(lang) }}{% else %}{{ str }}{% endif %}</pre>
</code>
{% endmacro %}


{% macro statusDot(color, label) %}
<span class="Status-dot" style="background: {{ color }};" title="{{ label }}"></span>
{% endmacro %}

{% macro status(status, modifier) %}
{% if status %}
<div class="Status{% if modifier %} Status--{{ modifier }}{% endif %}">
    <div class="Status-label">{{ status.label }}</div>
    <div class="Status-dots">
    {% if status.statuses %}
    {% for stat in status.statuses %}
    {{ statusDot(stat.color, stat.label) }}
    {% endfor %}
    {% else %}
    {{ statusDot(status.color, status.label) }}
    {% endif %}
    </div>
</div>
{% endif %}
{% endmacro %}

{% macro fileBrowserContentItem(id, content, current) %}
<div class="FileBrowser-contentItem{% if current %} is-current{% endif %}" id="{{ id }}">
    <div class="FileBrowser-contentItemContent">
        {{ content }}
    </div>
</div>
{% endmacro %}

{% macro fileBrowser(variant, rendered, context) %}

<div class="FileBrowser" data-behaviour="file-browser">
    {% set showTemplate = rendered != variant.getContentSync() %}
    <div class="FileBrowser-fileList">
        <ul class="FileBrowser-files">
            <li class="FileBrowser-fileListItem is-current">
                <a href="#variant-{{ variant.name }}-file-browser-source" class="FileBrowser-fileListLink">
                    <i class="FileBrowser-icon">{{ ui.svg('code', '#bbb', '20px', '16px' ) }}</i> Source
                </a>
            </li>
            {% if showTemplate %}
            <li class="FileBrowser-fileListItem">
                <a href="#variant-{{ variant.name }}-file-browser-view" class="FileBrowser-fileListLink">
                    <i class="FileBrowser-icon">{{ ui.svg('code', '#bbb', '20px', '16px' ) }}</i> View
                </a>
            </li>
            {% endif %}
            {% if context %}
            <li class="FileBrowser-fileListItem">
                <a href="#variant-{{ variant.name }}-file-browser-context" class="FileBrowser-fileListLink">
                    <i class="FileBrowser-icon">{{ ui.svg('code', '#bbb', '20px', '16px' ) }}</i> Context
                </a>
            </li>
            {% endif %}
            {% for asset in variant.assets().filter('isBinary', false).files().toArray() %}
            <li class="FileBrowser-fileListItem">
                <a href="#variant-{{ variant.name }}-file-browser-{{ asset.handle }}" class="FileBrowser-fileListLink" title="{{ asset.base }}">
                    <i class="FileBrowser-icon">{{ ui.svg('file-text', '#bbb', '20px', '16px' ) }}</i> {{ asset.base }}
                </a>
            </li>
            {% endfor %}
        </ul>
        <button class="ToggleButton is-inactive FileBrowser-toggle">
            <span class="ToggleButton-active">{{ ui.svg('close', '#999', '15px', '15px') }}</span>
            <span class="ToggleButton-inactive">{{ ui.svg('menu', '#999', '18px', '18px') }}</span>
        </button>
    </div>

    <div class="FileBrowser-content">

        {% set sourceCode = embeddedCode(rendered, true, 'html') %}
        {{ fileBrowserContentItem('variant-' + variant.name + '-file-browser-source', sourceCode, true) }}

        {% if showTemplate %}
         {% set viewCode = embeddedCode(variant.getContentSync(), true, variant.editorMode) %}
         {{ fileBrowserContentItem('variant-' + variant.name + '-file-browser-view', viewCode) }}
         {% endif %}

        {% if context %}
            {% set contextCode = embeddedCode(context, true, 'json') %}
            {{ fileBrowserContentItem('variant-' + variant.name + '-file-browser-context', contextCode) }}
        {% endif %}

        {% for asset in variant.assets().filter('isBinary', false).files().toArray() %}
            {% set code = embeddedCode(asset.getContentSync(), true, asset.editorMode) %}
            {{ fileBrowserContentItem('variant-' + variant.name + '-file-browser-' + asset.handle, code) }}
        {% endfor %}

    </div>

</div>
{% endmacro %}