{*
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("Export") }}{{ end }}

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

<h2 class="title text-h3">{{ gettext("Export your Readeck Profile") }}</h2>

<form class="mb-8" action="{{ urlFor() }}" method="post">
  <div class="btn-block">
    <p>{{ gettext(`
    This lets you download a zip file containing all your profile's data, including
    bookmarks, collections, etc.
    `) }}</p>
    <p>
      <button class="btn btn-primary" type="submit">{{ gettext("Export Data") }}</button>
    </p>
  </div>
</form>


{{- formats := slice(
  map(
      "name", "browser",
      "iconSrc", "img/logos.svg",
      "iconName", "o-bookmarks",
      "title", gettext("Browser Bookmarks"),
      "desc", gettext("Bookmark List in Browser Bookmarks Format"),
      "url", urlFor("/api/bookmarks/export.html"),
    ),
    map(
      "name", "csv",
      "iconSrc", "img/logos.svg",
      "iconName", "o-csv",
      "title", gettext("CSV File"),
      "desc", gettext("Bookmark List as Comma Separated Values"),
      "url", urlFor("/api/bookmarks/export.csv"),
    ),
)}}

<h2 class="title text-h3">{{ gettext("Export Bookmarks") }}</h2>

<p class="mb-4">{{ gettext("You can export your bookmark list in the following formats:") }}</p>

{{- if hasPermission("api:bookmarks", "export") -}}
{{- yield list() content -}}
  {{- range formats -}}
    {{- yield list_item(class="") content -}}
    <a class="p-4 flex gap-2 items-center hf:bg-gray-100"
      href="{{ .url }}"
    >
      {{ yield icon(src=.iconSrc, name=.iconName, class="text-gray-600 group-hf:text-gray-800", svgClass="h-10 w-10") }}
      <span class="grow flex flex-col gap-1">
        <strong class="link">{{ .title }}</strong>
        <span class="text-app-fg">{{ .desc }}</span>
      </span>
    </a>
    {{- end -}}
  {{- end -}}
{{- end -}}

{{- end -}}

<div class="grid grid-cols-2 gap-6 max-md:grid-cols-1">
</div>

{{ end }}