{% extends "layouts/pen-frame.nunj" %}
{% import "macros/image.nunj" as img %}
{% import "macros/status.nunj" as status %}
{% import "macros/errors.nunj" as errors %}

{% set page = {
    title: entity.title
} %}

{% set previewUrl = path(frctl.theme.urlFromRoute('preview', {handle: entity.handle})) %}

{% block content %}

{% if frctl.env.server and frctl.env.sync %}
    {% set rendered = false %}
{% else %}
    {% set rendered = entity.render(null, renderEnv, { preview: true, collate: true }) | async(true) %}
    {% if rendered | isError %}
        {% set error = rendered %}
        {% set renderError %}{{ errors.renderError('component', error.message) }}{% endset %}
        {% set rendered = false %}
    {% endif %}
{%- endif %}

<div class="Pen" id="pen-{{ entity.id }}">

    {% block penContent %}

    {% include "partials/pen/header.nunj" %}

    <div class="Pen-tabs">
        <div class="Pen-documentation active ecl-u-mv-s" id="documentation">
          <div class="ecl-editor">
            {% if entity.notes %}
            {{ frctl.docs.renderString(entity.notes, renderEnv) | async }}
            {% else %}
            <p class="Browser-isEmptyNote">There are no notes for this item.</p>
            {% endif %}
          </div>
        </div>

        <div class="Pen-playground" data-behaviour="pen" id="playground">
          {% include "partials/pen/preview.nunj" %}
          <div class="Pen-handle Pen-handle--browser" data-role="resize-handle"></div>
          {% include "partials/pen/browser.nunj" %}
        </div>
    </div>

    {% endblock %}

</div>

<script>
function getChildren(n, skipMe) {
  var r = [];
  for ( ; n; n = n.nextSibling ) {
    if (n.nodeType === 1 && n !== skipMe) {
      r.push(n);
    }
  }

  return r;
}

function getSiblings(n) {
  return getChildren(n.parentNode.firstChild, n);
}

function activateTab(event) {
  event.preventDefault();
  var link = event.target || event.srcElement;
  var tab = document.querySelector(link.getAttribute('href'));
  [link, tab].forEach(function (el) {
    el.classList.add('active');

    var siblings = getSiblings(el);
    [].forEach.call(siblings, function(sibling) {
      sibling.classList.remove('active');
    });
  });
}

var tabsLinks = document.querySelectorAll('.Pen-tabs-nav a');
[].forEach.call(tabsLinks, function(tabLink) {
  tabLink.addEventListener('click', activateTab);
});

</script>
{% endblock %}