{{ template "base" . }}
{{ define "title" }}Progress{{ end }}
{{ define "header" }}<a href="./progress">Progress</a>{{ end }}
{{ define "content" }}
<div class="overflow-x-auto">
  <div class="inline-block min-w-full overflow-hidden rounded shadow">
    <table class="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm">
      <thead class="text-gray-800 dark:text-gray-400">
        <tr>
          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Document</th>
          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Device</th>
          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Percent</th>
          <th class="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Time</th>
        </tr>
      </thead>
      <tbody class="text-black dark:text-white">
        {{ if not .Data }}
        <tr>
          <td class="text-center p-3" colspan="4">No Results</td>
        </tr>
        {{ end }}
        {{ range $progress := .Data }}
        <tr>
          <td class="p-3 border-b border-gray-200">
            <a href="./documents/{{ $progress.DocumentID }}">{{ $progress.Author }} - {{ $progress.Title }}
            </p>
          </a>
        </td>
        <td class="p-3 border-b border-gray-200">
          <p>{{ $progress.DeviceName }}</p>
        </td>
        <td class="p-3 border-b border-gray-200">
          <p>{{ $progress.Percentage }}%</p>
        </td>
        <td class="p-3 border-b border-gray-200">
          <p>{{ $progress.CreatedAt }}</p>
        </td>
      </tr>
      {{ end }}
    </tbody>
  </table>
  <!--
  {{ template "component/table" (dict
  "Columns" (slice "Author" "Title" "Device Name" "Percentage" "Created At")
  "Keys" (slice "Author" "Title" "DeviceName" "Percentage" "CreatedAt")
  "Rows" .Data
  )}}
  -->
</div>
</div>
{{ end }}