@using Microsoft.AspNetCore.Mvc.ViewFeatures
@model PagedList<PersonInfo>
@{
  ViewData["Title"] = "People";
}
<h2>People list</h2>

@{
  (string PropertyName, string Title, bool Sortable)[] columns =
  [
    (nameof(PersonInfo.FirstNameTranscription), "First Name", true),
    (nameof(PersonInfo.LastNameTranscription), "Last Name", true),
    (nameof(PersonInfo.OriginalName), "Original Name", false),
    (nameof(PersonInfo.BirthDate), "Birth Date", true),
    (nameof(PersonInfo.CountryName), "Country Name", true)
  ];

  var personRowViewData = new ViewDataDictionary(ViewData)
  {
    { Constants.ViewDataKeys.PagingInfo, Model.PagingInfo }
  };
}


<section class="card border-0 shadow-sm" id="people-list">
  <div class="card-body">  
    <form asp-action="Index" method="get"
          class="d-flex justify-content-between align-items-start gap-3 flex-wrap flex-lg-nowrap mb-4">
      <input type="hidden" name="page" value="1" />
      <input type="hidden" name="pageSize" value="@Model.PagingInfo.ItemsPerPage" />
      <input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />

      <div class="d-flex align-items-center gap-3 pt-2">
        <h2 class="h5 mb-0">People list</h2>
        <span class="badge text-bg-light">@(Model.PagingInfo.IsFiltered ? $"{Model.PagingInfo.FilteredItemsCount} / {Model.PagingInfo.TotalItemsCount}" : Model.PagingInfo.TotalItemsCount.ToString())</span>
        <a asp-action="Create"
           asp-route-page="@Model.PagingInfo.CurrentPage"
           asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
           asp-route-sorts="@Model.PagingInfo.Sorts"
           asp-route-searchText="@Model.PagingInfo.SearchText"
           class="btn btn-primary">
          Add
        </a>
      </div>

      <div class="d-flex align-items-center gap-2 flex-nowrap ms-auto">
        <input id="searchText"
               name="searchText"
               value="@Model.PagingInfo.SearchText"
               class="form-control"
               placeholder="Search by country or full name"
               aria-label="Filter by country or full name" />

        <button type="submit" class="btn btn-outline-primary">Filter</button>
        @if (Model.PagingInfo.IsFiltered)
        {
          <a asp-action="Index"
             asp-route-page="1"
             asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
             asp-route-sorts="@Model.PagingInfo.Sorts"
             class="btn btn-outline-secondary">
            Clear
          </a>
        }
      </div>
    </form>

    <div class="table-responsive">
      <table class="table table-sm table-hover" id="table-people">
        <thead>
          <tr>
            @foreach (var column in columns)
            {
              <th>
                @if (column.Sortable)
                {
                  <a asp-action="Index"
                     asp-route-page="@Model.PagingInfo.CurrentPage"
                     asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
                     asp-route-searchText="@Model.PagingInfo.SearchText"
                     asp-route-sorts="@Model.PagingInfo.ToggleSort(column.PropertyName)"
                     class="link-dark link-underline-opacity-0">
                    @column.Title@(Model.PagingInfo.IsSortedBy(column.PropertyName) ? (Model.PagingInfo.IsDescending() ? " ?" : " ?") : "")
                  </a>
                }
                else
                {
                  @column.Title
                }
              </th>
            }
            <th class="text-end"></th>
          </tr>
        </thead>
        <tbody>
          @if (Model.Data.Count == 0)
          {
            <tr>
              <td colspan="6" class="text-body-secondary">No data to display.</td>
            </tr>
          }
          else
          {
            @foreach (var person in Model.Data)
            {
              <partial name="_PersonRow" model="person" view-data="personRowViewData" />
            }
          }
        </tbody>
      </table>
    </div>

    <div class="d-flex justify-content-between align-items-center mt-4 gap-3 flex-wrap">
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <small class="text-body-secondary">Page @Model.PagingInfo.CurrentPage of @Model.PagingInfo.TotalPages</small>
        <form asp-action="Index" method="get" class="d-inline-flex align-items-center gap-2">
          <input type="hidden" name="page" value="1" />
          <input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
          <input type="hidden" name="searchText" value="@Model.PagingInfo.SearchText" />
          <select name="pageSize" class="form-select form-select-sm" style="width: auto;" aria-label="Items per page" onchange="this.form.requestSubmit()">
            @{
              int[] pageSizeOptions = [10, 20, 50, 100];
            }
            @foreach (var option in pageSizeOptions)
            {
              <option value="@option" selected="@(Model.PagingInfo.ItemsPerPage == option)">@option</option>
            }
          </select>
        </form>
      </div>
      <pager page-info="@Model.PagingInfo"
             page-action="Index"
             page-title="Enter a page number and press Enter">
      </pager>
    </div>
  </div>
</section>