{{define "api_es"}}
<style>
.ai-box { background: var(--bg-secondary); border-radius: 8px; padding: 24px; margin-bottom: 24px; }
.ai-box h2 { font-size: 1.1rem; margin: 0 0 16px 0; color: var(--accent); }
.ai-box p { margin: 8px 0; font-size: 0.9rem; }
.ai-box code { background: #2d2d2d; color: #f8f8f2; padding: 2px 6px; border-radius: 4px; font-size: 0.85rem; }
.ai-box pre { background: #2d2d2d; color: #f8f8f2; padding: 12px 16px; border-radius: 6px; font-size: 0.85rem; overflow-x: auto; margin: 8px 0; }
.guid-display { background: #2d2d2d; color: #6c6; padding: 8px 12px; border-radius: 6px; font-family: monospace; font-size: 0.9rem; margin: 8px 0; display: inline-block; }
.endpoint { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin: 16px 0; }
.endpoint .method { color: #22863a; font-weight: 600; font-size: 0.85rem; }
.endpoint .url { color: var(--accent); font-family: monospace; font-size: 0.9rem; }
.endpoint p { margin: 8px 0 0 0; font-size: 0.9rem; color: var(--text-muted); }
.note { background: #fef3cd; border-radius: 6px; padding: 12px 16px; margin: 16px 0; font-size: 0.9rem; }
</style>

<div class="page-container" style="max-width: 720px;">
  <div class="page-card">
    <h1>API</h1>
    <p class="intro">Accede a los datos de tu dossier de salud de forma programática — o deja que la IA lo haga por ti.</p>
  </div>

  {{if .Dossier}}
  <div class="ai-box">
    <h2>{{.T.api_token}}</h2>
    {{if .APIToken}}
    <p>{{.T.api_token_use}}</p>
    <div style="display: flex; align-items: center; gap: 8px; margin: 8px 0;">
      <input type="text" id="api-token" value="{{.APIToken}}" readonly style="flex: 1; background: #2d2d2d; color: #6c6; padding: 8px 12px; border-radius: 6px; font-family: monospace; font-size: 0.9rem; border: none;">
      <button onclick="copyToken()" class="btn btn-small" style="white-space: nowrap;">{{.T.copy}}</button>
    </div>
    <p style="color: var(--text-muted); font-size: 0.85rem;">{{.T.api_token_warning}}</p>
    <form method="POST" action="/api/token/regenerate" style="margin-top: 16px;">
      <button type="submit" class="btn btn-small btn-secondary" onclick="return confirm('{{.T.api_token_regenerate_confirm}}')">{{.T.api_token_regenerate}}</button>
    </form>
    {{else}}
    <p>{{.T.api_token_none}}</p>
    <form method="POST" action="/api/token/generate" style="margin-top: 16px;">
      <button type="submit" class="btn btn-primary">{{.T.api_token_generate}}</button>
    </form>
    {{end}}
  </div>
  <script>
  function copyToken() {
    var input = document.getElementById('api-token');
    input.select();
    document.execCommand('copy');
    var btn = event.target;
    var original = btn.textContent;
    btn.textContent = '✓';
    setTimeout(function() { btn.textContent = original; }, 1500);
  }
  </script>
  {{end}}

  <div class="page-card">
    <h2>{{.T.api_authentication}}</h2>
    <p>{{.T.api_auth_instructions}}</p>
    <pre style="background: #2d2d2d; color: #f8f8f2; padding: 12px 16px; border-radius: 6px; font-size: 0.85rem; margin: 16px 0;">Authorization: Bearer YOUR_API_TOKEN</pre>
  </div>

  <div class="page-card">
    <h2>Endpoints</h2>

    <h3>Dossiers</h3>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers</span>
      <p>Lista todos los dossiers accesibles para esta cuenta (los tuyos + los compartidos contigo).</p>
    </div>

    <h3>Imágenes</h3>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers/{id}/entries?category=imaging</span>
      <p>Lista todos los estudios de imagen en un dossier. Devuelve el ID del estudio, fecha, descripción y número de series.</p>
    </div>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/entries/{study_id}/children</span>
      <p>Lista las series de un estudio. Opcional: <code>?filter=SAG</code> o <code>?filter=T1</code> para filtrar por descripción.</p>
    </div>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/entries/{series_id}/children</span>
      <p>Lista los cortes con datos de posición (coordenadas en mm, orientación, espaciado de píxeles).</p>
    </div>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/entries/{slice_id}?detail=full</span>
      <p>Obtiene la imagen del corte en formato PNG. Opcional: <code>&amp;ww=WIDTH&amp;wc=CENTER</code> para el ajuste de ventana.</p>
    </div>

    <h3>Genoma</h3>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers/{id}/entries?category=genome</span>
      <p>Lista las categorías de variantes genómicas: medicación, cardiovascular, metabolismo, fertilidad, rasgos, longevidad.</p>
    </div>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers/{id}/genome?search=MTHFR</span>
      <p>Consulta variantes genómicas. Filtros opcionales: <code>&amp;category=medication</code>, <code>&amp;rsids=rs1234,rs5678</code>, <code>&amp;min_magnitude=2</code></p>
    </div>

    <h3>Laboratorio</h3>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers/{id}/labs/tests</span>
      <p>Lista todos los nombres de análisis de laboratorio disponibles para un dossier.</p>
    </div>
    <div class="endpoint">
      <span class="method">GET</span> <span class="url">/api/v1/dossiers/{id}/labs/results?names=TSH,T4</span>
      <p>Obtiene resultados de laboratorio. Requerido: <code>&amp;names=</code> (separados por comas). Opcional: <code>&amp;from=2024-01-01</code>, <code>&amp;to=2024-12-31</code>, <code>&amp;latest=true</code></p>
    </div>

    <div class="note">
      <strong>Formato de texto:</strong> Añade <code>&amp;format=text</code> a cualquier endpoint para obtener una salida en texto plano compatible con IA en lugar de JSON.
    </div>
  </div>

  <div class="page-card">
    <h2>Ejemplo</h2>
    <pre style="background: #2d2d2d; color: #f8f8f2; padding: 16px; border-radius: 8px; font-size: 0.85rem; overflow-x: auto;"># Lista tus dossiers
curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://inou.com/api/v1/dossiers

# Lista estudios de imagen
curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://inou.com/api/v1/dossiers/DOSSIER_ID/entries?category=imaging

# Consulta variantes genómicas
curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://inou.com/api/v1/dossiers/DOSSIER_ID/genome?search=MTHFR</pre>
  </div>

  {{template "footer"}}
</div>
{{end}}