<!-- ================================================ -->
<!-- FILE: mcpo_control_panel/ui/templates/_bulk_add_preview.html -->
<!-- (Partial template for displaying bulk add analysis results) -->
<!-- ================================================ -->

{# Calculate counts for display #}
{% set num_valid = analysis.valid_new | length %}
{% set num_existing = analysis.existing | length %}
{% set num_invalid = analysis.invalid | length %}
{% set num_parsing_errors = parsing_errors | length %}

<style>
    /* Scoped styles for the preview partial */
    .preview-section { margin-bottom: 15px; }
    .preview-section h6 {
        font-size: 1.1rem;
        margin: 10px 0 8px 0;
        padding-bottom: 5px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
    }
    .preview-section h6 i.material-icons {
        margin-right: 8px;
        font-size: 1.2em; /* Slightly larger icon */
        vertical-align: middle; /* Align icon */
    }
    .preview-list { list-style-type: none; padding-left: 5px; margin: 0; } /* Removed extra left padding */
    .preview-list li {
        padding: 6px 0; /* Adjusted padding */
        border-bottom: 1px dotted #eeeeee;
        font-size: 0.95em;
        line-height: 1.5;
    }
    .preview-list li:last-child { border-bottom: none; }
    .preview-list code {
        background-color: rgba(0,0,0,0.07); /* Slightly darker code background */
        padding: 1px 4px;
        border-radius: 3px; /* More rounded corners */
        font-size: 0.9em; /* Slightly smaller code font */
    }
    .preview-list .error-reason {
        color: #c62828; /* Darker red */
        display: block;
        font-size: 0.9em;
        margin-left: 20px; /* Indent error reason */
        margin-top: 3px;
    }
    .preview-list .server-details {
        font-size: 0.9em; /* Smaller details font */
        color: #616161; /* Darker grey */
    }
    .preview-list .server-details span { margin-right: 10px; }
    .preview-list .server-details i.tiny {
        font-size: 1rem; /* Slightly larger tiny icons */
        vertical-align: text-bottom;
        margin-right: 2px;
    }

    .parsing-errors { margin-top: 15px; }
    .parsing-errors .card-panel { padding: 10px 15px; margin-bottom: 10px; } /* Adjusted padding */

    .confirmation-section {
        margin-top: 25px;
        padding-top: 15px;
        border-top: 1px solid #bdbdbd;
    }
    .confirmation-section .btn {
        margin-right: 10px; /* Space after button */
    }
    .confirmation-section .confirmation-note {
         margin-left: 15px;
         font-size: 0.9em;
         color: #757575; /* Grey */
    }

</style>

{# --- Display Parsing Errors First (if any) --- #}
{% if parsing_errors %}
<div class="parsing-errors">
    <h6><i class="material-icons red-text text-darken-2">warning</i>JSON Parsing/Extraction Errors:</h6>
    {% for error in parsing_errors %}
    <div class="card-panel red lighten-4 red-text text-darken-4">
        <i class="material-icons left tiny">error_outline</i>{{ error }}
    </div>
    {% endfor %}
</div>
{% endif %}


{# --- Section: Valid New Servers --- #}
{% if num_valid > 0 %}
<div class="preview-section">
    <h6 class="green-text text-darken-2"><i class="material-icons">check_circle</i>Ready to Add ({{ num_valid }})</h6>
    <ul class="preview-list">
        {% for server in analysis.valid_new %}
        <li>
            <strong>{{ server.name }}</strong>
            <div class="server-details">
                 <span><i class="material-icons tiny">settings_ethernet</i>Type: <code>{{ server.server_type }}</code></span>
                 {% if server.server_type == 'stdio' %}
                    <span><i class="material-icons tiny">terminal</i>Cmd: <code>{{ server.command | truncate(35) }}</code></span>
                    <span><i class="material-icons tiny">list</i>Args: <code>{{ server.args | length }}</code></span>
                    <span><i class="material-icons tiny">subtitles</i>Env: <code>{{ server.env_vars | length }}</code></span>
                 {% else %}
                     <span><i class="material-icons tiny">link</i>URL: <code>{{ server.url | truncate(45) }}</code></span>
                 {% endif %}
                 <span><i class="material-icons tiny">{% if server.is_enabled %}toggle_on{% else %}toggle_off{% endif %}</i>Enabled: <code>{{ 'Yes' if server.is_enabled else 'No' }}</code></span>
            </div>
        </li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{# --- Section: Existing Servers --- #}
{% if num_existing > 0 %}
<div class="preview-section">
    <h6 class="orange-text text-darken-2"><i class="material-icons">info</i>Already Exist ({{ num_existing }}) - Will be ignored</h6>
    <ul class="preview-list grey-text text-darken-1">
        {% for name in analysis.existing %}
        <li>{{ name }}</li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{# --- Section: Invalid Servers --- #}
{% if num_invalid > 0 %}
<div class="preview-section">
    <h6 class="red-text text-darken-2"><i class="material-icons">error</i>Invalid Entries ({{ num_invalid }}) - Cannot be added</h6>
    <ul class="preview-list">
        {% for item in analysis.invalid %}
        <li>
            <strong>{{ item.name if item.name else 'Unnamed Entry' }}</strong>
            <span class="error-reason"><i class="material-icons tiny left">arrow_right</i>{{ item.error }}</span>
            {# Optionally display item.data here if needed for debugging
            <pre style="font-size: 0.8em; margin-left: 20px;"><code>{{ item.data | tojson(indent=2) }}</code></pre>
            #}
        </li>
        {% endfor %}
    </ul>
</div>
{% endif %}

{# --- Summary and Confirmation Form --- #}
<div class="confirmation-section">
    {% if num_valid > 0 %}
        <p class="green-text text-darken-3" style="margin-bottom: 15px;">
            <i class="material-icons left tiny">playlist_add_check</i>Ready to add <strong>{{ num_valid }}</strong> new server definition(s). Review the lists above.
        </p>
        {# Form to confirm and actually add the servers #}
        <form id="bulk-confirm-form" method="post" action="{{ confirm_action_url }}">
            {# Hidden input containing the JSON string of valid server data #}
            <input type="hidden" name="valid_new_servers_json" value="{{ serialized_valid_servers | e }}">

            <button class="btn waves-effect waves-light green darken-2" type="submit">
                <i class="material-icons left">check</i>Confirm and Add {{ num_valid }} Server(s)
            </button>
            <span class="confirmation-note">
                (Existing and invalid entries shown above will be ignored)
            </span>
        </form>
    {% elif not parsing_errors %} {# Show message only if no parsing errors prevented analysis #}
        <p class="orange-text text-darken-3">
            <i class="material-icons left tiny">info_outline</i>No valid new server definitions found to add. Check the 'Already Exist' or 'Invalid Entries' lists above, or verify your input JSON format.
        </p>
    {% else %}
         <p class="red-text text-darken-3">
            <i class="material-icons left tiny">error</i>Cannot proceed due to JSON parsing/extraction errors listed above. Please fix the JSON and analyze again.
        </p>
    {% endif %}
</div>

{# Initialize tooltips within the loaded partial #}
<script>
    (function() {
        var tooltips = document.querySelectorAll('#bulk-preview-area .tooltipped');
        M.Tooltip.init(tooltips);
    })();
</script>