<div>

  <script type="text/ng-template" id="heroUnitTemplate.html">
    <div class="hero-unit">
      <h5>No Items Added</h5>
      <p><a href="" ng-click="addThing()">Add an item</a> to the table</p>
    </div>
  </script>

  <script type="text/ng-template" id="headerCellTemplate.html">
    <th>{{label}}</th>
  </script>

  <script type="text/ng-template" id="emptyHeaderCellTemplate.html">
    <th></th>
  </script>

  <script type="text/ng-template" id="deleteRowTemplate.html">
    <td ng-click="removeThing({{index}})" class="align-center">
      <i class="icon-remove red mouse-pointer"></i>
    </td>
  </script>

  <script type="text/ng-template" id="cellTemplate.html">
    <td>
      <editable-property ng-model="{{row}}"
                         type="{{type}}"
                         property="{{key}}"></editable-property>
    </td>
  </script>

  <script type="text/ng-template" id="cellNumberTemplate.html">
    <td>
      <editable-property ng-model="{{row}}"
                         type="{{type}}"
                         property="{{key}}" min="{{min}}" max="{{max}}"></editable-property>
    </td>
  </script>

  <script type="text/ng-template" id="rowTemplate.html">
    <tr></tr>
  </script>

  <div ng-show="configuration.rows.length == 0" class="row-fluid">
    <div class="span12 nodata">
    </div>
  </div>
  <div ng-hide="configuration.rows.length == 0" class="row-fluid">
    <div class="span12">
      <h3 ng-show="configuration.heading">{{getHeading()}}</h3>
      <table class="table table-striped">
        <thead>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <div ng-click="addThing()" class="centered mouse-pointer">
      <i class="icon-plus green"></i><span ng-show="configuration.rowName"> Add {{configuration.rowName.titleize()}}</span>
    </div>
  </div>
</div>
