{% extends "onboarding/_base.html" %}
{% block title %}Gmail IMAP credentials — Onboarding{% endblock %}
{% block content %}
<!-- WIZARD_STEP_IMAP_CREDENTIALS_MARKER -->
<h1 class="text-2xl font-bold text-slate-100 mb-4">Job sources</h1>
<p class="text-slate-300 mb-4">Choose where Job Cannon looks for jobs. Free portals work immediately with no account; Gmail IMAP arrives after you set up job-alert emails.</p>

<form method="post" action="{{ url_for('onboarding.imap_credentials') }}" class="space-y-6">

  <!-- Section 0 — Free portals (zero credentials, default ON) — Issue #289 -->
  <div class="bg-slate-900/70 border border-slate-700 rounded p-4">
    <div class="flex items-start gap-3">
      <input type="checkbox" name="portal_search_enabled" id="portal_search_enabled" value="1"
        {% if portal_search_enabled %}checked{% endif %}
        class="mt-1 accent-indigo-500 w-4 h-4 flex-shrink-0">
      <div>
        <label for="portal_search_enabled" class="text-slate-100 font-semibold cursor-pointer">
          Free job portals — no account needed
        </label>
        <p class="text-slate-400 text-sm mt-1">
          Searches <span class="text-slate-300">RemoteOK</span>, <span class="text-slate-300">Remotive</span>,
          and <span class="text-slate-300">Himalayas</span> using your target job titles as keywords.
          These portals return full job descriptions, so jobs are AI-scored on the
          <strong class="text-slate-200">same sync they arrive</strong> — no extra enrichment step.
          Disable only if you want inbox-only ingestion.
        </p>
      </div>
    </div>
  </div>

  <!-- Section 1 — Gmail IMAP -->
  <div>
    <h2 class="text-lg font-semibold text-slate-100 mb-3">Connect Gmail (IMAP)</h2>
    <p class="text-slate-300 mb-4">Job Cannon ingests job-alert emails from your Gmail inbox over IMAP using a Google App Password — a one-purpose, 16-character password you generate for this app. We never see or store your Google account password.</p>

    <!-- F3 (UAT 2026-05-21): hand-holding for users who have never created a Google App Password. -->

    {# Google-UI instructions — verified 2026-06; re-verify against a no-2FA
       test account before each release (see the release checklist). #}
    <!-- What you need: two-step link list -->
    <div class="bg-slate-900/70 border border-slate-700 rounded p-4 mb-4">
      <h3 class="text-base font-semibold text-slate-100 mb-3">What you need</h3>
      <ol class="space-y-3 text-sm text-slate-200 list-none">
        <li>
          <a href="https://myaccount.google.com/security" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 underline font-medium">Step 1 — Enable 2-Step Verification</a>
          <p class="text-slate-400 mt-1">Google requires 2-Step Verification before they will let you create App Passwords. If you already have it on, you can skip this link.</p>
          <details class="mt-2 text-sm">
            <summary class="cursor-pointer text-blue-400 hover:text-blue-300">Don't have 2-Step Verification yet? Click for a 2-minute walkthrough</summary>
            <ol class="list-decimal list-inside space-y-2 mt-2 text-slate-300">
              <li>Open <a href="https://myaccount.google.com/signinoptions/two-step-verification" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 underline">the 2-Step Verification page</a>
                  (sign in if prompted) and click <b>Turn on 2-Step Verification</b> /
                  <b>Get started</b>. Google may ask for your password again.</li>
              <li>Pick your second step. If you're signed in to Google on your phone,
                  the easiest is the <b>Google prompt</b> — Google sends an "Is this you?"
                  tap-to-approve notification. Otherwise choose <b>phone number</b> and
                  Google texts you a code.</li>
              <li>Enter the code / approve the prompt, then click <b>Turn on</b>.</li>
              <li>That's it — now the App Passwords link in Step 2 will work.
                  (Without 2-Step Verification, that page doesn't exist at all.)</li>
            </ol>
            <p class="mt-2 text-slate-400">This protects your whole Google account, not just
               Job Cannon — it's worth having regardless.</p>
          </details>
        </li>
        <li>
          <a href="https://myaccount.google.com/apppasswords" target="_blank" rel="noopener" class="text-blue-400 hover:text-blue-300 underline font-medium">Step 2 — Generate an App Password</a>
          <p class="text-slate-400 mt-1">This is the page where you generate the 16-character password Job Cannon will use for read-only access to your job-alert emails.</p>
        </li>
      </ol>
    </div>

    {# Google-UI instructions — verified 2026-06 (single App-name field + Create
       button; the old Mail / Other-device dropdowns are gone). Re-verify before
       each release. #}
    <!-- Numbered steps for the app-passwords page itself -->
    <div class="bg-slate-900/70 border border-slate-700 rounded p-4 mb-4">
      <h3 class="text-base font-semibold text-slate-100 mb-3">On the App Passwords page</h3>
      <ol class="list-decimal list-inside space-y-2 text-sm text-slate-200">
        <li>Sign in if prompted. (This page only exists once 2-Step Verification is on —
            if it looks empty or errors, do the 2-Step Verification walkthrough above first.)</li>
        <li>Type <span class="font-mono bg-slate-800 px-1 rounded">Job Cannon</span> in the
            <span class="font-semibold">App name</span> field and click
            <span class="font-semibold">Create</span>.</li>
        <li>Copy the 16-character password from the popup — <span class="font-semibold">spaces included</span> —
            and paste it below. Google shows it only once; if you lose it, just delete it and create a new one.</li>
      </ol>
      <p class="text-xs text-slate-400 mt-3">Can't find the page from the menus? Type
         <span class="italic">app passwords</span> in the search box at the top of myaccount.google.com.</p>
    </div>

    <!-- Collapsible rationale -->
    <details class="bg-slate-900/40 border border-slate-700 rounded p-3 mb-4 text-sm text-slate-300">
      <summary class="cursor-pointer text-slate-200 font-medium">Why am I doing this?</summary>
      <p class="mt-2">Job Cannon reads job-alert emails (LinkedIn, Glassdoor, ZipRecruiter, etc.) from your inbox over IMAP using a Google-issued one-purpose password. The password is stored in your OS keyring (Windows Credential Manager / macOS Keychain) — not in any plaintext file we can read, and never sent off your machine.</p>
    </details>

    {% if error %}
      <div class="p-3 bg-red-900/50 border border-red-700 rounded mb-4 text-red-200 text-sm">{{ error }}</div>
    {% endif %}

    <div class="space-y-3">
      <div>
        <label class="block text-sm text-slate-200 mb-1">Gmail address</label>
        <input type="email" name="email" value="{{ email | default('') }}" required class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-slate-100">
      </div>
      <div>
        <label class="block text-sm text-slate-200 mb-1">App password (16 characters with spaces)</label>
        <input type="password" name="app_password" placeholder="xxxx xxxx xxxx xxxx" required class="w-full bg-slate-900 border border-slate-700 rounded px-3 py-2 text-slate-100">
      </div>
    </div>
  </div>

  <div class="flex gap-2 pt-2">
    <button type="submit" class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded">Test &amp; continue</button>
    <button type="submit" name="skip" value="1" formnovalidate class="bg-slate-700 hover:bg-slate-600 text-slate-200 px-4 py-2 rounded text-sm">Skip for now - set up in Settings</button>
  </div>

</form>
{% endblock %}