<!-- ================================================ -->
<!-- FILE: mcpo_control_panel/ui/templates/add_servers_page.html -->
<!-- (Redesigned with Tabs for Single vs Bulk Add) -->
<!-- ================================================ -->
{% extends "base.html" %}

{# Import the macro for the single server form #}
{% 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 head_extra %}
<style>
    /* Custom styles for tabs */
    .tabs {
        background-color: #f5f5f5; /* Light background for tab bar */
        border-bottom: 1px solid #e0e0e0;
    }
    .tabs .tab a {
        color: #00796b; /* Teal darken-2 for active tab text */
    }
    .tabs .tab a:hover, .tabs .tab a.active {
        color: #004d40; /* Teal darken-4 for hover/active */
        background-color: #e0f2f1; /* Very light teal background */
    }
    .tabs .indicator {
        background-color: #00796b; /* Teal indicator */
    }
    /* Ensure tab content has some padding */
    .tab-content {
        padding: 20px 10px; /* Add padding to tab content area */
    }

    /* Style for the bulk preview area */
    #bulk-preview-area {
        margin-top: 20px;
        padding: 15px;
        border: 1px dashed #bdbdbd; /* Dashed border */
        background-color: #f9f9f9; /* Slightly different background */
        border-radius: 4px;
        min-height: 100px; /* Minimum height */
        transition: border 0.3s ease, opacity 0.3s ease; /* Smooth transition */
    }
    /* Style during HTMX request */
    #bulk-preview-area.htmx-request {
         border-style: solid; /* Solid border during request */
         border-color: #90a4ae; /* Blue-grey border */
         opacity: 0.7;
     }
    /* Helper text positioning for textarea */
    .input-field textarea ~ .helper-text {
        margin-bottom: 10px;
    }
     /* Collapsible for JSON examples */
    .collapsible.json-examples {
        margin-top: 15px;
        margin-bottom: 25px;
        border: 1px solid #e0e0e0; /* Add border to collapsible */
    }
    .collapsible.json-examples .collapsible-header {
        background-color: #fafafa; /* Lighter header */
        border-bottom: 1px solid #e0e0e0;
    }
     .collapsible.json-examples .collapsible-body {
        background-color: #fff; /* White body */
        padding: 15px;
     }
    .collapsible.json-examples code {
        display: block;
        background: #f5f5f5;
        padding: 10px;
        border-radius: 3px;
        font-size: 0.9em;
    }
    .collapsible.json-examples p {
        margin-top: 0.5em;
        margin-bottom: 0.3em;
    }
    .collapsible.json-examples ul {
        margin-top: 0.5em;
        padding-left: 25px;
    }
</style>
{% endblock %}

{% block content %}

<div class="row">
    <div class="col s12">
        <!-- Tabs structure -->
        <ul class="tabs tabs-fixed-width z-depth-1">
            {# Assign IDs to tabs for potential linking or state management #}
            <li class="tab col s6"><a href="#tab-single-add" class="active">Add Single Server</a></li>
            <li class="tab col s6"><a href="#tab-bulk-add">Bulk Add (JSON)</a></li>
        </ul>
    </div>

    <!-- ==================== Tab Content: Add SINGLE server ==================== -->
    <div id="tab-single-add" class="col s12 tab-content">
        {% 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" style="margin-bottom: 15px;"><i class="material-icons tiny left">info_outline</i>First select "Server type" to see the corresponding fields (Command/Arguments or URL).</p>

        {# Render the form using the macro #}
        {{ 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 from JSON ==================== -->
    <div id="tab-bulk-add" class="col s12 tab-content">

         <!-- JSON format hint (Collapsible) -->
         <ul class="collapsible json-examples">
            <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>{
  "mcpServers": {
    "my-tool": { "command": "npx", "args": ["pkg", "--arg"] },
    "sse-tool": { "type": "sse", "url": "http://..." }
  }
}</code></pre>
                    <p><strong>Format 2: Direct mapping "name": {config}</strong></p>
                    <pre><code>{
  "tool-alpha": { "command": "uvx", "args": ["server-a"] },
  "stream-beta": { "type": "streamable_http", "url": "http://..." }
}</code></pre>
                    <p><strong>Format 3: List of objects with "name" field</strong></p>
                     <pre><code>[
  { "name": "gamma", "command": "/bin/gamma", "args": ["--conf"] },
  { "name": "delta", "type": "sse", "url": "https://..." }
]</code></pre>
                     <p><strong>Format 4: Single object with "name" field</strong> (Useful for single server import/export)</p>
                     <pre><code>{
  "name": "epsilon",
  "command": "docker",
  "args": ["run", "my-image"],
  "env_vars": {"VAR": "value"},
  "server_type": "stdio",
  "is_enabled": false
}</code></pre>
                     <p><strong>Notes:</strong></p>
                     <ul>
                         <li>- Server names must be unique.</li>
                         <li>- `command`/`args`/`env` are used for `stdio`. `url`/`type` for `sse`/`streamable_http`.</li>
                         <li>- `env_vars` in Format 4 maps to `env` in generated config.</li>
                         <li>- Windows commands (`cmd /c ...`) are adapted during analysis.</li>
                         <li>- Extra fields are ignored.</li>
                     </ul>
                </div>
            </li>
        </ul>

        <!-- Bulk Add Form (for Analysis) -->
        <form id="bulk-analyze-form"
              hx-post="{{ bulk_analyze_action_url }}"
              hx-target="#bulk-preview-area"
              hx-swap="innerHTML"
              hx-indicator="#bulk-analyze-spinner"> {# Spinner displayed during analysis #}

            <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: 200px; font-family: monospace;" required placeholder='Paste your JSON here...'></textarea>
                    <label for="configJsonStr">MCP Servers Configuration (JSON)</label>
                     <span class="helper-text">Paste JSON content to analyze and preview before adding.</span>
                </div>
            </div>

            {# Row for Analyze button, Spinner, and Enable Switch #}
            <div class="row" style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px;">
                {# Analyze Button and Spinner #}
                <div style="display: flex; align-items: center; gap: 15px;">
                    <button class="btn waves-effect waves-light blue darken-1" type="submit">
                        <i class="material-icons left">pageview</i>Analyze JSON
                    </button>
                     <div id="bulk-analyze-spinner" class="htmx-indicator preloader-wrapper small" style="opacity:0; transition: opacity 0.3s ease; width: 28px; height: 28px;"> {# Initially hidden #}
                        <div class="spinner-layer spinner-blue-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div>
                     </div>
                </div>
                {# Enable Switch #}
                <div class="switch" style="padding-top: 5px;">
                    <label>
                        Add as disabled
                        <input type="checkbox" id="default_enabled" name="default_enabled" value="true">
                        <span class="lever"></span>
                        Add as enabled
                    </label>
                </div>
            </div>
        </form> {# End of bulk analysis form #}

        <!-- Preview Area (Target for HTMX) -->
        <div id="bulk-preview-area">
            {# Initial placeholder text #}
            <p class="grey-text center-align" style="padding: 20px 0;">
                Analysis results will appear here after you click "Analyze JSON".
            </p>
            {# The content from _bulk_add_preview.html will be loaded here #}
         </div>

    </div>
     <!-- ==================== End of Tab Content: Bulk Add ==================== -->

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

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Materialize Tabs
        var tabs = document.querySelectorAll('.tabs');
        if (tabs.length > 0) {
            M.Tabs.init(tabs[0]); // Assuming only one set of tabs on the page
        }

        // Initialize Materialize Collapsible for JSON examples
         var collapsibles = document.querySelectorAll('.collapsible');
         if (collapsibles.length > 0) {
             M.Collapsible.init(collapsibles);
         }

        // Initialize other components potentially used by the single-add form macro
        var selects = document.querySelectorAll('select');
        if (selects.length > 0) {
            M.FormSelect.init(selects);
        }
        M.updateTextFields(); // Ensure labels float correctly if data is pre-filled (e.g., on error)
    });
</script>

{% endblock %}