{% extends "base.html" %}
{% block title %}Tool Setup - Janus{% endblock %}
{% block tools_active %}bg-gray-700 text-white{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-white mb-2">Tool Setup</h1>
<p class="text-gray-400 text-sm mb-6">Connect your tools to Janus. All requests go through the same OpenAI-compatible endpoint.</p>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <!-- Claude Code -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center space-x-3 mb-4">
            <span class="text-2xl">🤖</span>
            <h2 class="text-lg font-bold text-white">Claude Code</h2>
        </div>
        <p class="text-gray-400 text-sm mb-3">Set the environment variable and run:</p>
        <div class="bg-gray-900 rounded-lg border border-gray-700 flex items-center group">
            <div class="flex-1 p-3 min-w-0 overflow-x-auto">
                <code class="text-sm text-green-300 block">export ANTHROPIC_BASE_URL={{ base_url }}</code>
                {% if require_key %}
                <code class="text-sm text-green-300 block mt-1">export ANTHROPIC_API_KEY=sk-janus-xxxx</code>
                {% endif %}
            </div>
            <button type="button" onclick="copySnippet(this)"
                    class="shrink-0 mr-3 text-xs text-gray-500 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity">
                Copy
            </button>
        </div>
    </div>

    <!-- Codex / Cursor -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center space-x-3 mb-4">
            <span class="text-2xl">💻</span>
            <h2 class="text-lg font-bold text-white">Codex / Cursor</h2>
        </div>
        <p class="text-gray-400 text-sm mb-3">Point OpenAI base URL at Janus:</p>
        <div class="bg-gray-900 rounded-lg border border-gray-700 flex items-center group">
            <div class="flex-1 p-3 min-w-0 overflow-x-auto">
                <code class="text-sm text-green-300 block">export OPENAI_BASE_URL={{ base_url }}</code>
                {% if require_key %}
                <code class="text-sm text-green-300 block mt-1">export OPENAI_API_KEY=sk-janus-xxxx</code>
                {% endif %}
            </div>
            <button type="button" onclick="copySnippet(this)"
                    class="shrink-0 mr-3 text-xs text-gray-500 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity">
                Copy
            </button>
        </div>
    </div>

    <!-- Cline -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center space-x-3 mb-4">
            <span class="text-2xl">📝</span>
            <h2 class="text-lg font-bold text-white">Cline</h2>
        </div>
        <p class="text-gray-400 text-sm mb-3">In Cline settings, set API Provider to "OpenAI Compatible":</p>
        <div class="bg-gray-900 rounded-lg border border-gray-700 flex items-center group">
            <div class="flex-1 p-3 min-w-0 overflow-x-auto">
                <code class="text-sm text-green-300 block">Base URL: {{ base_url }}</code>
                {% if require_key %}
                <code class="text-sm text-green-300 block mt-1">API Key: sk-janus-xxxx</code>
                {% endif %}
            </div>
            <button type="button" onclick="copySnippet(this)"
                    class="shrink-0 mr-3 text-xs text-gray-500 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity">
                Copy
            </button>
        </div>
    </div>

    <!-- Generic -->
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <div class="flex items-center space-x-3 mb-4">
            <span class="text-2xl">🔧</span>
            <h2 class="text-lg font-bold text-white">Generic / curl</h2>
        </div>
        <p class="text-gray-400 text-sm mb-3">Standard OpenAI-compatible API:</p>
        <div class="bg-gray-900 rounded-lg border border-gray-700 flex items-center group">
            <div class="flex-1 p-3 min-w-0 overflow-x-auto">
                <code class="text-sm text-green-300 block">curl {{ base_url }}/chat/completions \</code>
                <code class="text-sm text-gray-400 block">&nbsp;&nbsp;-H "Authorization: Bearer {% if require_key %}sk-janus-xxxx{% else %}none{% endif %}" \</code>
                <code class="text-sm text-gray-400 block">&nbsp;&nbsp;-H "Content-Type: application/json" \</code>
                <code class="text-sm text-gray-400 block">&nbsp;&nbsp;-d '{"model": "openai/gpt-4o", "messages": [...]}'</code>
            </div>
            <button type="button" onclick="copySnippet(this)"
                    class="shrink-0 mr-3 self-center text-xs text-gray-500 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity">
                Copy
            </button>
        </div>
    </div>
</div>

<script>
function copySnippet(btn) {
    var codes = btn.parentElement.querySelectorAll('code');
    var text = Array.from(codes).map(function(c) { return c.textContent; }).join('\n');
    navigator.clipboard.writeText(text).then(function() {
        var orig = btn.textContent;
        btn.textContent = 'Copied!';
        setTimeout(function() { btn.textContent = orig; }, 1500);
    });
}
</script>
{% endblock %}