<!--
  Familiar - Self-hosted AI Agent
  Copyright (c) 2026 George Scott Foley
  
  Licensed under the MIT License
  For commercial licensing, contact: licensing@familiar.ai
-->
{% extends "base.html" %}

{% block title %}Settings - Familiar Admin{% endblock %}

{% block content %}
<div class="space-y-6">
    <h1 class="text-2xl font-bold text-gray-800">System Settings</h1>
    
    <!-- LLM Settings -->
    <div class="bg-white rounded-lg shadow">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-800">🧠 LLM Provider</h2>
        </div>
        <form method="POST" class="p-6 space-y-4">
            <input type="hidden" name="section" value="llm">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="provider" class="block text-sm font-medium text-gray-700 mb-1">
                        Provider
                    </label>
                    <select id="provider" 
                            name="provider" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
                        <option value="anthropic" {% if config.llm.default_provider == 'anthropic' %}selected{% endif %}>
                            Anthropic (Claude)
                        </option>
                        <option value="openai" {% if config.llm.default_provider == 'openai' %}selected{% endif %}>
                            OpenAI (GPT)
                        </option>
                        <option value="ollama" {% if config.llm.default_provider == 'ollama' %}selected{% endif %}>
                            Ollama (Local)
                        </option>
                    </select>
                </div>
                
                <div>
                    <label for="model" class="block text-sm font-medium text-gray-700 mb-1">
                        Model
                    </label>
                    <input type="text" 
                           id="model" 
                           name="model" 
                           value="{{ config.llm.model }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
                           placeholder="claude-sonnet-4-6">
                </div>
            </div>
            
            <button type="submit" class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                Save LLM Settings
            </button>
        </form>
    </div>
    
    <!-- Security Settings -->
    <div class="bg-white rounded-lg shadow">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-800">🔒 Security & Limits</h2>
        </div>
        <form method="POST" class="p-6 space-y-4">
            <input type="hidden" name="section" value="security">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="daily_budget" class="block text-sm font-medium text-gray-700 mb-1">
                        Daily API Budget (USD)
                    </label>
                    <input type="number" 
                           id="daily_budget" 
                           name="daily_budget" 
                           value="{{ config.security.daily_budget_usd }}"
                           step="0.50"
                           min="0"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
                    <p class="text-xs text-gray-500 mt-1">Requests will be blocked when budget is exceeded</p>
                </div>
                
                <div>
                    <label for="session_timeout" class="block text-sm font-medium text-gray-700 mb-1">
                        Session Timeout (minutes)
                    </label>
                    <input type="number" 
                           id="session_timeout" 
                           name="session_timeout" 
                           value="{{ config.security.session_timeout_minutes }}"
                           min="5"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
                    <p class="text-xs text-gray-500 mt-1">How long before inactive users are logged out</p>
                </div>
            </div>
            
            <button type="submit" class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                Save Security Settings
            </button>
        </form>
    </div>
    
    <!-- Skills -->
    <div class="bg-white rounded-lg shadow">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-800">🔧 Enabled Skills</h2>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {% set skills = [
                    ('email', 'Cerberus', '📧', 'Email triage'),
                    ('calendar', 'Chronos', '📅', 'Calendar'),
                    ('tasks', 'Hydra', '✅', 'Tasks'),
                    ('nonprofit', 'Plutus', '💰', 'Nonprofit'),
                    ('knowledge', 'Mnemosyne', '🧠', 'Knowledge base'),
                    ('proactive', 'Helios', '☀️', 'Daily briefings'),
                    ('browser', 'Arachne', '🌐', 'Browser automation'),
                    ('messaging', 'Hermes', '📡', 'Messaging'),
                    ('sms', 'Iris', '🌈', 'SMS'),
                    ('voice', 'Echo', '🔊', 'Voice'),
                    ('triggers', 'Moirai', '⚡', 'Webhooks'),
                    ('webapi', 'Argus', '👁️', 'Web APIs'),
                ] %}
                
                {% for skill_id, name, icon, desc in skills %}
                <label class="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
                    <input type="checkbox" checked class="w-4 h-4 text-purple-600 rounded">
                    <span class="text-xl">{{ icon }}</span>
                    <div>
                        <div class="font-medium text-gray-800">{{ name }}</div>
                        <div class="text-xs text-gray-500">{{ desc }}</div>
                    </div>
                </label>
                {% endfor %}
            </div>
            
            <p class="text-sm text-gray-500 mt-4">
                Skill configuration requires restart. Edit <code class="bg-gray-100 px-1 rounded">config.yaml</code> directly for advanced options.
            </p>
        </div>
    </div>
    
    <!-- System Info -->
    <div class="bg-white rounded-lg shadow">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-800">ℹ️ System Information</h2>
        </div>
        <div class="p-6">
            <dl class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div>
                    <dt class="text-sm text-gray-500">Version</dt>
                    <dd class="text-lg font-semibold text-gray-800">1.6.0</dd>
                </div>
                <div>
                    <dt class="text-sm text-gray-500">Python</dt>
                    <dd class="text-lg font-semibold text-gray-800">3.11</dd>
                </div>
                <div>
                    <dt class="text-sm text-gray-500">Data Directory</dt>
                    <dd class="text-sm font-mono text-gray-600">~/.familiar/data</dd>
                </div>
                <div>
                    <dt class="text-sm text-gray-500">Config File</dt>
                    <dd class="text-sm font-mono text-gray-600">~/familiar/config.yaml</dd>
                </div>
            </dl>
        </div>
    </div>
</div>
{% endblock %}
