<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>No-Code ADK Interface</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="bi bi-robot me-2"></i>
                No-Code ADK Interface
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="new-agent-btn">
                            <i class="bi bi-plus-circle me-1"></i> New Agent
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#" id="my-agents-btn">
                            <i class="bi bi-list-ul me-1"></i> My Agents
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div id="loading-container" class="text-center py-5 d-none">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-3">Loading...</p>
        </div>

        <div id="error-container" class="alert alert-danger d-none" role="alert"></div>

        <div id="main-content">
            <!-- Content will be loaded here -->
        </div>
    </div>

    <!-- Templates -->
    <template id="new-agent-template">
        <div class="card">
            <div class="card-header">
                Create New Agent
            </div>
            <div class="card-body">
                <div id="templates-container" class="mb-4">
                    <h5>Start from a Template</h5>
                    <div class="row" id="templates-row"></div>
                    <hr class="my-4">
                </div>

                <form id="agent-form">
                    <div class="mb-3">
                        <label for="name" class="form-label">Agent Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                        <div class="form-text">Must be a valid Python identifier (no spaces or special characters)</div>
                    </div>

                    <div class="mb-3">
                        <label for="provider" class="form-label">Provider</label>
                        <select class="form-select" id="provider" name="provider">
                            <option value="google">Google (Gemini)</option>
                            <option value="ollama">Ollama (Local)</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="model" class="form-label">Model</label>
                        <select class="form-select" id="model" name="model" required>
                            <option value="">Select a model</option>
                        </select>
                    </div>

                    <div class="mb-3 ollama-settings d-none">
                        <label for="ollama_base_url" class="form-label">Ollama Base URL</label>
                        <input type="text" class="form-control" id="ollama_base_url" name="ollama_base_url" value="http://localhost:11434">
                        <div class="form-text">URL where Ollama is running</div>
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <input type="text" class="form-control" id="description" name="description">
                        <div class="form-text">A brief description of what the agent does</div>
                    </div>

                    <div class="mb-3">
                        <label for="instruction" class="form-label">Instruction</label>
                        <textarea class="form-control" id="instruction" name="instruction" rows="5" required></textarea>
                        <div class="form-text">Instructions for the LLM model, guiding the agent's behavior</div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Tools</label>
                        <div class="row" id="tools-container"></div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="flow" class="form-label">Flow Type</label>
                            <select class="form-select" id="flow" name="flow">
                                <option value="auto">Auto (Default)</option>
                                <option value="single">Single</option>
                                <option value="sequential">Sequential</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label for="temperature" class="form-label">Temperature</label>
                            <input type="range" class="form-range" min="0" max="1" step="0.1" id="temperature" name="temperature" value="0.2">
                            <div class="d-flex justify-content-between">
                                <small>More Deterministic (0)</small>
                                <small id="temperature-value">Current: 0.2</small>
                                <small>More Creative (1)</small>
                            </div>
                        </div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" class="btn btn-primary">
                            Create Agent
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </template>

    <template id="agents-list-template">
        <div class="card">
            <div class="card-header">
                My Agents
            </div>
            <div class="card-body">
                <div id="no-agents-message" class="text-center py-4 d-none">
                    <i class="bi bi-robot fs-1 text-muted"></i>
                    <p class="mt-3">No agents created yet. Create your first agent to get started!</p>
                </div>
                <div id="agents-table-container" class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Path</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="agents-table-body"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </template>

    <template id="agent-detail-template">
        <div class="card">
            <div class="card-header">
                Agent Details: <span id="agent-name"></span>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <h5>Configuration</h5>
                    <div class="card">
                        <div class="card-body">
                            <pre id="agent-config" class="mb-0"></pre>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <h5>Generated Code</h5>
                    <div class="card">
                        <div class="card-body">
                            <pre id="agent-code" class="mb-0"></pre>
                        </div>
                    </div>
                </div>

                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <button id="back-btn" class="btn btn-secondary me-md-2">
                        Back to List
                    </button>
                    <button id="run-btn" class="btn btn-success">
                        Run Agent
                    </button>
                </div>
            </div>
        </div>
    </template>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/app.js"></script>
</body>
</html>
