@(
    title: String,
    recipes: Iterable[Recipe],
    usages: Map[Recipe, prism.RecipeUsage]
)
<h3>@title</h3>
@if(recipes.isEmpty) {
    <p>No @title.toLowerCase()</p>
} else {
    <table class="table table-striped">
        <thead>
            <th>Name</th>
            <th>Description</th>
            <th>Usage</th>
            <th>Status</th>
        </thead>
        <tbody>
        @for(recipe <- recipes.toList.sortBy(_.id.value.toLowerCase)) {
            <tr class="@BaseImage.eolStatusClass(recipe.baseImage)">
                <td class="has-block-link"><a href="@routes.RecipeController.showRecipe(recipe.id)" class="block-link">@recipe.id</a></td>
                <td class="has-block-link"><a href="@routes.RecipeController.showRecipe(recipe.id)" class="block-link">@recipe.description</a></td>
                @defining(usages.getOrElse(recipe, prism.RecipeUsage.noUsage())) { usage =>
                    @fragments.usagesColumn(recipe, usage)
                }
                <td>@fragments.eolStatus(recipe.baseImage) </td>
            </tr>
        }
        </tbody>
    </table>
}