{% extends 'base.html' %}
{% block content %}
<main>
    <h1>{{page.title}}</h1>
    {{page.body_html|safe}}
</main>
{% endblock %}

{% block extra %}
{% if login_form %}
<div class="overlay-content" id="js-overlay-content" style="display: none;">
    {% include 'lib/login.html' with form=login_form %}
</div>
{% endif %}
{%endblock%}
{% block jsdomready %}
{% if login_form %}
  // Select your overlay trigger
  var trigger = document.querySelector('#overlay-trigger');
  trigger.addEventListener('click', function(e){
    e.preventDefault();
    novicell.overlay.create({
      'selector': trigger.getAttribute('data-element'),
      'class': 'selector-overlay',
      "onCreate": function() { console.log('created'); },
      "onLoaded": function() { console.log('loaded'); },
      "onDestroy": function() { console.log('Destroyed'); }
    });
  });
{% endif %}
{%endblock%}