{{ 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>
      <div class="lg:w-60">
        {{ template "component/button" (dict
          "Title" "Filter"
          "Variant" "Secondary"
          )
        }}
      </div>
    </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 }}