<!--
// 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/framework/elements/material-element.sky" />
<import src="/sky/framework/elements/sky-element.sky" />
<import src="stock-arrow.sky" />

<sky-element>
<template>
  <style>
  :host {
    // TODO(eseidel): Why does setting height here make this too big?
    // height: 48px;
    max-height: 48px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #F4F4F4;
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 20px;
  }
  stock-arrow {
    margin-right: 16px;
  }
  #ticker {
    flex: 1;
    font-family: 'Roboto Medium', 'Helvetica';
  }
  #last-sale {
    text-align: right;
    padding-right: 16px;
  }
  #change {
    color: #8A8A8A;
    text-align: right;
  }
  </style>
  <stock-arrow id="arrow" />
  <div id="ticker" />
  <div id="last-sale" />
  <div id="change" />
</template>
<script>
import "dart:sky";

@Tagname('stock')
class Stock extends MaterialElement {
  var model; // model.Stock

  void shadowRootReady() {
    shadowRoot.getElementById('ticker').textContent = model.symbol;

    Element lastSale = shadowRoot.getElementById('last-sale');
    lastSale.textContent = "\$${model.lastSale.toStringAsFixed(2)}";

    Element change = shadowRoot.getElementById('change');
    String changeString = "${model.percentChange.toStringAsFixed(2)}%";
    if (model.percentChange > 0)
      changeString = "+" + changeString;
    change.textContent = changeString;

    StockArrow arrow = shadowRoot.getElementById('arrow');
    arrow.change = model.percentChange;
  }
}

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