@model IEnumerable<PersonInfo>
@{
  ViewData["Title"] = "People";
}
<h2>People list</h2>

<table class="table table-sm table-hover" id="table-people">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Original name</th>
      <th>Birth date</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    @foreach (var person in Model)
    {
      <tr>
        <td class="text-center">@person.FirstNameTranscription</td>
        <td class="text-left">@person.LastNameTranscription</td>
        <td class="text-center">@person.OriginalName</td>
        <td class="text-center">@person.BirthDate.ToString("yyy-MM-dd")</td>
        <td class="text-center">@person.CountryName</td>
      </tr>
    }
  </tbody>
</table>

@section styles{
  <link rel="stylesheet" href="https://cdn.datatables.net/2.3.7/css/dataTables.bootstrap5.min.css" />
}

@section scripts{
  <script src="https://cdn.datatables.net/2.3.7/js/dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/2.3.7/js/dataTables.bootstrap5.min.js"></script>
  <script>
    $(function () {
      new DataTable('#table-people');
    });    
  </script>
}