<!DOCTYPE html>

<import src="/sky/framework/dom-serializer.sky" as="DomSerializer" />
<import src="/sky/framework/elements/sky-element/sky-binder.sky" as="binder" />

<div id="host"></div>

<template id="template">
  <style>
  .blue { border: 1px solid blue; }
  .orange { border: 1px solid orange; }
  .repeat { margin: 8px; }
  </style>
  <span style="color: {{ red }}">{{ value }}</span>
  <template repeat="{{ list }}">
    <div class="{{ className }} repeat">{{ item }}</div>
  </template>
  <template if="{{ test }}">
    Hello World
  </template>
  <template if="{{ testFalse }}">
    Should not be visible.
  </template>
  <template repeat="{{ nullInstances }}">
    Should not be visible.
  </template>
  <div>{{ value }} test {{ red }}{{ className }} test</div>
  <a href="{{ url }}">{{ url }}</a>
  <span on-test-event="handleTestEvent">
    <span id="target">Test event handler: </span>
  </span>
  <div class="[[ className ]]">[[ url ]]</div>
</template>

<script>
window.addEventListener("load", function() {
  var template = document.getElementById('template');
  var host = document.getElementById('host');
  host.handleTestEvent = function(e) {
    e.target.appendChild(new Text("event dispatch success"));
  };
  window.model = {
    value: 10,
    test: true,
    testFalse: false,
    nullInstances: [null],
    url: "http://www.google.com/",
    red: "red",
    className: "blue",
    list: [{
      item: "first",
      className: "blue",
    }, {
      item: "second",
      className: "orange",
    }],
  };
  var instance = binder.createInstance(template, window.model);
  host.ensureShadowRoot().appendChild(instance.fragment);
  var target = host.shadowRoot.getElementById("target");
  target.dispatchEvent(new CustomEvent("test-event", {
    bubbles: true,
  }));
  internals.notifyTestComplete(DomSerializer.serializeNode(host.shadowRoot));
});
</script>