@(imageUsages: Map[BaseImage, Iterable[Recipe]])
@simpleLayout("AMIgo"){

  <h1>Base images</h1>

  <div class="panel panel-default">
    <div class="panel-heading">Actions</div>
    <div class="panel-body">
      <a class="btn btn-primary" href="@routes.BaseImageController.newBaseImage()">Create new base image</a>
    </div>
  </div>

  <p>Click on a row for more details.</p>

  <table class="table table-striped">
    <thead>
      <th>Name</th>
      <th>Description</th>
      <th>Usages</th>
      <th>Status</th>
    </thead>
    <tbody>
    @for((image, usages) <- imageUsages.toList.sortBy(_._1.id.value.toLowerCase)) {
      <tr>
        <td class="has-block-link"><a href="@routes.BaseImageController.showBaseImage(image.id)" class="block-link">@image.id</a></td>
        <td class="has-block-link"><a href="@routes.BaseImageController.showBaseImage(image.id)" class="block-link">@image.description</a></td>
        <td class="has-block-link"><a href="@routes.BaseImageController.showBaseImage(image.id)" class="block-link">@usages.size</a></td>
        <td class="has-block-link"><a href="@routes.BaseImageController.showBaseImage(image.id)" class="block-link">@fragments.eolStatus(image)</a></td>
      </tr>
    }
    </tbody>
  </table>

}