#!mojo mojo:sky_viewer
<!--
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-->
<sky>
<import src="/sky/framework/sky-box.sky"/>
<import src="/sky/framework/sky-button.sky"/>
<import src="/sky/framework/sky-checkbox.sky"/>
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/>
<import src="/sky/framework/sky-input.sky"/>
<import src="/sky/framework/sky-radio.sky"/>
<sky-element name="widget-root">
<template>
  <style>
  div {
    display: flex;
    align-items: center;
  }
  sky-checkbox {
    margin: 5px;
  }
  .output {
    margin-left: 48px;
  }
  </style>

  <sky-box title='Text'>
    <sky-input id="text" value="{{ inputValue }}" />
    <div>value = {{ inputValue }}</div>
  </sky-box>

  <sky-box title='Buttons'>
    <sky-button id='button' on-click='handleClick'>Button</sky-button>
    <div>highlight: {{ myButton.highlight }}</div>
    <div>clickCount: {{ clickCount }}</div>
  </sky-box>

  <sky-box title='Checkboxes'>
    <div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div>
    <div class="output">highlight: {{ myCheckbox.highlight }}</div>
    <div class="output">checked: {{ myCheckbox.checked }}</div>
    <div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked.</div>
    <div class="output">checked: {{ checked }}</div>
  </sky-box>

  <sky-box title='Radios'>
    <sky-box title='Group One'>
      <div><sky-radio group='foo'/>one</div>
      <div><sky-radio group='foo' selected='true' />two</div>
      <div><sky-radio group='foo'/>three</div>
    </sky-box>
    <sky-box title='Group Two'>
      <div><sky-radio group='bar'/>A</div>
      <div><sky-radio group='bar'/>B</div>
      <div><sky-radio group='bar' selected='true' />C</div>
    </sky-box>
  </sky-box>

</template>
<script>
module.exports = class extends SkyElement {
  created() {
    this.myButton = null;
    this.myCheckbox = null;
    this.myText = null;
    this.clickCount = 0;
    this.inputValue = "Ready";
    this.checked = false;
  }
  attached() {
    this.myButton = this.shadowRoot.getElementById('button');
    this.myCheckbox = this.shadowRoot.getElementById('checkbox');
    this.myText = this.shadowRoot.getElementById('text');
    this.clickCount = 0;
  }
  handleClick(event) {
    this.clickCount++;
    this.checked = !this.checked;
    this.inputValue = "Moar clicking " + this.clickCount;
  }
}.register();
</script>
</sky-element>

<widget-root />
</sky>