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

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

{{ block title() }}{{ gettext("Applications") }}{{ end }}

{{ block mainContent() }}
<h1 class="title text-h2">{{ yield title() }}</h1>

<div class="prose mb-4">
<p>{{ gettext(`
  Applications are registered clients that have permissions to access your Readeck account.
  If there are applications you do not recognize here, or an application is misbehaving,
  you can revoke its access.
`) }}</p>
</div>

{{ if len(.Tokens) == 0 }}
  <p>{{ gettext(`You have no registered application at the moment.`) }}</p>
{{ else }}
{{ include "/_libs/pagination" .Pagination }}

<turbo-frame id="token-list"
 data-controller="turbo-refresh"
 data-turbo-refresh-interval-value="10"
 data-turbo-refresh-on-value="[data-token-deleted='true']">
  {{ yield list() content }}
  {{ range .Tokens }}
    {{ yield list_item(class="flex gap-2 items-start hfw:bg-gray-100 max-md:block") content }}
      <div class="pl-4 pt-4">
        {{- if .ClientLogo != "" -}}
          <img class="max-w-8 max-h-8" src="{{ .ClientLogo }}" alt="">
        {{- else -}}
          {{ yield icon(name="o-applications", class="text-gray-700", svgClass="w-8 h-8") }}
        {{- end -}}
      </div>
      <div class="py-4 max-md:pl-4 grow">
        <h2 class="title text-lg mb-0">{{ .ClientName }}</h2>
        <p><a class="link" href="{{ .ClientURI }}" target="_blank">{{ .ClientURI }}</a></p>

        <p class="mt-1 text-sm">{{ gettext("Authorized on: %s", date(.Created, pgettext("datetime", "%e %B %Y"))) }}
        {{- if .LastUsed -}}
          <br><strong class="font-semibold">{{ gettext("Last used on: %s", date(.LastUsed, "%c")) }}</strong>
        {{- end -}}</p>

        <h3 class="my-2 text-lg">{{ gettext("Permissions") }}</h3>
        <ul>{{- range .RoleNames -}}
          <li class="mb-1">{{ yield icon(name="o-check-on", class="svgicon text-green-700") }} {{ . }}</li>
        {{- end -}}</ul>
      </div>
      {{- if .IsDeleted -}}
        <div class="flex items-center max-w-xs m-4 max-md:mt-0"
          data-token-deleted="true">
          <span class="text-red-700 text-xs font-semibold">
            {{ gettext("This client will be revoked in a few seconds.") }}
          </span>
          <form action="{{ urlFor(`.`, `../tokens`, .ID, `delete`) }}" method="post">
            <input type="hidden" name="cancel" value="1" />
            <input type="hidden" name="_to" value="{{ currentPath }}">
            <button type="submit"
            class="btn btn-primary whitespace-nowrap text-sm py-1 ml-2">{{ yield icon(name="o-undo") }} {{ gettext("Cancel") }}</button>
          </form>
        </div>
      {{- else -}}
        <form class="m-4" method="POST" action="{{ urlFor(`.`, `../tokens`, .ID, `delete`) }}">
          <input type="hidden" name="_to" value="{{ currentPath }}">
          <button class="btn btn-outlined btn-danger text-sm whitespace-nowrap">
          {{- yield icon(name="o-trash") }}
          {{ gettext("Revoke application") }}</button>
        </form>
      {{- end -}}
    {{ end }}
  {{ end }}
  {{ end }}
</turbo-frame>

{{ include "/_libs/pagination" .Pagination }}
{{ end }}

{{- yield message(type="info") content -}}
<details class="text-sm">
  <summary>{{ gettext(`Developer information`) }}</summary>
  <p class="prose">{{ gettext(`
    If you plan to build an application, please refer to the
    <a href="%s">API Documentation</a>.
  `, html(urlFor("/docs/api") + "#overview--authentication-with-oauth")) | raw }}</p>
</details>
{{- end -}}

{{ end }}