@model FretboardIndexViewModel

@{
  ViewData["Title"] = "FretBadger";
}

<div class="row mb-2">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">Hello!</h2>
        <p class="fs-5">
          This is FretBadger*, a site I made to help me learn my bass fretboard. It can render fretboards
          showing notes, scales, arpeggios and chords. You can use the Builder to create pages with multiple
          <a asp-controller="Builder" asp-action="Scales">scales</a> and
          <a asp-controller="Builder" asp-action="Arpeggios">arpeggios</a>, bookmark those pages to save them,
          and print them out too.
        </p>
        <p>
          It's a work in progress, so if something doesn't work or there's a scale or arpeggio missing, please
          use the <a asp-controller="Home" asp-action="Feedback">Feedback</a> page to let me know.
        </p>
        <p>
          The project is open-source and hosted on <a href="https://github.com/markrendle/fretweb">GitHub</a>. If you
          happen to be a web design guru you might help me make it look nicer - I'm a coder with minimal design
          chops.
        </p>
        <p class="small">* It puts badges on frets. Also I like badgers.</p>
      </div>
    </div>
  </div>
</div>
<div class="row mb-2">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h2>Fretboards</h2>
      </div>
      <div class="card-body">
        <div class="container">
          @foreach (var group in Model.Groups)
          {
            <div class="row mb-1">
              <div class="col-12">
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">@group.Title</h3>
                  </div>
                  <div class="card-body">
                    <div class="container">
                      <div class="row">
                        @foreach (var subGroup in group.SubGroups)
                        {
                          <div class="col-4">
                            <div class="card">
                              <div class="card-body">
                                <h4 class="card-subtitle">@subGroup.Title</h4>
                                <ul class="list-group list-group-flush">
                                  @foreach (var link in subGroup.Links)
                                  {
                                    <li class="list-group-item">
                                      <a asp-action="Get" asp-controller="Fretboards" asp-route-tuning="@link.Tuning">@link.Title</a>
                                    </li>
                                  }
                                </ul>
                              </div>
                            </div>
                          </div>
                        }
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          }
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row mb-2">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">Scales</h2>
        <ul class="nav">
          @foreach (var scaleSet in Scales.EnumerateScales())
          {
            <li class="nav-item">
              <a href="@Url.Scale(scaleSet.Id)" class="nav-link">@scaleSet.Id</a>
            </li>
          }
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="row mb-2">
  <div class="col-12">
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">Modes</h2>
        <ul class="nav">
          @foreach (var scaleSet in Scales.EnumerateModes())
          {
            <li class="nav-item">
              <a href="@Url.Scale(scaleSet.Id)" class="nav-link">@scaleSet.Id</a>
            </li>
          }
        </ul>
      </div>
    </div>
  </div>
</div>