@page
@using Northwind.Web.Pages
@using Packt.Shared
@model CustomersModel
@{
  string title = "Customers by Country";
  ViewData["Title"] = $"Northwind B2B - {title}";
}
<div class="row">
  <h1 class="display-2">@title</h1>
  <div>
      <h2>Exercise 14.2 – Practice building a data-driven web page</h2>
  </div>
  <div class="accordion" id="accordionCustomers">
    @if (Model.CustomersByCountry is not null)
    {
      @foreach (IGrouping<string?, Customer> cbc in Model.CustomersByCountry)
      {
        <div class="accordion-item">
          <h2 class="accordion-header" id="header@(cbc.Key)">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse@(cbc.Key)" aria-expanded="true" aria-controls="collapse@(cbc.Key)">
              @cbc.Key has @cbc.Count() customers
            </button>
          </h2>
          <div id="collapse@(cbc.Key)" class="accordion-collapse collapse" aria-labelledby="heading@(cbc.Key)" data-bs-parent="#accordionCustomers">
            <div class="accordion-body">
              <ul>
                @foreach (Customer c in cbc)
                {
                  <li><a href="customerorders?id=@c.CustomerId">
                    @c.CompanyName</a></li>
                }
              </ul>
            </div>
          </div>
        </div>
      }
    }
  </div>
</div>