{*
SPDX-FileCopyrightText: © 2025 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "./base" }}
{{ import "/_libs/forms" }}

{{- block title() -}}Extract{{- end -}}

{{ block mainContent() }}

<form action="" method="get" class="mb-4">
<div class="flex p-1 form-input rounded-full border">
  <input type="text" name="url" size="15"
    class="leading-tight w-full rounded-full px-4 py-2 bg-gray-light focus-visible:bg-gray-light text-gray-dark ring-0 ring-offset-0"
    value="{{ string(.Form.Get(`url`).String()) }}" placeholder="https://" />
  <button type="submit" class="whitespace-nowrap btn btn-primary rounded-full pl-3 py-0 inline-flex gap-1 items-center leading-none">
    <span>Extract Link</span>
  </button>
</div>
{{ if .Form.Get("url").String() != "" && .Form.Get("url").Errors() }}
  <ul class="mt-1 list-disc list-inside text-red-800">
  {{- range .Form.Get("url").Errors() }}
    <li>{{ . }}</li>
  {{ end -}}
  </ul>
{{ end }}
</form>

{{- if .Result != nil -}}
<div class="tabs" data-controller="tabs" data-tabs-hidden-class="js:hidden">
  <div role="tablist"
   class="nojs:hidden flex py-2 gap-2 sticky top-0 z-20 bg-app-bg border-b">
    <button class="p-2 rounded font-semibold hf:bg-gray-200 aria-selected:bg-gray-500 aria-selected:text-app-bg"
     data-action="tabs#toggle" id="tab-article" type="button" role="tab" aria-selected="true"
    >Article</button>
    <button class="p-2 rounded font-semibold hf:bg-gray-200 aria-selected:bg-gray-500 aria-selected:text-app-bg"
     data-action="tabs#toggle" id="tab-logs" type="button" role="tab"
    >Logs</button>
    <button class="p-2 rounded font-semibold hf:bg-gray-200 aria-selected:bg-gray-500 aria-selected:text-app-bg"
     data-action="tabs#toggle" id="tab-props" type="button" role="tab"
    >Properties</button>
  </div>

  <div role="tabpanel" tabindex="0" aria-labelledby="tab-article" class="my-4">
    <h3 class="title text-h3">Info</h3>
    <div class="flex gap-4 mt-4 mb-8">
      <div class="grow">
        <table class="data-table">
          <tr><th>DocumentType</th><td>{{ .Result.DocumentType }}</td></tr>
          <tr><th>Title</th><td class="w-full">{{ .Result.Title }}</td></tr>
          <tr><th>Description</th><td>{{ .Result.Description }}</td></tr>
          <tr><th>Authors</th><td>
          {{- if isset(.Result.Authors) -}}
            <ul>
            {{- range .Result.Authors -}}
              <li>{{ . }}</li>
            {{- end -}}
            </ul>
          {{- end -}}
          </td></tr>
          <tr><th>Lang</th><td>{{ .Result.Lang }}</td></tr>
          <tr><th>TextDirection</th><td>{{ .Result.TextDirection }}</td></tr>
          <tr><th>Date</th><td>{{ isset(.Result.Date) ? .Result.Date : "" }}</td></tr>
          <tr><th>SiteName</th><td>{{ .Result.SiteName }}</td></tr>
          <tr><th>Site</th><td>{{ .Result.Site }}</td></tr>
          <tr><th>Domain</th><td>{{ .Result.Domain }}</td></tr>
        </table>
      </div>
      <div class="max-w-xs">
        {{- if isset(.Result.Images["thumbnail"]) -}}
          <img src="{{ .Result.Images[`thumbnail`].Encoded }}"
           width="{{ .Result.Images[`thumbnail`].Size[0] }}"
           height="{{ .Result.Images[`thumbnail`].Size[1] }}"
           alt="">
        {{- end -}}
      </div>
    </div>

    {{- if .Result.DocumentType == "photo" && isset(.Result.Images["image"]) -}}
      <p>
        <img src="{{ .Result.Images[`image`].Encoded }}"
         width="{{ .Result.Images[`image`].Size[0] }}"
         height="{{ .Result.Images[`image`].Size[1] }}"
         alt="">
      </p>
    {{- end -}}

    <div class="prose"
    lang="{{ .Result.Lang }}"
    dir="{{ default(.Result.TextDirection, `ltr`) }}"
    >
      {{- unsafeWrite(.HTML) -}}
    </div>
  </div>

  <div role="tabpanel" tabindex="0" aria-labelledby="tab-logs" class="js:hidden my-4">
    {{- range .Result.Logs }}
      <code class="block py-1 leading-relaxed text-xs wrap-anywhere even:bg-gray-200/80">{{ . }}</code>
    {{- end -}}
  </div>

  <div role="tabpanel" tabindex="0" aria-labelledby="tab-props" class="js:hidden my-4">
    {{- if len(.Result.Errors) > 0 -}}
      <h3 class="title text-h3">Errors</h3>
      <table class="data-table my-4">
      {{- range .Result.Errors -}}
        <tr>
          <td><code>{{ . }}</code></td>
        </tr>
      {{- end -}}
      </table>
    {{- end -}}

    <h3 class="title text-h3">Meta</h3>
    <table class="data-table my-4">
    {{- range k, v := orderMap(.Result.Meta) -}}
      <tr>
        <th>{{ k }}</th>
        <td class="text-xs font-mono wrap-anywhere">{{ v|json }}</td>
      </tr>
    {{- end -}}
    </table>

    <h3 class="title text-h3">Properties</h3>
    <table class="data-table my-4">
    {{- range k, v := orderMap(.Result.Properties) -}}
      <tr>
        <th class="whitespace-nowrap">{{ k }}</th>
        <td class="text-xs"><pre class="whitespace-pre-wrap">{{ v|json(true) }}</pre></td>
      </tr>
    {{- end -}}
    </table>
  </div>
</div>
{{- end -}}

{{ end }}