@model ArpeggiosBuilderViewModel

@{
  ViewBag.Title = "Build Arpeggios sheet";
  Layout = "_Layout";
}

<div class="row">
  <div class="col-12">
    <h1>@ViewBag.Title</h1>
  </div>
</div>

<form asp-action="BuildArpeggios">
  <div class="row">
    <div class="col-1 fw-bold">
      Tuning
    </div>
    <div class="col-3">
        <input asp-for="Tuning" class="form-control">
    </div>
  </div>
  <div class="row">
    <div class="col-1 fw-bold">
      Root
    </div>
    <div class="col-3 fw-bold">
      Arpeggio
    </div>
  </div>

  @for (int i = 0; i < Model.Arpeggios.Length; i++)
  {
    int index = i;
    <div class="row mb-1">
      <div class="col-1">
        <select asp-for="Arpeggios[index].Root" class="form-select">
          <option></option>
          @foreach (var note in Notes.All())
          {
            <option value="@note.Id">@note.Display</option>
          }
        </select>
      </div>
      <div class="col-3">
        <select asp-for="Arpeggios[index].Arpeggio" class="form-select">
          <option></option>
          @foreach (var arpeggio in Arpeggios.All())
          {
            <option value="@arpeggio.Id">@arpeggio.Name</option>
          }
        </select>
      </div>
    </div>
  }
  <div class="row">
    <div class="col-4">
      <button type="submit" class="btn btn-primary w-100">Build</button>
    </div>
  </div>
</form>
