@model FretboardPageViewModel

@{
  ViewBag.Title = "Arpeggios";
  Layout = Model.Print ? "_LayoutPrint" : "_Layout";
}

@if (Model is { PrintLink: { Length: > 0 }, Print: false })
{
  <div class="row mb-2">
    <div class="col-11">
      <span class="text-muted">Tip: click the root notes to see fingering suggestions</span>
    </div>
    <div class="col-1">
      <a type="button" class="btn btn-secondary" href="@Model.PrintLink" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-printer" viewBox="0 0 16 16">
          <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"></path>
          <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"></path>
        </svg>
        Print
      </a>
    </div>
  </div>
}

@for (var i = 0; i < Model.Fretboards.Count; i++)
{
  var fretboard = Model.Fretboards[i];
  if (i > 0)
  {
    var previous = Model.Fretboards[i - 1];
    <div class="row">
      <div class="col-12">
        <vc:shared-notes previous="previous" next="fretboard"></vc:shared-notes>
      </div>
    </div>
  }
  <div class="row">
    <div class="col-12">
      <vc:fretboard model="@fretboard"></vc:fretboard>
    </div>
  </div>
}

@if (!Model.Print)
{
<div class="row pt-4">
  <div class="col-12">
    <vc:navigation-section model="Model"></vc:navigation-section>
  </div>
</div>
}

@section Scripts {
  <script type="text/javascript" src="~/js/fretboard.js" asp-append-version="true"></script>
}
