{% extends "base.html" %}
{% block title %}Create Server — MCP Factory{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1>Create Server</h1>
        <p class="page-subtitle">Describe what you need — MCP Factory generates production-ready code.</p>
    </div>
</div>

<form hx-post="/api/create"
      hx-target="#create-result"
      hx-indicator="#loading"
      class="create-form">

    <div class="form-group">
        <label for="prompt">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            What should your MCP server do?
        </label>
        <textarea id="prompt" name="prompt" rows="4"
                  placeholder="e.g., Read my CSV files and answer questions about the data&#10;&#10;Be specific — mention APIs, file types, or data sources for best results."
                  required></textarea>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label for="name">Server Name <span class="dim">(optional)</span></label>
            <input type="text" id="name" name="name" placeholder="auto-generated if empty">
        </div>

        <div class="form-group">
            <label for="language">Language</label>
            <select id="language" name="language">
                <option value="typescript" selected>TypeScript</option>
                <option value="python">Python</option>
            </select>
        </div>

        <div class="form-group">
            <label for="provider">LLM Provider</label>
            <select id="provider" name="provider">
                <option value="ollama" selected>Ollama (local)</option>
                <option value="openai">OpenAI</option>
            </select>
        </div>
    </div>

    <div class="template-hints">
        <p class="dim">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
            Template hints — mention these keywords to auto-select a template:
        </p>
        <div class="hint-grid">
            {% for tname, tdesc in templates %}
            <div class="hint-chip">
                <strong>{{ tname }}</strong>
                <span>{{ tdesc }}</span>
            </div>
            {% endfor %}
        </div>
    </div>

    <button type="submit" class="btn btn-primary btn-lg">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
        Generate Server
    </button>

    <div id="loading" class="htmx-indicator">
        <div class="spinner"></div>
        <p>Analyzing your prompt & generating code...</p>
    </div>
</form>

<div id="create-result"></div>
{% endblock %}