<template>
  <h2>${heading}</h2>
  <button click.trigger="add()" class="btn btn-default"><i class="fa fa-plus"></i>&nbsp;
    <label>${'common.add' | t }</label>
  </button>
  <table class="table table-hover">
    <thead>
      <tr>
        <th class="col-sm-1">${'common.N' | t }</th>
        <th class="col-sm-3">${'common.name' | t }</th>
        <th class="col-sm-2">${'buildings.capacity' | t }</th>
        <th class="col-sm-2">${'buildings.address' | t }</th>
        <th class="col-sm-2">${'buildings.state' | t }</th>
        <th class="col-sm-2"> </th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="building of buildings">
        <td>${$index + 1}</td>
        <td validate.bind="building.validation">
          <div class="form-group">
            <label show.bind="!building.isInEditMode">${building.name}</label>
            <input type="text" validate="${building.name}" value.bind="building.name" show.bind="building.isInEditMode" class="form-control"/>
          </div>
        </td>
        <td>
          <label show.bind="!building.isInEditMode">${building.capacity}</label>
          <input type="text" value.bind="building.capacity" show.bind="building.isInEditMode" class="form-control"/>
        </td>
        <td>
          <label show.bind="!building.isInEditMode">${building.address}</label>
          <input type="text" value.bind="building.address" show.bind="building.isInEditMode" class="form-control"/>
        </td>
        <td>
          <label show.bind="!building.isInEditMode">${building.buildingStateName}</label>
          <select type="text" value.bind="building.buildingStateId" show.bind="building.isInEditMode" class="form-control">
            <option>Choose</option>
            <option repeat.for="state of $parent.buildingStates" value.bind="state.id">${state.name}</option>
          </select>
        </td>
        <td>
          <button click.trigger="$parent.save(building)" show.bind="building.isInEditMode" disabled.bind="!building.validation.result.isValid" class="btn btn-success"><i class="fa fa-save fa-lg"></i></button>
          <button click.trigger="building.edit()" show.bind="!building.isInEditMode" class="btn btn-default"><i class="fa fa-pencil fa-lg"></i></button>
          <button click.trigger="$parent.delete(building)" class="btn btn-danger"><i class="fa fa-trash-o fa-lg"></i></button>
        </td>
      </tr>
    </tbody>
  </table>
</template>