{#
  "Setup guide" popup of the Facebook & Instagram page.
  vars: redirect_uri, app_domain, webhook_url, verify_token, https, keys_saved, connected, got_lead
#}
{% macro copy(label, value) %}
<span class="mt-2 block">
  {% if label %}<span class="block text-xs font-medium text-gray-500 dark:text-gray-400">{{ label }}</span>{% endif %}
  <span class="mt-1 flex items-center gap-x-2">
    <code class="tw-input block w-full min-w-0 truncate px-3 py-1.5 text-sm">{{ value }}</code>
    <button type="button" class="tw-icon-btn {{ colors.pick(colors.ICON_BUTTON, 'gray') }}" title="{{ __('Copy') }}"
            onclick="navigator.clipboard.writeText({{ value | tojson | forceescape }}); window.twToast && twToast({title: twT('Copied'), status: 'success'})">{{ icon('copy', 'h-4 w-4') }}</button>
  </span>
</span>
{% endmacro %}

{% macro part(n, title, done=false, link=None, link_label='Open') %}
<section class="rounded-xl ring-1 ring-gray-950/5 dark:ring-white/10">
  <header class="flex items-center gap-x-3 px-4 py-3">
    <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-sm font-semibold {{ colors.pick(colors.SOFT_ICON, 'success' if done else 'primary') }}">
      {% if done %}{{ icon('check', 'h-4 w-4') }}{% else %}{{ n }}{% endif %}
    </span>
    <h3 class="flex-1 text-sm font-semibold text-gray-950 dark:text-white">{{ title }}</h3>
    {% if link %}
    <a href="{{ link }}" target="_blank" rel="noopener" class="tw-btn px-2.5 py-1.5 text-xs bg-white ring-1 ring-gray-950/10 dark:bg-transparent dark:ring-white/20 {{ colors.pick(colors.LINK, 'gray') }}">{{ icon('external-link', 'h-3.5 w-3.5') }}<span>{{ link_label }}</span></a>
    {% endif %}
  </header>
  <ol class="grid grid-cols-1 list-decimal gap-2 px-4 pb-4 ps-9 text-sm text-gray-600 dark:text-gray-300">{{ caller() }}</ol>
</section>
{% endmacro %}

{% macro problem(title) %}
<details class="border-t border-gray-100 px-4 py-3 dark:border-white/10">
  <summary class="cursor-pointer text-sm font-medium text-gray-950 dark:text-white">{{ title }}</summary>
  <div class="mt-2 text-sm text-gray-600 dark:text-gray-300">{{ caller() }}</div>
</details>
{% endmacro %}

{% set b = 'font-medium text-gray-950 dark:text-white' %}
<div class="grid grid-cols-1 gap-4">
  <div class="rounded-xl bg-gray-50 p-4 text-sm text-gray-600 dark:bg-white/5 dark:text-gray-300">
    <p class="font-semibold text-gray-950 dark:text-white">Before you start</p>
    <ul class="mt-2 grid list-disc gap-1 ps-5">
      <li>A Facebook Page with a lead form (Instant Form). Instagram lead ads work too when the Instagram account is linked to that Page.</li>
      <li>You manage the Page (full control, or task access with Advertise).</li>
      <li>This panel is online on a public <span class="{{ b }}">https</span> address. Meta cannot reach localhost.</li>
    </ul>
    {% if not https %}
    <p class="mt-3 flex items-start gap-x-2 text-danger-600 dark:text-danger-400">{{ icon('circle-alert', 'h-5 w-5 shrink-0') }}<span>This panel is open on http, not https. Meta will refuse it. Open the panel on its https address, or set <code>app_url</code> in your code.</span></p>
    {% endif %}
    <p class="mt-3">It takes about 15 minutes. Meta changes its screens now and then, so if a name differs a little, pick the closest one.</p>
  </div>

  {% call part(1, 'Create a Meta app', keys_saved, 'https://developers.facebook.com/apps/creation/', 'Meta for Developers') %}
    <li>Sign in at developers.facebook.com. The first time, press <span class="{{ b }}">Get started</span> and confirm your phone and email.</li>
    <li>Press <span class="{{ b }}">Create app</span>. Type a name (for example "My Business Leads") and your email, then <span class="{{ b }}">Next</span>.</li>
    <li>Use case: pick <span class="{{ b }}">Capture &amp; manage ad leads with Marketing API</span>, then <span class="{{ b }}">Next</span>.</li>
    <li>Business: pick your business portfolio (or connect one later), then finish with <span class="{{ b }}">Create app</span>.</li>
  {% endcall %}

  {% call part(2, 'Add two permissions', connected) %}
    <li>In your app, open <span class="{{ b }}">Use cases</span>. Next to "Capture &amp; manage ad leads with Marketing API" press <span class="{{ b }}">Customize</span>.</li>
    <li>Find <span class="{{ b }}">pages_manage_metadata</span> and press <span class="{{ b }}">Add</span>. It lets the panel turn on new-lead alerts for your Pages.</li>
    <li>Find <span class="{{ b }}">public_profile</span> and press <span class="{{ b }}">Increase access</span> (Meta asks for this before going live).</li>
  {% endcall %}

  {% call part(3, 'Copy the app keys', keys_saved) %}
    <li>Left menu: <span class="{{ b }}">App settings</span>, then <span class="{{ b }}">Basic</span>.</li>
    <li>Copy the <span class="{{ b }}">App ID</span>. Next to <span class="{{ b }}">App secret</span> press <span class="{{ b }}">Show</span> (Facebook asks your password) and copy it.</li>
    <li>Paste both in <span class="{{ b }}">Meta app keys</span> at the bottom of this page and press <span class="{{ b }}">Save keys</span>. The page reloads with Connect Facebook ready. Keep the secret private.</li>
    <li>On the same Basic page, fill these and press <span class="{{ b }}">Save changes</span>. Meta needs them to publish the app:
      {{ copy('App domains', app_domain) }}
      <span class="mt-2 block"><span class="{{ b }}">Privacy Policy URL</span>: a page on your website. <span class="{{ b }}">User data deletion</span>: a page that says how people can ask you to delete their data (your privacy page can say this). Also pick a <span class="{{ b }}">Category</span> and add an <span class="{{ b }}">App icon</span> (512 × 512).</span>
    </li>
  {% endcall %}

  {% call part(4, 'Allow the login address', connected) %}
    <li>Left menu: <span class="{{ b }}">Facebook Login for Business</span>, then <span class="{{ b }}">Settings</span>.</li>
    <li>Paste this in <span class="{{ b }}">Valid OAuth Redirect URIs</span>. It must match exactly:
      {{ copy(None, redirect_uri) }}
    </li>
    <li>Keep <span class="{{ b }}">Client OAuth login</span>, <span class="{{ b }}">Web OAuth login</span> and <span class="{{ b }}">Enforce HTTPS</span> on, then press <span class="{{ b }}">Save changes</span>.</li>
  {% endcall %}

  {% call part(5, 'Publish the app', got_lead) %}
    <li>Left menu: <span class="{{ b }}">Publish</span>. Check the list, then press <span class="{{ b }}">Go live</span>.</li>
    <li>Meta sends no leads to an app that is not live, not even test leads.</li>
  {% endcall %}

  {% call part(6, 'Connect Facebook', connected) %}
    <li>Close this guide and press <span class="{{ b }}">Connect Facebook</span> at the top of the page.</li>
    <li>Continue as yourself. Choose every Page whose leads you want (or all current and future Pages), keep every permission on, and save.</li>
    <li>You come back here. Your Pages show <span class="{{ b }}">Receiving leads</span>.</li>
  {% endcall %}

  {% call part(7, 'Send a test lead', got_lead, 'https://developers.facebook.com/tools/lead-ads-testing', 'Testing tool') %}
    <li>Open Meta's <span class="{{ b }}">Lead Ads Testing Tool</span>. Pick your Page and a form, then press <span class="{{ b }}">Create lead</span>.</li>
    <li>In a few seconds the lead shows in <span class="{{ b }}">Leads</span>, and step 3 of Setup turns green. In the tool, <span class="{{ b }}">Track status</span> shows what Meta did.</li>
    <li>A form can hold one test lead. Press <span class="{{ b }}">Delete lead</span> in the tool before making another.</li>
  {% endcall %}

  <section class="rounded-xl ring-1 ring-gray-950/5 dark:ring-white/10">
    <header class="flex items-center gap-x-3 px-4 py-3">
      <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full {{ colors.pick(colors.SOFT_ICON, 'warning') }}">{{ icon('life-buoy', 'h-4 w-4') }}</span>
      <h3 class="flex-1 text-sm font-semibold text-gray-950 dark:text-white">Common problems</h3>
    </header>
    {% call problem("Facebook says \"Can't load URL\" or shows a redirect_uri error") %}
      The login address is missing or different. Paste it again in step 4, exactly as shown, and add the domain in step 3.
    {% endcall %}
    {% call problem('Facebook says "Invalid Scopes" or "This app needs at least one supported permission"') %}
      A permission is not added to the app. Do step 2 again, then press Connect Facebook.
    {% endcall %}
    {% call problem('No leads come in, not even test leads') %}
      The app is not live yet. Do step 5, then send a test lead again.
    {% endcall %}
    {% call problem('A Page is missing or shows "Not receiving"') %}
      Press Reconnect Facebook and tick every Page. You need full control of the Page, or task access with Advertise.
    {% endcall %}
    {% call problem('Nothing arrives at all') %}
      Someone may have limited <span class="{{ b }}">Leads access</span>. In Meta Business Suite open Settings, Integrations, Leads access, pick your Page, then on the CRMs tab press Assign CRMs and tick your app. On the People tab, make sure you are listed.
      Then press <span class="{{ b }}">Sync forms and leads</span> to fetch the leads you missed.
      If none of this helps, Meta may want App Review: in your app open App Review, then Permissions and features, and ask for Advanced access to <span class="{{ b }}">leads_retrieval</span>.
    {% endcall %}
    {% call problem('This page shows a webhook error') %}
      Meta could not reach this site. It must be public https with a real certificate (Let's Encrypt is fine, self-signed is not). You can also set it by hand: in your app open Use cases, Customize, then Webhooks (older apps: Webhooks in the left menu). Pick Page, paste the two values below, press Verify and save, then subscribe to <span class="{{ b }}">leadgen</span>.
      {{ copy('Callback URL', webhook_url) }}
      {{ copy('Verify token', verify_token) }}
    {% endcall %}
    {% call problem('Instagram leads do not show') %}
      Instagram lead ads belong to the Facebook Page linked to the Instagram account. Connect that Page and they come in with the rest, marked "on Instagram".
    {% endcall %}
  </section>
</div>