step06/views/index.handlebars

<!--
  Copyright 2016 Google, Inc.

  Licensed to the Apache Software Foundation (ASF) under one or more contributor
  license agreements. See the NOTICE file distributed with this work for
  additional information regarding copyright ownership. The ASF licenses this
  file to you under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<div class="mdl-grid">
  <section id="orders" class="mdl-cell mdl-cell--8-col relative">
    <div class="mdl-grid">
      {{#each orders}}
      <div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title">
          <h2 class="mdl-card__title-text">Order #{{id}}</h2>
        </div>
        <div class="mdl-card__supporting-text">
          <table class="order-details">
            <tr><th>Customer</th><td>{{customerName}}</td></tr>
            <tr><th>Product code</th><td>{{productCode}}</td></tr>
            <tr><th>Units ordered</th><td>{{unitsOrdered}}</td></tr>
            <tr><th>Unit price (USD)</th><td>{{unitPrice}}</td></tr>
            <tr><th>Status</th><td>{{status}}</td></tr>
          </table>
        </div>
        <div class="mdl-card__actions">
          <a class="mdl-button mdl-button--colored mdl-js-button
                    mdl-js-ripple-effect"
             href="/edit/{{id}}">Edit</a>
          <a class="mdl-button mdl-js-button mdl-js-ripple-effect"
             href="/delete/{{id}}">Delete</a>
        </div>
      </div>
      {{/each}}
       <a class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect
                 mdl-button--colored mdl-shadow--4dp mdl-color--accent"
          href="/create">
        <i class="material-icons" role="presentation">add</i>
        <span class="visuallyhidden">Add</span>
      </a>
    </div>
  </section>

  <!-- Show spreadsheets -->
  <section id="spreadsheets"
           class="mdl-cell mdl-cell--4-col relative">
    <div class="mdl-list">
      <div class="mdl-list__item">
        <span class="mdl-list__item-primary-content mdl-layout-title">
          Spreadsheets</span>
        <span class="mdl-list__item-secondary-action">
          <button class="mdl-button mdl-js-button mdl-button--raised
                         mdl-js-ripple-effect mdl-button--colored"
                  rel="create" type="button">Create</button>
        </span>
      </div>
      {{#each spreadsheets}}
      <div class="mdl-list__item">
        <a class="mdl-list__item-primary-content"
           href="https://docs.google.com/spreadsheets/d/{{id}}/edit"
           target="_blank">{{name}}</a>
        <span class="mdl-list__item-secondary-action">
          <button class="mdl-button mdl-js-button mdl-button--raised
                         mdl-js-ripple-effect"
                  rel="sync" data-spreadsheetid="{{id}}"
                  type="button">Sync</button>
        </span>
      </div>
      {{/each}}
    </div>
  </section>
</div>