<!--
// Copyright 2015 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.
-->
<import src="sky-element.sky" />

<sky-element attributes="title:string">
<template>
  <style>
    :host {
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      border: 1px solid gray;
      margin: 10px;
    }
    #title {
      text-align: center;
      font-size: 10px;
      padding: 8px 8px 4px 8px;
    }
    #content {
      padding: 4px 8px 8px 8px;
    }
    div {
      flex: 1;
    }
  </style>
  <div id="title"></div>
  <div id="content"><content/></div>
</template>
<script>
import "dart:sky";

@Tagname('sky-box')
class SkyBox extends SkyElement {
  Element _title;

  void shadowRootReady() {
    _title = shadowRoot.getElementById('title');
    _title.setChild(new Text(title));
  }

  void titleChanged(String oldValue, String newValue) {
    if (_title != null)
      _title.setChild(new Text(newValue));
  }
}

_init(script) => register(script, SkyBox);
</script>
</sky-element>