@model KeyIndexViewModel

@{
  ViewBag.Title = "Keys";
  Layout = "_Layout";
}

<h2>Keys</h2>

<table class="table">
  <thead>
  <tr>
    <th>
      Key
    </th>
    <th colspan="12" class="align-content-center">Notes</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Major</td>
    @foreach (var note in KeyRoots.Major)
    {
      <td><a class="note color-@note.Text fw-bold" asp-action="Detail" asp-route-tone="major" asp-route-noteStr="@note.Text">@note.Display</a></td>
    }
  </tr>
  <tr>
    <td>Minor</td>
    @foreach (var note in KeyRoots.Minor)
    {
      <td><a class="note color-@note.Text fw-bold" asp-action="Detail" asp-route-tone="minor" asp-route-noteStr="@note.Text">@note.Display</a></td>
    }
  </tr>
  </tbody>
</table>