<%= if @conn.assigns[:current_user] do %>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    <%= if @cms_page do %>
    Imagine.showViewToolbar(<%= Map.get(@cms_page, :cms_page_id) || @cms_page.id %>, '<%= @cms_page.path %>',
                            '<%= @display_version_options %>',
                            '<%= @published_version_options %>');
    document.getElementById("Imagine-Properties-Save-Button").addEventListener("click", (e) => {
      e.preventDefault();
      document.getElementById("Imagine-Properties-Form").submit();
      return false;
    });
    <% else %>
    Imagine.showViewToolbar();
    <% end %>
  });

  // borrowed from phoenix_html, to enable toolbar logout button
  // https://github.com/phoenixframework/phoenix_html/blob/master/priv/static/phoenix_html.js
  (function() {
    var PolyfillEvent = eventConstructor();

    function eventConstructor() {
      if (typeof window.CustomEvent === "function") return window.CustomEvent;
      // IE<=9 Support
      function CustomEvent(event, params) {
        params = params || {bubbles: false, cancelable: false, detail: undefined};
        var evt = document.createEvent('CustomEvent');
        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
        return evt;
      }
      CustomEvent.prototype = window.Event.prototype;
      return CustomEvent;
    }

    function buildHiddenInput(name, value) {
      var input = document.createElement("input");
      input.type = "hidden";
      input.name = name;
      input.value = value;
      return input;
    }

    function handleClick(element, targetModifierKey) {
      var to = element.getAttribute("data-to"),
          method = buildHiddenInput("_method", element.getAttribute("data-method")),
          csrf = buildHiddenInput("_csrf_token", element.getAttribute("data-csrf")),
          form = document.createElement("form"),
          target = element.getAttribute("target");

      form.method = (element.getAttribute("data-method") === "get") ? "get" : "post";
      form.action = to;
      form.style.display = "hidden";

      if (target) form.target = target;
      else if (targetModifierKey) form.target = "_blank";

      form.appendChild(csrf);
      form.appendChild(method);
      document.body.appendChild(form);
      form.submit();
    }

    window.addEventListener("click", function(e) {
      var element = e.target;

      while (element && element.getAttribute) {
        var phoenixLinkEvent = new PolyfillEvent('phoenix.link.click', {
          "bubbles": true, "cancelable": true
        });

        if (!element.dispatchEvent(phoenixLinkEvent)) {
          e.preventDefault();
          e.stopImmediatePropagation();
          return false;
        }

        if (element.getAttribute("data-method")) {
          handleClick(element, e.metaKey || e.shiftKey);
          e.preventDefault();
          return false;
        } else {
          element = element.parentNode;
        }
      }
    }, false);

    window.addEventListener('phoenix.link.click', function (e) {
      var message = e.target.getAttribute("data-confirm");
      if(message && !window.confirm(message)) {
        e.preventDefault();
      }
    }, false);
  })();
</script>
<% end %>

<%= if @cms_page do %>
<div id="Imagine-Properties-Modal" class="ui modal">
  <i class="close icon"></i>
  <div class="header">Properties</div>
  <div class="content">
    <%= render ImagineWeb.CmsPageView, "_properties_modal.html", assigns %>
  </div>
  <div class="actions">
    <div id="Imagine-Properties-Save-Button" class="ui primary button">Save</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>
<% end %>
