<header>
    <h5>{% if is_new %}Add New Agent{% else %}Edit Agent: {{ agent.name if agent else '' }}{% endif %}</h5>
</header>
<article id="agent-detail-form-content">
    
    {% if form_message %}
        <div class="form-message {{ 'success' if success else 'error' }}"
             x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)"
             x-transition:leave="transition ease-in duration-300"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0">
            {{ form_message }}
        </div>
    {% endif %}    <form {% if is_new %}              hx-post="{{ url_for('htmx_create_agent') }}"
              {% else %}
              hx-put="{{ url_for('htmx_update_agent', original_agent_name=agent.name if agent else '') }}"
          {% endif %}
          hx-target="#agent-detail-form-content"
          hx-swap="innerHTML"
          hx-indicator="#agent-detail-loading-indicator">

        <fieldset>
            <legend>Core Agent Configuration</legend>
            <label for="agent_name_field">Agent Name *</label>
            <input type="text" id="agent_name_field" name="agent_name" value="{{ agent.name if agent and not form_errors else (form_data.agent_name if form_data else '') }}" required placeholder="Unique name for the agent">
            {% if form_errors and form_errors.agent_name %}<small class="field-error">{{ form_errors.agent_name }}</small>{% endif %}

            <label for="agent_description_field">Description</label>
            <textarea id="agent_description_field" name="agent_description" placeholder="Briefly describe what this agent does.">{{ agent.resolved_description if agent and not form_errors else (form_data.agent_description if form_data else '') }}</textarea>

            <label for="agent_model_field">Model Override (Optional)</label>
            <input type="text" id="agent_model_field" name="agent_model" value="{{ agent.model if agent and agent.model and not form_errors else (form_data.agent_model if form_data else '') }}" placeholder="e.g., openai/gpt-3.5-turbo (uses Flock default if blank)">

            <label for="input_signature_field">Input Signature *</label>
            <input type="text" id="input_signature_field" name="input_signature" value="{{ agent.input if agent and not form_errors else (form_data.input_signature if form_data else '') }}" required placeholder="e.g., query: str | The user's question, context: list[str]">
            <small>Format: `name1: type1 | desc1, name2: type2 | desc2`</small>
            {% if form_errors and form_errors.input_signature %}<small class="field-error">{{ form_errors.input_signature }}</small>{% endif %}

            <label for="output_signature_field">Output Signature *</label>
            <input type="text" id="output_signature_field" name="output_signature" value="{{ agent.output if agent and not form_errors else (form_data.output_signature if form_data else '') }}" required placeholder="e.g., answer: str | The final answer, sources: list[str]">
            <small>Format: `name1: type1 | desc1, name2: type2 | desc2`</small>
            {% if form_errors and form_errors.output_signature %}<small class="field-error">{{ form_errors.output_signature }}</small>{% endif %}
        </fieldset>

        <fieldset>
            <legend>Tools (Optional)</legend>
            <div class="tool-checklist">
            {% if registered_tools %}
                {% for tool in registered_tools %}
                <label for="tool_{{ tool.name }}">
                    <input type="checkbox" id="tool_{{ tool.name }}" name="tools" value="{{ tool.name }}"
                           {% if tool.name in (current_tools if not form_errors else (form_data.getlist('tools') if form_data else [])) %}checked{% endif %}>
                    {{ tool.name }} <small>({{ tool.module }})</small>
                </label>
                {% endfor %}
            {% else %}
                <p>No tools registered. Add tools via the Registry page or ensure they are discovered by Flock.</p>
            {% endif %}
            </div>
        </fieldset>
        
        <fieldset>
            <legend>Routing (Default Handoff)</legend>
            <label for="default_router_handoff_field">Next Agent Name (Optional)</label>
            <input type="text" id="default_router_handoff_field" name="default_router_handoff" 
                   value="{{ agent.handoff_router.config.hand_off if agent and agent.handoff_router and agent.handoff_router.config and agent.handoff_router.config.hand_off is string and not form_errors else (form_data.default_router_handoff if form_data else '') }}" 
                   placeholder="Enter name of next agent">
            <small>If set, this agent will hand off to the specified agent by default.</small>
        </fieldset>

        <div class="grid">
            <button type="submit">
                {% if is_new %}Create Agent{% else %}Save Changes{% endif %}
            </button>
            {% if not is_new and agent %}            <button type="button" role="button" class="secondary outline"                    hx-delete="{{ url_for('htmx_delete_agent', agent_name=agent.name) }}"
                    hx-target="#agent-detail-form-content"
                    hx-confirm="Are you sure you want to delete agent '{{ agent.name }}'?"
                    hx-indicator="#agent-detail-loading-indicator">
                Delete Agent
            </button>
            {% endif %}
            <button type="button" class="outline"                    hx-get="{{ url_for('htmx_get_new_agent_form') }}" 
                    hx-target="#agent-detail-panel"
                    hx-swap="innerHTML"
                    hx-indicator="#agent-detail-loading-indicator">
                Cancel / New Form
            </button>
        </div>
        <div id="agent-detail-loading-indicator" class="htmx-indicator" style="margin-top: 0.5rem;">
            <progress indeterminate></progress> Processing...
        </div>
    </form>
</article>