<!DOCTYPE html>
<html>
<head>
<title>Stock Prices</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
<script type="text/javascript" src="/js/util.js"></script>
<style type="text/css">
/*<![CDATA[*/
body {
  color: #333333;
  line-height: 150%;
}

thead {
  font-weight: bold;
  background-color: #CCCCCC;
}

.odd {
  background-color: #FFCCCC;
}

.even {
  background-color: #CCCCFF;
}

.minus {
  color: #FF0000;
}

/*]]>*/
</style>

</head>

<body>

  <h1>Stock Prices</h1>

  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>symbol</th>
        <th>name</th>
        <th>price</th>
        <th>change</th>
        <th>ratio</th>
      </tr>
    </thead>
    <tbody>
      {{#each items base=1}}
      <tr class="{{&@odd}}{{&@even}}">
        <td>{{&@index}}</td>
        <td><a href="/stocks/{{&symbol}}">{{&symbol}}</a></td>
        <td><a href="{{&url}}">{{&name}}</a></td>
        <td><strong>{{&price}}</strong></td>
        <td {{minus}}>{{&change}}</td>
        <td {{minus}}>{{&ratio}}</td>
      </tr>
      {{/each}}
    </tbody>
  </table>

</body>
</html>
