{{define "connect_nl"}}
<div class="install-container">

  <div class="install-header">
    <div>
      <h1>Verbind AI met je gegevens</h1>
      <p>Kies je AI-assistent en volg de installatie-instructies.</p>
    </div>
    {{if and .Dossier .Dossier.DossierID}}<a href="/dashboard" class="btn btn-secondary btn-small">← Terug</a>{{else}}<a href="/" class="btn btn-secondary btn-small">← Home</a>{{end}}
  </div>

  {{if not (and .Dossier .Dossier.DossierID)}}
  <div class="login-tracker">
    <strong>Let op:</strong> <a href="/start">Log in</a> om gepersonaliseerde instructies te zien met je account-token al ingevuld.
  </div>
  {{end}}

  <div class="install-card">
    <div class="ai-tabs">
      <button class="ai-tab active" onclick="showTab('claude')">Claude Desktop</button>
      <button class="ai-tab" onclick="showTab('grok')">Grok</button>
      <button class="ai-tab" onclick="showTab('chatgpt')">ChatGPT</button>
      <button class="ai-tab" onclick="showTab('other')">Andere AI</button>
    </div>

    <!-- Claude Desktop Tab -->
    <div id="tab-claude" class="ai-content active">
      <p>Claude Desktop met MCP biedt de beste ervaring — native tool-toegang, geen URL-fetching, volledige API-mogelijkheden.</p>

      <div class="step">
        <div class="step-header">
          <span class="step-num">1</span>
          <h3>Installeer Claude Desktop</h3>
        </div>
        <p>Download en installeer vanaf <a href="https://claude.ai/download" target="_blank">claude.ai/download</a></p>
      </div>

      <div class="step">
        <div class="step-header">
          <span class="step-num">2</span>
          <h3>Installeer de inou-extensie</h3>
        </div>
        <p>Download <a href="/download/inou.mcpb">inou.mcpb</a> en installeer:</p>
        <ul style="margin: 8px 0 12px 20px;">
          <li><strong>Mac:</strong> Dubbelklik op het bestand</li>
          <li><strong>Windows:</strong> Ga in Claude Desktop naar <em>File → Import Extension</em> en selecteer het gedownloade bestand</li>
        </ul>
        <p>Voer je account-token in wanneer daarom gevraagd wordt:</p>
        <div class="code-wrapper">
          <pre id="step2-token">{{if and .Dossier .Dossier.DossierID}}{{.Dossier.DossierID}}{{else}}JOUW_ACCOUNT_TOKEN{{end}}</pre>
          <button class="copy-icon" onclick="copyCode('step2-token', this)" title="Kopiëren">
            <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
            </svg>
          </button>
        </div>
        <p class="step-note"><strong>Let op:</strong> Je ziet een machtigingswaarschuwing — dit is normaal voor extensies die nog niet in Claude's officiële directory staan. <span class="inou-brand">inou</span> maakt alleen HTTPS-verbindingen met inou.com; het benadert geen lokale bestanden.</p>
      </div>

      <div class="step">
        <div class="step-header">
          <span class="step-num">3</span>
          <h3>Inschakelen &amp; machtigingen toestaan</h3>
        </div>
        <p>Ga naar <strong>Settings → Extensions</strong> en schakel de inou-extensie in als dat nog niet gedaan is.</p>
        <p>Bij het eerste gebruik vraagt Claude toestemming voor elke tool. Selecteer <strong>"Allow for this chat"</strong> en vink <strong>"Don't ask again for inou-health"</strong> aan om alle machtigingen in één keer toe te staan — anders word je 11 keer gevraagd.</p>
      </div>

      <div class="step">
        <div class="step-header">
          <span class="step-num">4</span>
          <h3>Test</h3>
        </div>
        <p>Open Claude Desktop en plak:</p>
        <div class="code-wrapper">
          <pre id="step3-test">Toon mijn beschikbare dossiers via de inou-bridge.</pre>
          <button class="copy-icon" onclick="copyCode('step3-test', this)" title="Kopiëren">
            <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
            </svg>
          </button>
        </div>
        <p>Je zou je dossier(s) moeten zien. Klaar!</p>
      </div>

      <details style="margin-top: 24px;">
        <summary style="cursor: pointer; color: var(--text-muted); font-size: 0.9rem;">Handmatige installatie (geavanceerd)</summary>
        <div style="margin-top: 16px;">
          <div class="step">
            <div class="step-header">
              <span class="step-num muted">1</span>
              <h3>Download bridge</h3>
            </div>
            <p>Download de bridge voor jouw systeem:</p>
            <ul>
              <li><a href="/download/inou_bridge_darwin_arm64">Mac Apple Silicon</a></li>
              <li><a href="/download/inou_bridge_darwin_amd64">Mac Intel</a></li>
              <li><a href="/download/inou_bridge_win_amd64.exe">Windows 64-bit</a></li>
            </ul>
            <p>Sla op naar ~/bin/inou_bridge (Mac) of %USERPROFILE%\inou\inou_bridge.exe (Windows). Maak uitvoerbaar op Mac: chmod +x ~/bin/inou_bridge</p>
          </div>
          <div class="step">
            <div class="step-header">
              <span class="step-num muted">2</span>
              <h3>Configureer Claude</h3>
            </div>
            <p>Bewerk Claude config (Mac: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json) en voeg toe aan mcpServers:</p>
            <div class="code-wrapper">
              <pre id="manual-config">"inou": {
  "command": "BRIDGE_PATH",
  "args": ["--server=https://inou.com", "--account={{if and .Dossier .Dossier.DossierID}}{{.Dossier.DossierID}}{{else}}JOUW_ACCOUNT_TOKEN{{end}}"]
}</pre>
              <button class="copy-icon" onclick="copyCode('manual-config', this)" title="Kopiëren">
                <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                </svg>
              </button>
            </div>
            <p>Vervang BRIDGE_PATH door het daadwerkelijke pad. Herstart Claude Desktop.</p>
          </div>
        </div>
      </details>
    </div>

    <!-- Grok Tab -->
    <div id="tab-grok" class="ai-content">
      <p>Grok kan via het web je gezondheidsgegevens benaderen via onze API. Geen installatie nodig.</p>

      <div class="quick-start">
        <h3>Snel starten</h3>
        <p>Kopieer dit en plak het in Grok:</p>
        <div class="code-wrapper">
          <pre id="grok-code">Fetch https://inou.com/api/docs to see the API documentation.
Then fetch https://inou.com/api/dossiers?token={{if and .Dossier .Dossier.DossierID}}{{.Dossier.DossierID}}{{else}}JOUW_ACCOUNT_TOKEN{{end}} to list my dossiers.
If there is more than one dossier, ask me which one to work with before proceeding.
Help me explore my health data - imaging studies, genome variants, and lab results.

IMPORTANT:
- Allow 3 seconds for API responses before assuming failure.
- When sharing image links, use the exact image_url from responses.
- This is real medical data. NEVER hallucinate. Only describe what you actually see.</pre>
          <button class="copy-icon" onclick="copyCode('grok-code', this)" title="Kopiëren">
            <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
            </svg>
          </button>
        </div>
      </div>

      <div class="step">
        <div class="step-header">
          <span class="step-num">→</span>
          <h3>Wat Grok kan doen</h3>
        </div>
        <p>Eenmaal verbonden kun je Grok vragen om:</p>
        <ul>
          <li>Al je beeldvormingsstudies, genoomgegevens en labresultaten te tonen</li>
          <li>Series binnen een specifieke studie te laten zien</li>
          <li>Individuele slices op te halen en te analyseren</li>
          <li>Beelden te vergelijken tussen verschillende sequenties (T1, T2, FLAIR)</li>
          <li>Naar specifieke anatomische regio's te navigeren</li>
          <li>Genoomvarianten op te zoeken op gen, categorie of rsid</li>
          <li>Medicatiereacties en gezondheidsrisico's te bekijken</li>
          <li>Labwaarden in de tijd te volgen</li>
        </ul>
      </div>

      <p style="margin-top: 24px;">Zie de <a href="/api/docs" style="color: var(--accent);">volledige API-documentatie</a> voor alle beschikbare endpoints.</p>
    </div>

    <!-- ChatGPT Tab -->
    <div id="tab-chatgpt" class="ai-content">
      <p style="color: var(--text-muted);">Niet aanbevolen voor medische beeldvorming vanwege verhoogd risico op hallucinaties in onze tests.</p>

      <div class="step">
        <div class="step-header">
          <span class="step-num muted">✗</span>
          <h3>Waarom niet ChatGPT?</h3>
        </div>
        <p>Medische beeldvorming vereist absolute nauwkeurigheid. In onze tests verzon ChatGPT informatie, zelfs wanneer correcte gegevens duidelijk werden verstrekt. We kunnen het niet aanbevelen voor het analyseren van gezondheidsgegevens waar fouten echte gevolgen hebben.</p>
      </div>

      <div class="step">
        <div class="step-header">
          <span class="step-num">→</span>
          <h3>Aanbevolen alternatieven</h3>
        </div>
        <p>Gebruik <a href="#" onclick="showTab('claude'); return false;">Claude Desktop</a> voor de beste ervaring met native tool-toegang, of <a href="#" onclick="showTab('grok'); return false;">Grok</a> voor webtoegang zonder installatie.</p>
      </div>
    </div>

    <!-- Other AI Tab -->
    <div id="tab-other" class="ai-content">
      <p>Andere AI-assistenten kunnen je gegevens benaderen via onze web-API, hoewel mogelijkheden variëren.</p>

      <div class="step">
        <div class="step-header">
          <span class="step-num warning">⚠</span>
          <h3>Gemini</h3>
        </div>
        <p>Gemini's webbrowsing is momenteel beperkt en kan mogelijk geen inou.com-URL's direct ophalen. Workarounds:</p>
        <ul>
          <li>Kopieer API-responses handmatig en plak ze in Gemini</li>
          <li>Gebruik Google AI Studio met function calling</li>
          <li>Overweeg Claude Desktop of Grok in plaats daarvan</li>
        </ul>
      </div>

      <div class="step">
        <div class="step-header">
          <span class="step-num">→</span>
          <h3>Bouw je eigen</h3>
        </div>
        <p>Onze API is eenvoudige REST + JSON. Zie de <a href="/api/docs">API-documentatie</a> voor endpoints en authenticatie.</p>
      </div>
    </div>
  </div>

  {{template "footer"}}

</div>

<script>
function copyCode(id, btn) {
  const text = document.getElementById(id).textContent;
  navigator.clipboard.writeText(text).then(() => {
    btn.classList.add('copied');
    setTimeout(() => btn.classList.remove('copied'), 1500);
  });
}

function showTab(name) {
  document.querySelectorAll('.ai-tab').forEach(t => t.classList.remove('active'));
  document.querySelectorAll('.ai-content').forEach(c => c.classList.remove('active'));
  document.querySelector('[onclick="showTab(\'' + name + '\')"]').classList.add('active');
  document.getElementById('tab-' + name).classList.add('active');
}
</script>
{{end}}