{{ template "base" . }}
{{ define "title" }}Admin - Logs{{ end }}
{{ define "header" }}<a class="whitespace-pre" href="../admin">Admin - Logs</a>{{ end }}
{{ define "content" }}
<div class="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white">
  <form class="flex gap-4 flex-col lg:flex-row" action="./logs" method="GET">
    <div class="flex flex-col w-full grow">
      <div class="flex relative">
        <span class="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm">
          {{ template "svg/search2" (dict "Size" 15) }}
        </span>
        <input type="text"
               id="filter"
               name="filter"
               value="{{ .Filter }}"
               class="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
               placeholder="JQ Filter" />
      </div>
    </div>
    <button type="submit"
            class="px-10 py-2 text-base font-semibold text-center text-white transition duration-200 ease-in bg-black shadow-md hover:text-black hover:bg-white focus:outline-none focus:ring-2">
      <span class="w-full">Filter</span>
    </button>
  </form>
</div>
<!-- Required for iOS "Hover" Events (onclick) -->
<div onclick
     class="flex flex-col-reverse text-black dark:text-white w-full overflow-scroll"
     style="font-family: monospace">
  {{ range $log := .Data }}
  <span class="whitespace-nowrap hover:whitespace-pre">{{ $log }}</span>
  {{ end }}
</div>
{{ end }}