@use super::base_html;
@use super::components::return_to_main_html;
@use cm_lib::models::Shift;

@(shifts: Vec<Shift>)

@:base_html({

<div class="fixed right-0 top-0 pr-4 pt-4">
  @:return_to_main_html()
</div>

<h1 class="text-4xl underline text-center pt-4 pb-6">
    Shift Reports
</h1>

<div class="flex">
  <table class="m-auto table-auto w-4/5">
    <thead class="text-xs text-gray-700 bg-gray-50">
      <tr>
        <th scope="col" class="px-6 py-3">Shift ID</th>
        <th scope="col" class="px-6 py-3">Shift Start</th>
        <th scope="col" class="px-6 py-3">Shift End</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      @for shift in shifts {

      <tr class="bg-white even:bg-neutral-50 border-b">
        <td scope="row" class="text-center px-6 py-3">@shift.id</td>
        <td class="text-center px-6 py-3">@shift.start.format("%A, %b %m - %H:%M")</td>
        <td class="text-center px-6 py-3">
          @if let Some(end) = shift.end {
            @end.format("%A, %b %m - %H:%M")
          } else {
            Currently Open
          }
        </td>
        <td hx-boost="true" class="px-6 py-4">
          <a href="/shifts/@shift.id/report" class="text-center font-medium text-blue-600 hover:underline">
              View Shift
          </a>
        </td>
      </tr>

      }
    </tbody>
  </table>
</div>

})