<!-- ================================================ -->
<!-- FILE: mcpo_control_panel/ui/templates/bulk_add_form.html -->
<!-- ================================================ -->
{% extends "base.html" %}

{# Import the macro #}
{% from "_server_form_macro.html" import render_server_form %}

{% block title %}Add Servers - MCP Manager{% endblock %}
{% block page_title %}Add Server Definitions{% endblock %}
{% block page_subtitle %}Add a single server via form or multiple servers from JSON{% endblock %}

{% block content %}

<div class="row">
    <div class="col s12">
        <!-- Tabs structure -->
        <ul class="tabs tabs-fixed-width z-depth-1">
            <li class="tab col s6"><a class="active" href="#tab-single">Add Single Server</a></li>
            <li class="tab col s6"><a href="#tab-bulk">Bulk Add (JSON)</a></li>
        </ul>
    </div>

    <!-- ==================== Tab Content: Add SINGLE server ==================== -->
    <div id="tab-single" class="col s12" style="padding-top: 20px;">
        {% if single_server_error %}
        <div class="card-panel red lighten-4 red-text text-darken-4" style="padding: 10px; margin-bottom: 15px;">
             <i class="material-icons left tiny">error_outline</i><strong>Error adding server:</strong> {{ single_server_error }}
        </div>
        {% endif %}

        <p class="grey-text text-darken-1"><i class="material-icons tiny left">info_outline</i>First select "Server type" to see the corresponding fields (Command/Arguments or URL).</p>

        {{ render_server_form(
                action_url=single_add_action_url,
                submit_button_text='Add this server',
                server=single_server_form_data,
                error=None,
                is_add_form=True,
                request=request,
                cancel_url=url_for('ui_root')
           )
        }}
    </div>
    <!-- ==================== End of Tab Content: Add SINGLE server ==================== -->


    <!-- ==================== Tab Content: Bulk Add ==================== -->
    <div id="tab-bulk" class="col s12" style="padding-top: 20px;">
        <!-- Error/success messages -->
        {% if bulk_error %}
        <div class="card-panel red lighten-4 red-text text-darken-4" style="padding: 10px;">
             <i class="material-icons left tiny">error_outline</i><strong>Error processing JSON:</strong> {{ bulk_error }}
        </div>
        {% endif %}
        {% if bulk_success_count is not none and bulk_success_count > 0 %}
        <div class="card-panel green lighten-4 green-text text-darken-4" style="padding: 10px;">
             <i class="material-icons left tiny">check_circle_outline</i><strong>Success:</strong> Added {{ bulk_success_count }} server definitions from JSON. <a href="{{ url_for('ui_root') }}">Return to list</a>.
        </div>
        {% elif bulk_success_count is not none and bulk_success_count == 0 and not bulk_error %}
        <div class="card-panel orange lighten-4 orange-text text-darken-4" style="padding: 10px;">
             <i class="material-icons left tiny">info_outline</i><strong>Note:</strong> No new server definitions were added from JSON (they may already exist, JSON is empty/invalid, or contains errors).
        </div>
        {% endif %}

        <!-- JSON format hint -->
        <ul class="collapsible" style="margin-top: 15px; margin-bottom: 25px;">
            <li>
                <div class="collapsible-header"><i class="material-icons">info_outline</i>Valid JSON Format Examples</div>
                <div class="collapsible-body">
                     <p><strong>Format 1: Object with "mcpServers" key</strong></p>
                    <pre><code class="language-json" style="display: block; background: #f4f4f4; padding: 10px; border-radius: 3px;">{
  "mcpServers": {
    "my-tool-name": {
      "command": "npx",
      "args": ["some-package", "--port", "8081"],
      "env": {"API_KEY": "secret"}
    },
    "another-tool": {
      "type": "sse",
      "url": "http://localhost:8001/sse"
    }
  }
}</code></pre>
                    <p><strong>Format 2: Direct mapping "name": {config}</strong></p>
                    <pre><code class="language-json" style="display: block; background: #f4f4f4; padding: 10px; border-radius: 3px;">{
  "tool-alpha": {
    "command": "uvx",
    "args": ["alpha-server"]
  },
  "tool-beta": {
    "type": "streamable_http",
    "url": "http://service-beta/stream"
  }
}</code></pre>
                    <p><strong>Format 3: List of objects with "name" field</strong></p>
                     <pre><code class="language-json" style="display: block; background: #f4f4f4; padding: 10px; border-radius: 3px;">[
  {
    "name": "gamma-processor",
    "command": "/usr/local/bin/gamma",
    "args": ["--config", "/etc/gamma.conf"]
  },
  {
    "name": "delta-feed",
    "type": "sse",
    "url": "https://delta.example.com/feed"
  }
]</code></pre>
                     <p><strong>Note:</strong></p>
                     <ul>
                         <li>- Extra fields (<code>disabled</code>, <code>alwaysAllow</code>, etc.) will be ignored.</li>
                         <li>- Commands like <code>cmd /c npx ...</code> or <code>cmd /c uvx ...</code> will be automatically converted to <code>npx ...</code> and <code>uvx ...</code> when added.</li>
                     </ul>
                </div>
            </li>
        </ul>

        <!-- Bulk add form -->
        <form method="post" action="{{ url_for('ui_process_bulk_add') }}">

             <!-- Buttons and enable option -->
             <div class="row" style="margin-bottom: 25px;">
                <div class="col s12 m6 l7"> {# Buttons on the left #}
                     <button class="btn waves-effect waves-light blue darken-1" type="submit">
                         <i class="material-icons left">playlist_add</i>Add from JSON
                     </button>
                     <a href="{{ url_for('ui_root') }}" class="btn waves-effect waves-light grey lighten-1 black-text">
                          <i class="material-icons left">cancel</i>Cancel (to main)
                     </a>
                </div>
                <div class="col s12 m6 l5"> {# Switch on the right #}
                    <div class="switch" style="padding-top: 5px;"> {# Small padding for alignment #}
                        <label>
                            Add as disabled
                            <input type="checkbox" id="default_enabled" name="default_enabled" value="true">
                            <span class="lever"></span>
                            Add as enabled
                        </label>
                         <span class="helper-text" style="margin-left: -15px;">Will added servers be enabled immediately?</span> {# Adjusted margin #}
                    </div>
                </div>
             </div>

             <!-- JSON input field -->
             <div class="row">
                <div class="input-field col s12">
                     <i class="material-icons prefix">data_object</i>
                     <textarea id="configJsonStr" name="configJsonStr" class="materialize-textarea" style="height: 300px; font-family: monospace;" required placeholder='Paste your JSON here...'>{{ config_json_str if config_json_str else '' }}</textarea>
                     <label for="configJsonStr">MCP Servers Configuration (JSON)</label>
                </div>
            </div>
        </form>
    </div>
     <!-- ==================== End of Tab Content: Bulk Add ==================== -->

</div> {# End of .row for tabs and content #}

{% endblock %}