{% extends "document.njk" %}

{% from "heading/macro.njk" import heading with context %}
{% from "input/macro.njk" import input with context %}
{% from "textarea/macro.njk" import textarea with context %}
{% from "checkboxes/macro.njk" import checkboxes with context %}
{% from "radios/macro.njk" import radios with context %}
{% from "button/macro.njk" import button with context %}
{% from "notification-banner/macro.njk" import notificationBanner with context %}
{% from "prose/macro.njk" import prose with context %}

{% block content %}
  {% if result %}
    {{ notificationBanner({ type: result.type, text: result.text }) }}
  {% endif %}

  {{ prose({ text: __("activitypub.profile.intro") }) }}

  <form method="post" novalidate>
    {{ input({
      name: "name",
      label: __("activitypub.profile.nameLabel"),
      hint: __("activitypub.profile.nameHint"),
      value: profile.name
    }) }}

    {{ textarea({
      name: "summary",
      label: __("activitypub.profile.summaryLabel"),
      hint: __("activitypub.profile.summaryHint"),
      value: profile.summary,
      rows: 4
    }) }}

    {{ input({
      name: "url",
      label: __("activitypub.profile.urlLabel"),
      hint: __("activitypub.profile.urlHint"),
      value: profile.url,
      type: "url"
    }) }}

    {{ input({
      name: "icon",
      label: __("activitypub.profile.iconLabel"),
      hint: __("activitypub.profile.iconHint"),
      value: profile.icon,
      type: "url"
    }) }}

    {{ input({
      name: "image",
      label: __("activitypub.profile.imageLabel"),
      hint: __("activitypub.profile.imageHint"),
      value: profile.image,
      type: "url"
    }) }}

    {{ radios({
      name: "actorType",
      fieldset: {
        legend: __("activitypub.profile.actorTypeLabel")
      },
      hint: __("activitypub.profile.actorTypeHint"),
      items: [{
        label: "Person",
        value: "Person"
      }, {
        label: "Service",
        value: "Service"
      }, {
        label: "Organization",
        value: "Organization"
      }],
      values: [profile.actorType or "Person"]
    }) }}

    <fieldset class="fieldset" style="margin-block-end: var(--space-l);" x-data="{ links: [{% if profile.attachments and profile.attachments.length > 0 %}{% for att in profile.attachments %}{ name: {{ att.name | dump | safe }}, value: {{ att.value | dump | safe }} }{% if not loop.last %},{% endif %}{% endfor %}{% endif %}] }">
      <legend class="label">{{ __("activitypub.profile.linksLabel") }}</legend>
      <p class="hint">{{ __("activitypub.profile.linksHint") }}</p>

      <template x-for="(link, index) in links" :key="index">
        <div class="profile-link-row" style="display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--space-s); align-items: end; margin-block-end: var(--space-s);">
          <div>
            <label class="label">{{ __("activitypub.profile.linkNameLabel") }}</label>
            <input class="input" type="text" :name="'link_name[]'" x-model="link.name" placeholder="Website">
          </div>
          <div>
            <label class="label">{{ __("activitypub.profile.linkValueLabel") }}</label>
            <input class="input" type="url" :name="'link_value[]'" x-model="link.value" placeholder="https://example.com">
          </div>
          <button type="button" class="button button--small profile-link-remove" style="margin-block-end: 4px;" @click="links.splice(index, 1)">{{ __("activitypub.profile.removeLink") }}</button>
        </div>
      </template>

      <button type="button" class="button button--small" @click="links.push({ name: '', value: '' })">{{ __("activitypub.profile.addLink") }}</button>
    </fieldset>

    {{ checkboxes({
      name: "manuallyApprovesFollowers",
      items: [
        {
          label: __("activitypub.profile.manualApprovalLabel"),
          value: "true",
          hint: __("activitypub.profile.manualApprovalHint")
        }
      ],
      values: ["true"] if profile.manuallyApprovesFollowers else []
    }) }}

    {{ checkboxes({
      name: "authorizedFetch",
      items: [
        {
          label: __("activitypub.profile.authorizedFetchLabel"),
          value: "true",
          hint: __("activitypub.profile.authorizedFetchHint")
        }
      ],
      values: ["true"] if profile.authorizedFetch else []
    }) }}

    {{ button({ text: __("activitypub.profile.save") }) }}
  </form>

{% endblock %}