admin_settings.html

{% extends "base.html" %}
{% block title %}
    Admin Settings - {{ app_settings.app_title }}
{% endblock %}

{% block head %}
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplemde/dist/simplemde.min.css">
     LOCAL VERSION BELOW
    -->
     <link rel="stylesheet" href="/static/css/simplemde.min.css">

    <style>
        /* Style for the color swatch in the table */
        .color-swatch-container {
            display: flex;
            align-items: center;
        }
        .color-input-swatch {
            display: inline-block;
            width: 25px;
            height: 25px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            vertical-align: middle;
            margin-right: 8px;
        }
        /* Hide the actual color input visually but keep it functional */
        .classification-color-input {
            opacity: 0;
            width: 0;
            height: 0;
            padding: 0;
            border: none;
            position: absolute;
        }
         /* Ensure table cells have consistent vertical alignment */
        #classification-categories-tbody td {
            vertical-align: middle;
        }
        
        /* Ensure external links table cells have consistent vertical alignment */
        #external-links-tbody td {
            vertical-align: middle;
        }
        
        /* Floating Save Button */
        .floating-save-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1050;
            padding: 12px 20px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 50px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            min-width: 160px;
        }
        
        .floating-save-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }
        
        .floating-save-btn:active {
            transform: translateY(0);
        }
        
        /* Ensure the button is visible above other content */
        .floating-save-btn {
            backdrop-filter: blur(10px);
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .floating-save-btn {
                bottom: 15px;
                right: 15px;
                padding: 10px 16px;
                font-size: 14px;
                min-width: 140px;
            }
        }
    </style>
{% endblock %}

{% block content %}
<div id="index-warning-user" class="alert alert-warning" style="display:none;">
    <strong>⚠️ User-index schema mismatch:</strong>
    Missing fields: <span id="missing-fields-user"></span>
    <button id="fix-user-index-btn" class="btn btn-sm btn-primary ms-2">Add missing user-fields</button>
</div>
  
<div id="index-warning-group" class="alert alert-warning" style="display:none;">
    <strong>⚠️ Group-index schema mismatch:</strong>
    Missing fields: <span id="missing-fields-group"></span>
    <button id="fix-group-index-btn" class="btn btn-sm btn-primary ms-2">Add missing group-fields</button>
</div>

<div id="index-warning-public" class="alert alert-warning" style="display:none;">
    <strong>⚠️ Public-index schema mismatch:</strong>
    Missing fields: <span id="missing-fields-public"></span>
    <button id="fix-public-index-btn" class="btn btn-sm btn-primary ms-2">Add missing public-fields</button>
</div>
  
<!-- Flash messages display section -->
{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    {% for category, message in messages %}
      <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endfor %}
  {% endif %}
{% endwith %}

<div class="container">
    <h2>Admin Settings</h2>
    <form method="post" enctype="multipart/form-data" id="admin-settings-form" style="padding-bottom:80px;">
        <p class="text-muted">Use this form to configure the administrative settings for your application.</p>
        <p class="text-muted">
            Version: {{ config['VERSION'] }}
            {% if update_available %}
                <span class="ms-2 badge bg-warning text-dark align-middle"> 
                    New version available, v{{ latest_version }}.
                    <a href="{{ download_url }}" target="_blank" rel="noopener noreferrer" class="link-primary text-decoration-underline">Download here</a>.
                </span>
            {% endif %}
        </p>
        <div class="d-flex align-items-center mb-3">
            <button type="button" class="btn btn-outline-secondary mt-3" id="launch-walkthrough-btn">
                <i class="bi bi-signpost-split"></i> Start Setup Walkthrough
            </button>
        </div>

        <!-- Settings Walkthrough Inline Container -->
        <div id="settings-walkthrough-container" class="card mb-4 shadow-sm" style="display: none;">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Setup Walkthrough</h5>
                <button type="button" class="btn-close btn-close-white" id="close-walkthrough-btn" aria-label="Close"></button>
            </div>
            <div class="card-body">
                <!-- Progress bar -->
                <div class="progress mb-4" style="height: 8px;">
                    <div id="walkthrough-progress" class="progress-bar bg-primary" role="progressbar" style="width: 8%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="12"></div>
                </div>

                <!-- Step content area -->
                <div id="walkthrough-step-content">
                    <!-- Step 1: App Title and Logo -->
                    <div id="walkthrough-step-1" class="walkthrough-step">
                        <h4>1. Configure Application Basics</h4>
                        <p class="text-muted">Let's set up your Simple Chat instance. Let's start with some basic configuration options.</p>
                        
                        <div class="alert alert-info">
                            <strong>Optional:</strong> Configure your application title and logo.
                        </div>
                        
                        <ul class="list-group mb-4">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Application Title</span>
                                <span class="badge bg-secondary">Optional</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Custom Logos (Light & Dark Mode)</span>
                                <span class="badge bg-secondary">Optional</span>
                            </li>
                        </ul>
                        
                        <p>Use the <strong>General</strong> tab to configure these settings.</p>
                    </div>

                    <!-- Step 2: Configure GPT Settings -->
                    <div id="walkthrough-step-2" class="walkthrough-step" style="display: none;">
                        <h4>2. Configure GPT API Settings</h4>
                        <p class="text-muted">Configure the Azure OpenAI GPT API settings.</p>
                        
                        <div class="alert alert-danger">
                            <strong>Required:</strong> GPT API configuration is required for Simple Chat to function.
                        </div>
                        
                        <ul class="list-group mb-4">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>GPT Endpoint</span>
                                <span class="badge bg-danger">Required</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Authentication</span>
                                <span class="badge bg-danger">Required</span>
                            </li>
                        </ul>
                        
                        <div class="alert alert-info">
                            <strong>API Management Option:</strong> You can configure a direct connection to Azure OpenAI or use Azure API Management (APIM).
                            <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="APIM provides an additional layer for security, monitoring, and rate limiting. Use APIM when you need centralized API governance or want to isolate direct access to your Azure OpenAI resources."></i>
                        </div>
                        
                        <p>Configure GPT API settings in the <strong>GPT</strong> tab.</p>
                    </div>

                    <!-- Step 3: Select GPT Models -->
                    <div id="walkthrough-step-3" class="walkthrough-step" style="display: none;">
                        <h4>3. Select GPT Models</h4>
                        <p class="text-muted">Now that you've configured the GPT API settings, fetch and select the GPT models to use.</p>
                        
                        <div class="alert alert-danger">
                            <strong>Required:</strong> Select at least one GPT model for users to use.
                        </div>
                        
                        <p class="mb-4">
                            <ol>
                                <li id="fetch-models-step">Click the <strong>"Fetch GPT Models"</strong> button to retrieve available models</li>
                                <li>Select one or more models from the list</li>
                            </ol>
                        </p>
                        
                        <div class="alert alert-info" id="apim-model-note" style="display: none;">
                            <strong>APIM Configuration:</strong> When using APIM, enter model names directly in the "Azure APIM Deployment" field (e.g., "gpt-4o, gpt-35-turbo"). Fetching models is not available with APIM.
                        </div>
                        
                        <div class="alert alert-info">
                            <strong>Note:</strong> Ensure the Service Principal has been assigned the Cognitive Service OpenAI User role on the Azure OpenAI endpoint.
                        </div>
                    </div>

                    <!-- Step 4: Workspaces -->
                    <div id="walkthrough-step-4" class="walkthrough-step" style="display: none;">
                        <h4>4. Configure Workspaces</h4>
                        <p class="text-muted">Enable workspace features for your users.</p>
                        
                        <div class="alert alert-info">
                            <strong>Optional:</strong> Enable personal and group workspaces for document management.
                        </div>
                        
                        <ul class="list-group mb-4">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Personal Workspaces</span>
                                <span class="badge bg-secondary">Optional</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Group Workspaces</span>
                                <span class="badge bg-secondary">Optional</span>
                            </li>
                        </ul>
                        
                        <p class="alert alert-warning">
                            <strong>Important:</strong> If you enable either workspace feature, you will need to configure additional services in the next steps.
                        </p>
                    </div>

                    <!-- Step 5: Embedding Settings -->
                    <div id="walkthrough-step-5" class="walkthrough-step" style="display: none;">
                        <h4>5. Configure Embedding API Settings</h4>
                        <p class="text-muted">Configure the embedding service for document processing.</p>
                        
                        <div id="embedding-requirement-alert" class="alert alert-danger">
                            <strong>Required:</strong> Embedding API configuration is required if workspaces are enabled.
                        </div>
                        
                        <ul class="list-group mb-4">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Embedding Endpoint</span>
                                <span id="embedding-required-badge" class="badge bg-danger">Required</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Authentication</span>
                                <span id="embedding-auth-badge" class="badge bg-danger">Required</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Fetch Models</span>
                                <span id="fetch-models-badge" class="badge bg-danger">Required</span>
                            </li>
                        </ul>
                        
                        <div class="alert alert-info">
                            <strong>API Management Option:</strong> You can configure a direct connection to Azure OpenAI or use Azure API Management (APIM).
                            <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="APIM provides an additional layer for security, monitoring, and rate limiting. APIM requires manual model configuration as the fetch functionality is not available."></i>
                        </div>
                        
                        <div class="alert alert-info">
                            <strong>Note:</strong> Ensure the Service Principal has been assigned the Cognitive Service OpenAI User role on the Azure OpenAI endpoint.
                        </div>
                    </div>

                    <!-- Step 6: AI Search Settings -->
                    <div id="walkthrough-step-6" class="walkthrough-step" style="display: none;">
                        <h4>6. Configure Azure AI Search</h4>
                        <p class="text-muted">Configure Azure AI Search for document indexing.</p>
                        
                        <div id="ai-search-requirement-alert" class="alert alert-danger">
                            <strong>Required:</strong> Azure AI Search is required if workspaces are enabled.
                        </div>
                        
                        <ul class="list-group mb-4">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>AI Search Endpoint</span>
                                <span id="search-endpoint-badge" class="badge bg-danger">Required</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Authentication</span>
                                <span id="search-auth-badge" class="badge bg-danger">Required</span>
                            </li>
                        </ul>
                        
                        <div class="alert alert-info">
                            <strong>API Management Option:</strong> You can configure a direct connection to Azure AI Search or use Azure API Management (APIM).
                            <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="APIM provides an additional layer for security, monitoring, and rate limiting. Use APIM when you need centralized API governance or want to isolate direct access to your Azure resources."></i>
                        </div>
                    </div>

                    <!-- Step 7: Document Intelligence -->
                    <div id="walkthrough-step-7" class="walkthrough-step" style="display: none;">
                        <h4>7. Configure Document Intelligence</h4>
                        <p class="text-muted">Configure Azure Document Intelligence for processing documents.</p>
                        
                        <div id="doc-intelligence-requirement-alert" class="alert alert-danger">
                            <strong>Required:</strong> Document Intelligence is required if workspaces are enabled.
                        </div>
                        
                        <ul class="list-group mb-4">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Document Intelligence Endpoint</span>
                                <span id="doc-endpoint-badge" class="badge bg-danger">Required</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Authentication</span>
                                <span id="doc-auth-badge" class="badge bg-danger">Required</span>
                            </li>
                        </ul>
                        
                        <div class="alert alert-info">
                            <strong>API Management Option:</strong> You can configure a direct connection to Document Intelligence or use Azure API Management (APIM).
                            <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="APIM provides an additional layer for security, monitoring, and rate limiting. Use APIM when you need centralized API governance or want to isolate direct access to your Azure resources."></i>
                        </div>
                    </div>

                    <!-- Step 8: Video File Support -->
                    <div id="walkthrough-step-8" class="walkthrough-step" style="display: none;">
                        <h4>8. Enable Video File Support</h4>
                        <p class="text-muted">Configure support for video file processing.</p>
                        
                        <div id="video-support-requirement-alert" class="alert alert-danger">
                            <strong>Required:</strong> Video support configuration is required if workspaces are enabled.
                        </div>
                        
                        <p class="mb-3">Use the <strong>Video Support</strong> settings in the Workspaces tab to enable and configure video file processing.</p>
                        
                        <ul class="list-group mb-4">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Video Indexer Endpoint</span>
                                <span id="video-endpoint-badge" class="badge bg-danger">Required</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Video Indexer API Key</span>
                                <span class="badge bg-secondary">Optional</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Step 9: Audio File Support -->
                    <div id="walkthrough-step-9" class="walkthrough-step" style="display: none;">
                        <h4>9. Enable Audio File Support</h4>
                        <p class="text-muted">Configure support for audio file processing.</p>
                        
                        <div id="audio-support-requirement-alert" class="alert alert-danger">
                            <strong>Required:</strong> Audio support configuration is required if workspaces are enabled.
                        </div>
                        
                        <p class="mb-3">Use the <strong>Audio Support</strong> settings in the Workspaces tab to enable and configure audio file processing.</p>
                        
                        <ul class="list-group mb-4">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Speech Service Endpoint</span>
                                <span id="audio-endpoint-badge" class="badge bg-danger">Required</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Speech Service Key</span>
                                <span id="audio-key-badge" class="badge bg-danger">Required</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Step 10: Content Safety -->
                    <div id="walkthrough-step-10" class="walkthrough-step" style="display: none;">
                        <h4>10. Content Safety Settings</h4>
                        <p class="text-muted">Configure content safety features.</p>
                        
                        <div class="alert alert-info">
                            <strong>Optional:</strong> Enable content safety features to filter inappropriate content.
                        </div>
                    </div>

                    <!-- Step 11: User Feedback and Archiving -->
                    <div id="walkthrough-step-11" class="walkthrough-step" style="display: none;">
                        <h4>11. User Feedback and Conversation Archiving</h4>
                        <p class="text-muted">Configure user feedback and conversation archiving features.</p>
                        
                        <div class="alert alert-info">
                            <strong>Optional:</strong> Enable user feedback and conversation archiving.
                        </div>
                        
                        <ul class="list-group mb-4">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>User Feedback</span>
                                <span class="badge bg-secondary">Optional</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Conversation Archiving</span>
                                <span class="badge bg-secondary">Optional</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Step 12: Enhanced Citations and Image Generation -->
                    <div id="walkthrough-step-12" class="walkthrough-step" style="display: none;">
                        <h4>12. Enhanced Citations and Image Generation</h4>
                        <p class="text-muted">Configure additional features.</p>
                        
                        <div class="alert alert-info">
                            <strong>Optional:</strong> Enable enhanced citations and image generation features.
                        </div>
                        
                        <ul class="list-group mb-4">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Enhanced Citations</span>
                                <span class="badge bg-secondary">Optional</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span>Image Generation</span>
                                <span class="badge bg-secondary">Optional</span>
                            </li>
                        </ul>
                        
                        <div class="alert alert-success">
                            <strong>Congratulations!</strong> You've completed the initial setup walkthrough. You can now continue to configure your Simple Chat instance in detail.
                        </div>
                    </div>
                </div>

                <!-- Navigation buttons -->
                <div class="mt-3 d-flex justify-content-between">
                    <button type="button" class="btn btn-secondary" id="walkthrough-prev-btn">Previous</button>
                    <div>
                        <button type="button" class="btn btn-primary" id="walkthrough-next-btn">Next</button>
                        <button type="button" class="btn btn-success" id="walkthrough-finish-btn" style="display: none;">Finish Setup and Save</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Hide tabs when left navigation is enabled -->
        {% set nav_layout = user_settings.get('settings', {}).get('navLayout') %}
        {% if not (nav_layout == 'sidebar' or (not nav_layout and app_settings.enable_left_nav_default)) %}
        <ul class="nav nav-tabs" id="adminSettingsTab" role="tablist">
            <!-- Core Settings -->
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general"
                    type="button" role="tab" aria-controls="general" aria-selected="true">
                    General
                </button>
            </li>
            
            <!-- AI Models Group -->
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="ai-models-tab" data-bs-toggle="tab" data-bs-target="#ai-models"
                    type="button" role="tab" aria-controls="ai-models" aria-selected="false">
                    AI Models
                </button>
            </li>
            
            <!-- Content Processing Group -->
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="search-extract-tab" data-bs-toggle="tab" data-bs-target="#search-extract"
                    type="button" role="tab" aria-controls="search-extract" aria-selected="false">
                    Search and Extract
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="workspaces-tab" data-bs-toggle="tab" data-bs-target="#workspaces" type="button"
                    role="tab" aria-controls="workspaces" aria-selected="false">
                    Workspaces
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="citation-tab" data-bs-toggle="tab" data-bs-target="#citation"
                    type="button" role="tab" aria-controls="citation" aria-selected="false">
                    Citations
                </button>
            </li>
            
            <!-- Security -->
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="safety-tab" data-bs-toggle="tab" data-bs-target="#safety"
                    type="button" role="tab" aria-controls="safety" aria-selected="false">
                    Safety
                </button>
            </li>
            
            <!-- User Features -->
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="agents-tab" data-bs-toggle="tab" data-bs-target="#agents" type="button" role="tab" aria-controls="agents" aria-selected="false">
                    Agents
                </button>
            </li>
            
            <!-- System Administration -->
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="scale-tab" data-bs-toggle="tab" data-bs-target="#scale"
                    type="button" role="tab" aria-controls="scale" aria-selected="false">
                    Scale
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="logging-tab" data-bs-toggle="tab" data-bs-target="#logging" type="button" role="tab" aria-controls="logging" aria-selected="false">
                    Logging
                </button>
            </li>
        </ul>
        {% endif %}
        
        <div class="tab-content mt-3" id="adminSettingsTabContent">
            <!-- Agents Tab Content (Consolidated: Agents + Actions) -->
            <div class="tab-pane fade" id="agents" role="tabpanel" aria-labelledby="agents-tab">
                
                <p class="text-muted">
                    Configure AI agents and actions for enhanced functionality. Agents provide AI-driven task automation while Actions extend functionality with custom tools and integrations.
                </p>
                
                <div class="alert alert-warning mb-3" role="alert">
                    <strong>Note:</strong> All changes to global agents and actions require a restart of the web app to take effect.
                </div>

                <!-- Agents Configuration Section -->
                <div class="card p-3 mb-4" id="agents-configuration">
                    <h5 class="card-title">
                        <i class="bi bi-robot me-2"></i>Agents Configuration
                    </h5>
                    <p class="text-muted small">
                        Configure AI agents powered by Semantic Kernel for task automation and orchestration.
                    </p>
                <div class="mb-3">
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" role="switch" id="toggle-enable-agents-agents" name="enable_semantic_kernel" {% if settings.enable_semantic_kernel %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="toggle-enable-agents-agents">Enable Agents</label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enable the agents system powered by Semantic Kernel for AI-driven task automation and orchestration."></i>
                    </div>
                    <div id="per-user-sk-restart-msg" class="text-muted small mb-2" style="display:none;">Requires a restart to take effect.</div>
                </div>
                {% if not settings.enable_semantic_kernel %}
                    <div class="alert alert-info">
                        <strong>Agents UI is not available while agents are disabled.</strong>
                    </div>
                {% else %}
                    <div>
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" role="switch" id="toggle-per-user-sk" name="per_user_semantic_kernel" {% if settings.per_user_semantic_kernel %}checked{% endif %} {% if not settings.enable_semantic_kernel %}disabled{% endif %}>
                            <label class="form-check-label ms-2" for="toggle-per-user-sk">Workspace Mode (workspace-specific agents/plugins and disables global configuration)</label>
                            <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="If enabled, each user gets their own agent/plugin set. If disabled, all users share the same global set."></i>
                        </div>
                        {% if settings.per_user_semantic_kernel %}
                            <!-- Agent Feature Flags -->
                            <div class="card p-3 mb-3" id="agent-toggles-card">
                                <h6 class="mb-2">Workspace Feature Toggles</h6>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-allow-user-agents" name="allow_user_agents" {% if settings.allow_user_agents %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-allow-user-agents">Allow User Agents</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow users to create and manage their own workspace-level agents for personal use and customization."></i>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-allow-group-agents" name="allow_group_agents" {% if settings.allow_group_agents %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-allow-group-agents">Allow Group Agents</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow users to create and manage group-level agents that can be shared within workgroups and teams."></i>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-allow-user-custom-agent-endpoints" name="allow_user_custom_agent_endpoints" {% if settings.allow_user_custom_agent_endpoints %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-allow-user-custom-agent-endpoints">Allow User Custom Agent Endpoints</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow users to configure custom API endpoints for their personal agents to connect to external services and models."></i>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-allow-group-custom-agent-endpoints" name="allow_group_custom_agent_endpoints" {% if settings.allow_group_custom_agent_endpoints %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-allow-group-custom-agent-endpoints">Allow Group Custom Agent Endpoints</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow users to configure custom API endpoints for group-level agents to connect to shared external services and models."></i>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-merge-global-sk" name="merge_global_semantic_kernel_with_workspace" {% if settings.merge_global_semantic_kernel_with_workspace %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-merge-global-sk">Merge Global Agents/Plugins into Workspace</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="If enabled, workspace agents/plugins will include global ones as well."></i>
                                </div>
                            </div>
                            <!-- End Agent Feature Flags -->
                            
                        {% endif %}
                        <!-- Orchestration Settings Card -->
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4>Agent Orchestration Settings</h4>
                        </div>
                        <div class="card p-3 mb-3">
                            <p class="text-muted mb-1">Configure how the chat system orchestrates agents (single or multi-agent group chat).</p>
                            <div class="mb-3">
                                <label for="orchestration_type" class="form-label">Orchestration Type</label>
                                <select class="form-select" id="orchestration_type" name="orchestration_type"></select>
                            </div>
                            <div class="mb-3" id="max_rounds_per_agent_group" style="display:none;">
                                <label for="max_rounds_per_agent" class="form-label">Max Rounds Per Agent (Group Chat)</label>
                                <input type="number" class="form-control" id="max_rounds_per_agent" name="max_rounds_per_agent" min="1" value="1">
                            </div>
                            <button type="button" class="btn btn-primary" id="save-orchestration-settings-btn">Save Orchestration Settings</button>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4>Global  Agents</h4>
                            <button type="button" class="btn btn-primary" id="add-agent-btn">Add Agent</button>
                        </div>
                        <div class="mb-3 d-flex align-items-center">
                            {% if settings.orchestration_type == "default_agent" %}
                                <label for="default-agent-select" class="form-label me-2 mb-0">Selected Agent:</label>
                            {% else %}
                                <label for="default-agent-select" class="form-label me-2 mb-0">Orchestrator Agent:</label>
                            {% endif %}
                            <select id="default-agent-select" class="form-select w-auto" style="min-width:200px;"></select>
                            <span id="default-agent-select-msg" class="ms-2 text-muted small"></span>
                        </div>
                        <table class="table table-bordered" id="agents-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Display Name</th>
                                    <th>Description</th>
                                    {% if settings.orchestration_type == "default_agent" %}
                                        <th>Selected Agent</th>
                                    {% else %}
                                        <th>Orchestrator Agent</th>
                                    {% endif %}
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="agents-table-body"></tbody>
                        </table>
                    </div>
                {% endif %}
                </div>

                <!-- Actions Configuration Section -->
                <div class="card p-3 mb-4" id="actions-configuration">
                    <h5 class="card-title">
                        <i class="bi bi-plugin me-2"></i>Actions Configuration
                    </h5>
                    <p class="text-muted small">
                        Configure custom actions and tools to extend functionality with integrations and specialized capabilities.
                    </p>

                    {% if not settings.enable_semantic_kernel %}
                        <div class="alert alert-info">
                            <strong>Actions are not available while agents are disabled.</strong> Enable agents above to configure actions.
                        </div>
                    {% else %}
                        <div>
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6>Global Actions</h6>
                                <button type="button" class="btn btn-primary btn-sm" id="add-plugin-btn">Add Action</button>
                            </div>
                            {% if settings.per_user_semantic_kernel %}
                            <!-- Action Feature Flags -->
                                <div class="card p-3 mb-3" id="plugin-feature-toggles">
                                    <h6 class="mb-2">Workspace Action Feature Toggles</h6>
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" role="switch" id="toggle-allow-user-plugins" name="allow_user_plugins" {% if settings.allow_user_plugins %}checked{% endif %}>
                                        <label class="form-check-label ms-2" for="toggle-allow-user-plugins">Allow User Actions</label>
                                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow users to create and manage their own workspace-level actions/plugins for personal use."></i>
                                    </div>
                                    <div class="form-check form-switch mb-2">
                                        <input class="form-check-input" type="checkbox" role="switch" id="toggle-allow-group-plugins" name="allow_group_plugins" {% if settings.allow_group_plugins %}checked{% endif %}>
                                        <label class="form-check-label ms-2" for="toggle-allow-group-plugins">Allow Group Actions</label>
                                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow users to create and manage group-level actions/plugins that can be shared within workgroups."></i>
                                    </div>
                                </div>
                            {% endif %}
                            
                            <!-- Core Plugin Toggles -->
                            <div class="card p-3 mb-3" id="core-plugin-toggles">
                                <h6 class="mb-2">Core Action Toggles</h6>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-time-plugin" name="enable_time_plugin" {% if settings.enable_time_plugin %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-time-plugin">Enable Time Action</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enables agents to get current date, time, and perform time-related calculations and conversions."></i>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-http-plugin" name="enable_http_plugin" {% if settings.enable_http_plugin %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-http-plugin">Enable HTTP Action</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enables agents to make HTTP requests to websites for data retrieval and integration."></i>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-wait-plugin" name="enable_wait_plugin" {% if settings.enable_wait_plugin %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-wait-plugin">Enable Wait Action</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enables agents to pause execution for specified time periods, useful for delays and timing control in workflows."></i>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-math-plugin" name="enable_math_plugin" {% if settings.enable_math_plugin %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-math-plugin">Enable Math Action</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enables agents to perform mathematical calculations, solve equations, and handle complex mathematical operations."></i>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-text-plugin" name="enable_text_plugin" {% if settings.enable_text_plugin %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-text-plugin">Enable Text Action</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enables agents to perform text processing operations like formatting, validation, and manipulation of strings and text content."></i>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-default-embedding-model-plugin" name="enable_default_embedding_model_plugin" {% if settings.enable_default_embedding_model_plugin %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-default-embedding-model-plugin">Enable Default Embedding Model Action</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enables agents to access and use the default embedding model for text similarity and vector operations."></i>
                                </div>
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" role="switch" id="toggle-fact-memory-plugin" name="enable_fact_memory_plugin" {% if settings.enable_fact_memory_plugin %}checked{% endif %}>
                                    <label class="form-check-label ms-2" for="toggle-fact-memory-plugin">Enable Fact Memory Action</label>
                                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enables agents to store and retrieve facts and information across conversations for improved memory and context retention."></i>
                                </div>
                            </div>
                            <table class="table table-bordered" id="plugins-table">
                                <thead>
                                    <tr>
                                        <th>Display Name</th>
                                        <th>Description</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="admin-plugins-table-body"></tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>


            <!-- Logging Tab Content -->
            <div class="tab-pane fade" id="logging" role="tabpanel" aria-labelledby="logging-tab">
                <p class="text-muted">
                    Configure logging settings for monitoring, debugging, and auditing purposes. These settings control various types of logging throughout the application including application insights, debug messages, and file processing events.
                </p>
                
                <div class="card p-3 mb-3" id="application-insights-section">
                    <h5>
                        <i class="bi bi-graph-up me-2"></i>Application Insights Logging
                    </h5>
                    <p class="text-muted">Enable global logging to Application Insights for all agents and orchestration events.</p>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" role="switch" id="enable_appinsights_global_logging" name="enable_appinsights_global_logging" {% if settings.enable_appinsights_global_logging %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="enable_appinsights_global_logging">
                            Enable Application Insights Global Logging
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Toggle to enable or disable global logging to Application Insights for all agents and orchestration events."></i>
                    </div>
                    <div class="alert alert-warning mt-3" role="alert">
                        <strong>Note:</strong> Changing this setting requires an application restart to take effect.
                    </div>
                </div>
                
                <div class="card p-3 mb-3" id="opentelemetry-section">
                    <h5>
                        <i class="bi bi-sliders me-2"></i>OpenTelemetry Configuration
                    </h5>
                    <p class="text-muted">Fine-tune telemetry collection, sampling, and instrumentation for Azure Monitor Application Insights.</p>
                    
                    <!-- Service Name -->
                    <div class="mb-3">
                        <label for="otel_service_name" class="form-label fw-bold">Service Name</label>
                        <input type="text" class="form-control" id="otel_service_name" name="otel_service_name" value="{{ settings.otel_service_name }}" placeholder="simplechat">
                        <small class="form-text text-muted">Logical service name for telemetry data. Used to distinguish between multiple deployments (e.g., "simplechat-production").</small>
                    </div>
                    
                    <!-- Traces Sampler -->
                    <div class="mb-3">
                        <label for="otel_traces_sampler" class="form-label fw-bold">Traces Sampler</label>
                        <select class="form-select" id="otel_traces_sampler" name="otel_traces_sampler">
                            <option value="always_on" {% if settings.otel_traces_sampler == 'always_on' %}selected{% endif %}>Always On (100% sampling)</option>
                            <option value="always_off" {% if settings.otel_traces_sampler == 'always_off' %}selected{% endif %}>Always Off (0% sampling)</option>
                            <option value="traceidratio" {% if settings.otel_traces_sampler == 'traceidratio' %}selected{% endif %}>Trace ID Ratio (percentage-based)</option>
                            <option value="parentbased_always_on" {% if settings.otel_traces_sampler == 'parentbased_always_on' %}selected{% endif %}>Parent-based Always On (default)</option>
                            <option value="parentbased_always_off" {% if settings.otel_traces_sampler == 'parentbased_always_off' %}selected{% endif %}>Parent-based Always Off</option>
                            <option value="parentbased_traceidratio" {% if settings.otel_traces_sampler == 'parentbased_traceidratio' %}selected{% endif %}>Parent-based Trace ID Ratio</option>
                        </select>
                        <small class="form-text text-muted">Controls what percentage of traces are collected. Use ratio-based samplers to reduce costs in high-traffic environments.</small>
                    </div>
                    
                    <!-- Traces Sampler Argument -->
                    <div class="mb-3">
                        <label for="otel_traces_sampler_arg" class="form-label fw-bold">Traces Sampler Argument (Ratio)</label>
                        <input type="text" class="form-control" id="otel_traces_sampler_arg" name="otel_traces_sampler_arg" value="{{ settings.otel_traces_sampler_arg }}" placeholder="1.0">
                        <small class="form-text text-muted">Sampling ratio (0.0 to 1.0). For example, 0.1 = 10% sampling, 1.0 = 100% sampling. Used with ratio-based samplers.</small>
                    </div>
                    
                    <!-- Flask Excluded URLs -->
                    <div class="mb-3">
                        <label for="otel_flask_excluded_urls" class="form-label fw-bold">Flask Excluded URLs</label>
                        <input type="text" class="form-control" id="otel_flask_excluded_urls" name="otel_flask_excluded_urls" value="{{ settings.otel_flask_excluded_urls }}" placeholder="healthcheck,/health,/external/health">
                        <small class="form-text text-muted">Comma-separated regex patterns for URLs to exclude from instrumentation. Reduces noise and costs by excluding health checks and internal endpoints.</small>
                    </div>
                    
                    <!-- Disabled Instrumentations -->
                    <div class="mb-3">
                        <label for="otel_disabled_instrumentations" class="form-label fw-bold">Disabled Instrumentations</label>
                        <input type="text" class="form-control" id="otel_disabled_instrumentations" name="otel_disabled_instrumentations" value="{{ settings.otel_disabled_instrumentations }}" placeholder="Leave empty to enable all">
                        <small class="form-text text-muted">Comma-separated list of instrumentations to disable (e.g., "flask,requests"). Leave empty to enable all instrumentations.</small>
                    </div>
                    
                    <!-- Logs Exporter -->
                    <div class="mb-3">
                        <label for="otel_logs_exporter" class="form-label fw-bold">Logs Exporter</label>
                        <select class="form-select" id="otel_logs_exporter" name="otel_logs_exporter">
                            <option value="console" {% if settings.otel_logs_exporter == 'console' %}selected{% endif %}>Console</option>
                            <option value="otlp" {% if settings.otel_logs_exporter == 'otlp' %}selected{% endif %}>OTLP (Azure Monitor)</option>
                            <option value="console,otlp" {% if settings.otel_logs_exporter == 'console,otlp' %}selected{% endif %}>Console and OTLP (default)</option>
                            <option value="none" {% if settings.otel_logs_exporter == 'none' %}selected{% endif %}>None</option>
                        </select>
                        <small class="form-text text-muted">Where to export OpenTelemetry logs. Choose "OTLP" for production or "Console" for development.</small>
                    </div>
                    
                    <!-- Metrics Exporter -->
                    <div class="mb-3">
                        <label for="otel_metrics_exporter" class="form-label fw-bold">Metrics Exporter</label>
                        <select class="form-select" id="otel_metrics_exporter" name="otel_metrics_exporter">
                            <option value="console" {% if settings.otel_metrics_exporter == 'console' %}selected{% endif %}>Console</option>
                            <option value="otlp" {% if settings.otel_metrics_exporter == 'otlp' %}selected{% endif %}>OTLP (Azure Monitor, default)</option>
                            <option value="console,otlp" {% if settings.otel_metrics_exporter == 'console,otlp' %}selected{% endif %}>Console and OTLP</option>
                            <option value="none" {% if settings.otel_metrics_exporter == 'none' %}selected{% endif %}>None</option>
                        </select>
                        <small class="form-text text-muted">Where to export OpenTelemetry metrics. Choose "None" if using external metrics platforms like Prometheus.</small>
                    </div>
                    
                    <!-- Enable Live Metrics -->
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" role="switch" id="otel_enable_live_metrics" name="otel_enable_live_metrics" {% if settings.otel_enable_live_metrics %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="otel_enable_live_metrics">
                            Enable Live Metrics
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enables Azure Monitor Live Metrics stream for real-time monitoring. Maintains a persistent connection."></i>
                    </div>
                    
                    <div class="alert alert-warning mt-3" role="alert">
                        <strong>Note:</strong> Changing OpenTelemetry settings requires an application restart to take effect. See <a href="https://github.com/microsoft/simplechat/blob/main/docs/features/OPENTELEMETRY_CONFIGURATION.md" target="_blank">documentation</a> for detailed use cases and recommendations.
                    </div>
                </div>
                
                <div class="card p-3 mb-3" id="debug-logging-section">
                    <h5>
                        <i class="bi bi-bug me-2"></i>Debug Logging
                    </h5>
                    <p class="text-muted">Control debug print statements across the application for development and troubleshooting.</p>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" role="switch" id="enable_debug_logging" name="enable_debug_logging" {% if settings.enable_debug_logging %}checked{% endif %} onchange="toggleTimeControls('debug')">
                        <label class="form-check-label ms-2" for="enable_debug_logging">
                            Enable Debug Logging
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Toggle to enable or disable debug print statements across the application for troubleshooting and development."></i>
                    </div>
                    
                    <!-- Time-based turnoff controls for Debug Logging -->
                    <div id="debug-time-controls" class="mt-3" style="{% if not settings.enable_debug_logging %}display: none;{% endif %}">
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" role="switch" id="enable_debug_logging_timer" name="enable_debug_logging_timer" {% if settings.debug_logging_timer_enabled %}checked{% endif %} onchange="toggleTimerInputs('debug')">
                            <label class="form-check-label ms-2" for="enable_debug_logging_timer">
                                Enable Time-based Auto Turnoff
                            </label>
                            <i class="bi bi-clock ms-2" data-bs-toggle="tooltip" title="Automatically disable debug logging after a specified time period to manage cost and risk."></i>
                        </div>
                        
                        <div id="debug-timer-inputs" class="row g-3" style="{% if not settings.debug_logging_timer_enabled %}display: none;{% endif %}">
                            <div class="col-md-4">
                                <label for="debug_timer_value" class="form-label">Duration</label>
                                <input type="number" class="form-control" id="debug_timer_value" name="debug_timer_value" min="1" max="120" value="{{ settings.debug_timer_value or 1 }}">
                            </div>
                            <div class="col-md-4">
                                <label for="debug_timer_unit" class="form-label">Time Unit</label>
                                <select class="form-select" id="debug_timer_unit" name="debug_timer_unit">
                                    <option value="minutes" {% if settings.debug_timer_unit == 'minutes' %}selected{% endif %}>Minutes (1-120)</option>
                                    <option value="hours" {% if settings.debug_timer_unit == 'hours' %}selected{% endif %}>Hours (1-24)</option>
                                    <option value="days" {% if settings.debug_timer_unit == 'days' %}selected{% endif %}>Days (1-7)</option>
                                    <option value="weeks" {% if settings.debug_timer_unit == 'weeks' %}selected{% endif %}>Weeks (1-52)</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Will turn off at:</label>
                                <div id="debug-turnoff-time" class="form-control-plaintext text-info fw-bold">
                                    {% if settings.debug_logging_turnoff_time %}
                                        {% if settings.debug_logging_turnoff_time is string %}
                                            {{ settings.debug_logging_turnoff_time }}
                                        {% else %}
                                            {{ settings.debug_logging_turnoff_time.strftime('%Y-%m-%d %H:%M:%S') }}
                                        {% endif %}
                                    {% else %}
                                        Will be calculated when saved
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info mt-2" role="alert">
                        <strong>Info:</strong> This controls all DEBUG print statements throughout the application. Useful for development and troubleshooting. Tokens and keys will be collected during this process.
                    </div>
                </div>
                
                <div class="card p-3 mb-3" id="file-processing-logs-section">
                    <h5>
                        <i class="bi bi-file-earmark-text me-2"></i>File Process Logging
                    </h5>
                    <p class="text-muted">Enable logging of file processing events for debugging and auditing purposes. Logs are stored in the file_processing container in Cosmos DB.</p>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" role="switch" id="enable_file_processing_logs" name="enable_file_processing_logs" {% if settings.enable_file_processing_logs %}checked{% endif %} onchange="toggleTimeControls('file')">
                        <label class="form-check-label ms-2" for="enable_file_processing_logs">
                            Enable File Processing Logs
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Toggle to enable or disable logging of file processing events for debugging and auditing purposes."></i>
                    </div>
                    
                    <!-- Time-based turnoff controls for File Processing Logs -->
                    <div id="file-time-controls" class="mt-3" style="{% if not settings.enable_file_processing_logs %}display: none;{% endif %}">
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" role="switch" id="enable_file_processing_logs_timer" name="enable_file_processing_logs_timer" {% if settings.file_processing_logs_timer_enabled %}checked{% endif %} onchange="toggleTimerInputs('file')">
                            <label class="form-check-label ms-2" for="enable_file_processing_logs_timer">
                                Enable Time-based Auto Turnoff
                            </label>
                            <i class="bi bi-clock ms-2" data-bs-toggle="tooltip" title="Automatically disable file processing logs after a specified time period to manage cost and risk."></i>
                        </div>
                        
                        <div id="file-timer-inputs" class="row g-3" style="{% if not settings.file_processing_logs_timer_enabled %}display: none;{% endif %}">
                            <div class="col-md-4">
                                <label for="file_timer_value" class="form-label">Duration</label>
                                <input type="number" class="form-control" id="file_timer_value" name="file_timer_value" min="1" max="120" value="{{ settings.file_timer_value or 1 }}">
                            </div>
                            <div class="col-md-4">
                                <label for="file_timer_unit" class="form-label">Time Unit</label>
                                <select class="form-select" id="file_timer_unit" name="file_timer_unit">
                                    <option value="minutes" {% if settings.file_timer_unit == 'minutes' %}selected{% endif %}>Minutes (1-120)</option>
                                    <option value="hours" {% if settings.file_timer_unit == 'hours' %}selected{% endif %}>Hours (1-24)</option>
                                    <option value="days" {% if settings.file_timer_unit == 'days' %}selected{% endif %}>Days (1-7)</option>
                                    <option value="weeks" {% if settings.file_timer_unit == 'weeks' %}selected{% endif %}>Weeks (1-52)</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Will turn off at:</label>
                                <div id="file-turnoff-time" class="form-control-plaintext text-info fw-bold">
                                    {% if settings.file_processing_logs_turnoff_time %}
                                        {% if settings.file_processing_logs_turnoff_time is string %}
                                            {{ settings.file_processing_logs_turnoff_time }}
                                        {% else %}
                                            {{ settings.file_processing_logs_turnoff_time.strftime('%Y-%m-%d %H:%M:%S') }}
                                        {% endif %}
                                    {% else %}
                                        Will be calculated when saved
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
                
                 <p class="text-muted">
                    Configure general application settings, including the application's title, logo, and landing page text.
                </p>
                <div class="card p-3 mb-3" id="branding-section">
                    <h5>
                        <i class="bi bi-palette me-2"></i>Branding
                    </h5>
                    <p class="text-muted small">
                        Configure your application's title, logo, and branding elements.
                    </p>
                    <div class="mb-3">
                        <label for="app_title" class="form-label">Application Title</label>
                        <input type="text" class="form-control" id="app_title" name="app_title" value="{{ settings.app_title }}">
                    </div>
                    <h6 class="mt-3">Logo Settings</h6>
                    <div class="form-group form-check form-switch mb-3">
                        <input type="checkbox" class="form-check-input" id="show_logo" name="show_logo"
                            {% if settings.show_logo %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="show_logo">Show Logo</label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Display the application logo in the header and navigation areas of the interface."></i>
                    </div>
                    <div class="form-group form-check form-switch mb-3">
                        <input type="checkbox" class="form-check-input" id="hide_app_title" name="hide_app_title"
                            {% if settings.hide_app_title %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="hide_app_title">Hide Application Title</label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Hide the application title from the header and navigation, showing only the logo if enabled."></i>
                    </div>
                    <div class="form-group mb-3">
                        <label for="logo_file">Upload Custom Logo (Light Mode)</label>
                        <input type="file" class="form-control" name="logo_file" id="logo_file" accept=".png,.jpg,.jpeg">
                        <small class="form-text text-muted">This logo will be displayed in light mode.</small>
                    </div>
                    <div class="form-group mb-3">
                        <label for="logo_dark_file">Upload Custom Logo (Dark Mode)</label>
                        <input type="file" class="form-control" name="logo_dark_file" id="logo_dark_file" accept=".png,.jpg,.jpeg">
                        <small class="form-text text-muted">This logo will be displayed in dark mode. If not provided, the light mode logo will be used in both themes.</small>
                    </div>
                    <div class="form-group mb-3">
                        <label for="favicon_file">Upload Custom Favicon</label>
                        <input type="file" class="form-control" name="favicon_file" id="favicon_file" accept=".png,.jpg,.jpeg,.ico">
                        <small class="form-text text-muted">Recommended: 16x16 or 32x32 pixel png or jpg or ico.</small>
                    </div>
                </div>

                
                <div class="card p-3 mb-3" id="home-page-text-section">
                    <h5>
                        <i class="bi bi-house me-2"></i>Home Page Text
                    </h5>
                    <p class="text-muted small">Configure the text content displayed on your application's home page using Markdown formatting.</p>

                    <!-- Alignment Selector -->
                    <div class="mb-3">
                        <label for="landing_page_alignment" class="form-label">Markdown Alignment</label>
                        <select class="form-select" id="landing_page_alignment" name="landing_page_alignment">
                            <option value="left" {% if settings.landing_page_alignment == "left" or not settings.landing_page_alignment %}selected{% endif %}>Left</option>
                            <option value="center" {% if settings.landing_page_alignment == "center" %}selected{% endif %}>Center</option>
                            <option value="right" {% if settings.landing_page_alignment == "right" %}selected{% endif %}>Right</option>
                        </select>
                        <small class="form-text text-muted">Choose how the landing page markdown is aligned on the home page.</small>
                    </div>
                    
                    <div class="form-check form-switch mb-3">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            id="toggleLandingPageEditor"
                            name="enable_landing_page_editor"
                            {% if settings.enable_landing_page_editor %}checked{% endif %}
                        >
                        <label class="form-check-label ms-2" for="toggleLandingPageEditor">
                            Enable Markdown Editor
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enable the markdown editor for editing landing page content, otherwise text will be displayed as read-only preview."></i>
                    </div>

                    
                    <div id="landingPageEditorContainer" style="display: none;">
                        <textarea
                            class="form-control"
                            id="landing_page_text_editor"
                            name="landing_page_text"
                            rows="5"
                        >{{ settings.landing_page_text }}</textarea>
                    </div>

                    
                    <div
                        id="landingPageMarkdownPreview"
                        class="p-2 border rounded"
                        style="white-space: pre-wrap; display: none;"
                    ></div>
                </div>



                <!-- Dark Mode Card -->
                <div class="card p-3 mb-3" id="appearance-section">
                    <h5>
                        <i class="bi bi-brush me-2"></i>Appearance
                    </h5>
                    <p class="text-muted small">Configure the app appearance and theme settings.</p>
                    
                    <div class="mb-3">
                        <label class="form-label">Default Theme</label>
                        <div class="form-group form-check form-switch mb-3">
                            <input
                                type="checkbox"
                                class="form-check-input"
                                id="enable_dark_mode_default"
                                name="enable_dark_mode_default"
                                {% if settings.enable_dark_mode_default %}checked{% endif %}
                            >
                            <label class="form-check-label ms-2" for="enable_dark_mode_default">
                                Enable Dark Mode by Default
                            </label>
                            <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Set dark mode as the default theme for new users. Users can still toggle between themes individually."></i>
                        </div>
                        <p class="text-muted small">Users can still toggle dark mode individually from the navigation bar.</p>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Default Navigation</label>
                        <div class="form-group form-check form-switch mb-3">
                            <input
                                type="checkbox"
                                class="form-check-input"
                                id="enable_left_nav_default"
                                name="enable_left_nav_default"
                                {% if settings.enable_left_nav_default %}checked{% endif %}
                            >
                            <label class="form-check-label ms-2" for="enable_left_nav_default">
                                Enable Left Nav by Default
                            </label>
                            <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Show the left navigation sidebar by default for new users. Users can still toggle the sidebar visibility individually."></i>
                        </div>
                        <p class="text-muted small">Users can still toggle the left navigation sidebar individually from the header.</p>
                    </div>
                </div>
                <!-- Health Check Configuration -->
                <div class="card p-3 mb-3" id="health-check-section">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5 class="mb-0">
                            <i class="bi bi-heart-pulse me-2"></i>Health Check
                        </h5>
                        <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal" data-bs-target="#healthCheckInfoModal">
                            <i class="bi bi-info-circle me-1"></i>Configuration Guide
                        </button>
                    </div>
                    <p class="text-muted mb-3">Configure health check endpoint for external monitoring systems.</p>
                    
                    <!-- External Health Check -->
                    <div class="form-check form-switch mb-2">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="enable_external_healthcheck"
                            name="enable_external_healthcheck"
                            {% if settings.enable_external_healthcheck %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="enable_external_healthcheck">
                            Enable External Health Check Endpoint (/external/healthcheck)
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enable the /external/healthcheck endpoint for external monitoring systems."></i>
                    </div>
                    <p class="text-muted small mb-0">Health check endpoint for external monitoring systems that require endpoint verification.</p>
                </div>

                <!-- API Documentation Section -->
                <div class="card p-3 mb-3" id="swagger-section">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <h5 class="mb-0">
                            <i class="bi bi-file-earmark-code me-2"></i>API Documentation
                        </h5>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal" data-bs-target="#swaggerInfoModal">
                                <i class="bi bi-info-circle me-1"></i>Why Enable Swagger?
                            </button>
                            <a href="/swagger" class="btn btn-primary btn-sm" target="_blank">
                                <i class="bi bi-box-arrow-up-right me-1"></i>Open Swagger UI
                            </a>
                        </div>
                    </div>
                    <p class="text-muted mb-3">Configure automatic OpenAPI/Swagger documentation for API endpoints.</p>
                    
                    <!-- Enable Swagger Documentation -->
                    <div class="form-check form-switch mb-2">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="enable_swagger"
                            name="enable_swagger"
                            {% if settings.enable_swagger %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="enable_swagger">
                            Enable Swagger/OpenAPI Documentation (/swagger)
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enable automatic API documentation with Swagger UI interface for testing and exploring endpoints."></i>
                    </div>
                    <p class="text-muted small mb-0">
                        Provides interactive API documentation, endpoint testing, and schema validation. 
                        Useful for developers, API integration, and system troubleshooting.
                    </p>
                </div>
                <!-- New Classification Banner Section -->
                <div class="card p-3 mb-3" id="classification-banner-section">
                    <h5>
                        <i class="bi bi-shield-exclamation me-2"></i>Classification Banner
                    </h5>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="classification_banner_enabled" name="classification_banner_enabled"
                            {% if settings.classification_banner_enabled %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="classification_banner_enabled">
                            Enable Classification Banner
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Display a security classification banner at the top of every page to indicate data sensitivity level."></i>
                    </div>
                    <div class="mb-2">
                        <label for="classification_banner_text" class="form-label">Banner Text</label>
                        <input type="text" class="form-control" id="classification_banner_text" name="classification_banner_text"
                            value="{{ settings.classification_banner_text }}">
                    </div>
                    <div class="mb-2">
                        <label for="classification_banner_color" class="form-label">Banner Color</label>
                        <input type="color" class="form-control form-control-color" id="classification_banner_color" name="classification_banner_color"
                            value="{{ settings.classification_banner_color or '#ffc107' }}" style="width: 3rem; height: 2rem;">
                    </div>
                    <div class="mb-2">
                        <span id="classification-banner-preview"
                              style="display:inline-block; padding:0.5em 1em; border-radius:0.3em; font-weight:bold; color:#fff; background:{{ settings.classification_banner_color or '#ffc107' }};">
                            {{ settings.classification_banner_text or 'Banner Preview' }}
                        </span>
                    </div>
                </div>

                <!-- External Links Section -->
                <div class="card p-3 mb-3" id="external-links-section">
                    <h5>
                        <i class="bi bi-box-arrow-up-right me-2"></i>External Links
                    </h5>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="enable_external_links" name="enable_external_links"
                            {% if settings.enable_external_links %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="enable_external_links">
                            Enable External Links in Navigation
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Display a menu of external links in the navigation bar for quick access to external resources and websites."></i>
                    </div>
                    <p class="text-muted small">When enabled, external links will be displayed in the navigation bar for easy access to external resources.</p>
                    
                    <div id="external_links_settings" {% if not settings.enable_external_links %}style="display: none;"{% endif %}>
                        <div class="mb-3">
                            <label for="external_links_menu_name" class="form-label">Menu Name</label>
                            <input type="text" class="form-control" id="external_links_menu_name" name="external_links_menu_name" 
                                   value="{{ settings.external_links_menu_name or 'External Links' }}" placeholder="External Links">
                            <small class="form-text text-muted">This name will appear in the navigation bar as the menu title.</small>
                        </div>
                        
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" id="external_links_force_menu" name="external_links_force_menu"
                                {% if settings.external_links_force_menu %}checked{% endif %}>
                            <label class="form-check-label ms-2" for="external_links_force_menu">
                                Force Menu Display
                            </label>
                            <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Always show external links as a dropdown menu. When disabled, 1-2 links show as top-level nav items, 3+ links show as a dropdown menu."></i>
                            <small class="form-text text-muted d-block">When enabled, external links will always display as a dropdown menu. When disabled, 1-2 links show as top-level nav items, 3+ links show as a dropdown menu.</small>
                        </div>
                        
                        <h6>External Links</h6>
                        <p class="text-muted small">Define custom links that will appear in the navigation bar for users to access external resources.</p>
                        
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th>Label</th>
                                    <th>URL</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="external-links-tbody">
                                <!-- Populated by JavaScript -->
                            </tbody>
                        </table>
                        
                        <button type="button" class="btn btn-sm btn-outline-primary" id="add-external-link-btn">Add New Link</button>
                        <input type="hidden" name="external_links_json" id="external_links_json">
                    </div>
                </div>

                <!-- System Settings Section -->
                <div class="card p-3 mb-3" id="system-settings-section">
                    <h5>
                        <i class="bi bi-gear-fill me-2"></i>System Settings
                    </h5>
                    <p class="text-muted">
                        System-level settings that control application behavior, including file size limits, conversation history, 
                        and default prompts.
                    </p>
                    <div class="mb-3">
                        <label for="max_file_size_mb" class="form-label">Maximum File Size (MB)</label>
                        <input type="number" class="form-control" id="max_file_size_mb" name="max_file_size_mb"
                            value="{{ settings.max_file_size_mb }}">
                    </div>
                    <div class="mb-3">
                        <label for="conversation_history_limit" class="form-label">
                            Conversation History Limit
                        </label>
                        <input type="number" class="form-control" id="conversation_history_limit"
                            name="conversation_history_limit" value="{{ settings.conversation_history_limit }}">
                    </div>
                    <div class="mb-3">
                        <label for="default_system_prompt" class="form-label">Default System Prompt</label>
                        <textarea class="form-control" id="default_system_prompt" name="default_system_prompt"
                            rows="5">{{ settings.default_system_prompt }}</textarea>
                    </div>
                </div>
            </div>

            
            <div class="tab-pane fade" id="ai-models" role="tabpanel" aria-labelledby="ai-models-tab">
                
                <p class="text-muted">
                    Configure all AI model settings including GPT for text generation, embeddings for semantic search, and image generation capabilities.
                </p>

                <!-- GPT Configuration Section -->
                <div class="card p-3 mb-4" id="gpt-configuration">
                    <h5 class="card-title">
                        <i class="bi bi-chat-text me-2"></i>GPT Configuration
                    </h5>
                    <p class="text-muted small">
                        Configure your GPT model settings. These are used for generating AI text responses.
                    </p>

                <div class="form-group form-check form-switch mb-3 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input me-2" id="enable_gpt_apim" name="enable_gpt_apim" {%
                        if settings.enable_gpt_apim %}checked{% endif %}>
                    <label class="form-check-label" for="enable_gpt_apim">Use APIM instead of direct to Azure OpenAI
                        endpoint</label>
                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Route GPT model requests through Azure API Management instead of directly to Azure OpenAI service for additional governance and monitoring."></i>
                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="APIM provides an additional layer for security, monitoring, and rate limiting. When using APIM, you'll need to manually specify your model names and will not be able to fetch models automatically."></i>
                </div>

                <div id="non_apim_gpt_settings" {% if settings.enable_gpt_apim %}style="display: none;" {% endif %}>
                    <div class="card p-3 mb-3">
                        <div class="mb-3">
                            <label for="azure_openai_gpt_endpoint" class="form-label">
                                Azure OpenAI GPT Endpoint
                            </label>
                            <input type="text" class="form-control" id="azure_openai_gpt_endpoint"
                                name="azure_openai_gpt_endpoint" value="{{ settings.azure_openai_gpt_endpoint or '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="azure_openai_gpt_authentication_type" class="form-label">
                                Authentication Type
                            </label>
                            <select class="form-select" id="azure_openai_gpt_authentication_type"
                                name="azure_openai_gpt_authentication_type">
                                <option value="key" {% if settings.azure_openai_gpt_authentication_type=='key'
                                    %}selected{% endif %}>
                                    Key
                                </option>
                                <option value="managed_identity" {% if
                                    settings.azure_openai_gpt_authentication_type=='managed_identity' %}selected{% endif
                                    %}>
                                    Managed Identity
                                </option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="azure_openai_gpt_subscription_id" class="form-label">Subscription ID</label>
                            <input type="text" class="form-control" id="azure_openai_gpt_subscription_id"
                                name="azure_openai_gpt_subscription_id"
                                value="{{ settings.azure_openai_gpt_subscription_id or '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="azure_openai_gpt_resource_group" class="form-label">Resource Group</label>
                            <input type="text" class="form-control" id="azure_openai_gpt_resource_group"
                                name="azure_openai_gpt_resource_group"
                                value="{{ settings.azure_openai_gpt_resource_group or '' }}">
                        </div>
                        <div class="mb-3" id="gpt_key_container" {% if settings.azure_openai_gpt_authentication_type
                            !='key' %}style="display: none;" {% endif %}>
                            <label for="azure_openai_gpt_key" class="form-label">Azure OpenAI GPT Key</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="azure_openai_gpt_key"
                                    name="azure_openai_gpt_key" value="{{ settings.azure_openai_gpt_key or '' }}">
                                <button type="button" class="btn btn-outline-secondary"
                                    id="toggle_gpt_key">Show</button>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="gpt_model" class="form-label">Azure OpenAI GPT Model Selection</label>
                            <br><small>Each selected model will be available in the Chat UI as an option for the User. You can select multiple models.</small>
                            <br><small>Save Pending Changes to settings before clicking Fetch Models</small>
                            <div id="gpt_models_list" class="mt-2 mb-3">
                                
                            </div>
                            
                            <small>Save pending changes to settings before clicking Fetch Embedding Models</small><br>

                            <input type="hidden" name="gpt_model_json" id="gpt_model_json" />

                            
                            <input type="hidden" id="gpt_model" value="{{ settings.gpt_model.selected[0].deploymentName if settings.gpt_model.selected else '' }}" />

                            <button type="button" class="btn btn-secondary" id="fetch_gpt_models_btn">
                                Fetch GPT Models
                            </button>
                        </div>
                        <a href="#" class="fw-bold text-decoration-none mb-2" data-bs-toggle="collapse"
                            data-bs-target="#advancedGptFields" aria-expanded="false" aria-controls="advancedGptFields">
                            Show Advanced
                        </a>
                        <div class="collapse" id="advancedGptFields">
                            <div class="card card-body mt-2">
                                <div class="mb-3">
                                    <label for="azure_openai_gpt_api_version" class="form-label">
                                        Azure OpenAI GPT API Version
                                    </label>
                                    <input type="text" class="form-control" id="azure_openai_gpt_api_version"
                                        name="azure_openai_gpt_api_version"
                                        value="{{ settings.azure_openai_gpt_api_version or '' }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="apim_gpt_settings" class="card p-3 mb-3" {% if not settings.enable_gpt_apim
                    %}style="display: none;" {% endif %}>
                    <div class="mb-3">
                        <label for="azure_apim_gpt_endpoint" class="form-label">Azure APIM Endpoint</label>
                        <input type="text" class="form-control" id="azure_apim_gpt_endpoint"
                            name="azure_apim_gpt_endpoint" value="{{ settings.azure_apim_gpt_endpoint or '' }}">
                    </div>
                    <div class="mb-3">
                        <label for="azure_apim_gpt_api_version" class="form-label">Azure APIM API Version</label>
                        <input type="text" class="form-control" id="azure_apim_gpt_api_version"
                            name="azure_apim_gpt_api_version" value="{{ settings.azure_apim_gpt_api_version or '' }}">
                    </div>
                    <div class="mb-3">
                        <label for="azure_apim_gpt_deployment" class="form-label">Azure APIM Deployment</label>
                        <br><small class="text-muted">Each model defined here will be available in the Chat UI as an option for the User. You can include multiple models seperated by a comma (example: gpt-4o, o-1, o-3).</small>
                        <input type="text" class="form-control" id="azure_apim_gpt_deployment"
                            name="azure_apim_gpt_deployment" value="{{ settings.azure_apim_gpt_deployment or '' }}">
                    </div>
                    <div class="mb-3">
                        <label for="azure_apim_gpt_subscription_key" class="form-label">Azure APIM Subscription
                            Key</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="azure_apim_gpt_subscription_key"
                                name="azure_apim_gpt_subscription_key"
                                value="{{ settings.azure_apim_gpt_subscription_key or '' }}">
                            <button type="button" class="btn btn-outline-secondary"
                                id="toggle_azure_apim_gpt_subscription_key">Show</button>
                        </div>
                    </div>
                </div>

                <button type="button" class="btn btn-secondary mt-3" id="test_gpt_button">
                    Test GPT Connection
                </button>
                <div id="test_gpt_result" class="mt-2"></div>
                </div>

                <!-- Embeddings Configuration Section -->
                <div class="card p-3 mb-4" id="embeddings-configuration">
                    <h5 class="card-title">
                        <i class="bi bi-vector-pen me-2"></i>Embeddings Configuration
                    </h5>
                    <p class="text-muted small">
                        Configure your embeddings settings. These are used for semantic search, knowledge-base lookups, etc.
                    </p>

                <div class="form-group form-check form-switch mb-3 d-flex align-items-center">
                    <input type="checkbox" class="form-check-input me-2" id="enable_embedding_apim"
                        name="enable_embedding_apim" {% if settings.enable_embedding_apim %}checked{% endif %}>
                    <label class="form-check-label" for="enable_embedding_apim">Use APIM instead of direct to Azure
                        OpenAI endpoint</label>
                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Route embedding model requests through Azure API Management instead of directly to Azure OpenAI service for additional governance and monitoring."></i>
                </div>

                <div id="non_apim_embedding_settings" {% if settings.enable_embedding_apim %}style="display: none;" {%
                    endif %}>
                    <div class="card p-3 mb-3">
                        <div class="mb-3">
                            <label for="azure_openai_embedding_endpoint" class="form-label">
                                Azure OpenAI Embedding Endpoint
                            </label>
                            <input type="text" class="form-control" id="azure_openai_embedding_endpoint"
                                name="azure_openai_embedding_endpoint"
                                value="{{ settings.azure_openai_embedding_endpoint or '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="azure_openai_embedding_authentication_type" class="form-label">
                                Authentication Type
                            </label>
                            <select class="form-select" id="azure_openai_embedding_authentication_type"
                                name="azure_openai_embedding_authentication_type">
                                <option value="key" {% if settings.azure_openai_embedding_authentication_type=='key'
                                    %}selected{% endif %}>
                                    Key
                                </option>
                                <option value="managed_identity" {% if
                                    settings.azure_openai_embedding_authentication_type=='managed_identity' %}selected{% endif %}>
                                    Managed Identity
                                </option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="azure_openai_embedding_subscription_id" class="form-label">Subscription
                                ID</label>
                            <input type="text" class="form-control" id="azure_openai_embedding_subscription_id"
                                name="azure_openai_embedding_subscription_id"
                                value="{{ settings.azure_openai_embedding_subscription_id or '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="azure_openai_embedding_resource_group" class="form-label">Resource Group</label>
                            <input type="text" class="form-control" id="azure_openai_embedding_resource_group"
                                name="azure_openai_embedding_resource_group"
                                value="{{ settings.azure_openai_embedding_resource_group or '' }}">
                        </div>
                        <div class="mb-3" id="embedding_key_container" {% if
                            settings.azure_openai_embedding_authentication_type !='key' %}style="display: none;" {%
                            endif %}>
                            <label for="azure_openai_embedding_key" class="form-label">Azure OpenAI Embedding
                                Key</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="azure_openai_embedding_key"
                                    name="azure_openai_embedding_key"
                                    value="{{ settings.azure_openai_embedding_key or '' }}">
                                <button type="button" class="btn btn-outline-secondary"
                                    id="toggle_embedding_key">Show</button>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div id="embedding_models_list" class="mt-2 mb-3">
                                
                            </div>
                            <small>Save pending changes to settings before clicking Fetch Embedding Models</small><br>
                            
                            <input type="hidden" name="embedding_model_json" id="embedding_model_json" />

                            
                            <input type="hidden" id="embedding_model" value="{{ settings.embedding_model.selected[0].deploymentName if settings.embedding_model.selected else '' }}" />

                            
                            <button type="button" class="btn btn-secondary" id="fetch_embedding_models_btn">
                                Fetch Embedding Models
                            </button>
                        </div>
                        <a href="#" class="fw-bold text-decoration-none mb-2" data-bs-toggle="collapse"
                            data-bs-target="#advancedEmbeddingsFields" aria-expanded="false"
                            aria-controls="advancedEmbeddingsFields">
                            Show Advanced
                        </a>
                        <div class="collapse" id="advancedEmbeddingsFields">
                            <div class="card card-body mt-2">
                                <div class="mb-3">
                                    <label for="azure_openai_embedding_api_version" class="form-label">
                                        Azure OpenAI Embedding API Version
                                    </label>
                                    <input type="text" class="form-control" id="azure_openai_embedding_api_version"
                                        name="azure_openai_embedding_api_version"
                                        value="{{ settings.azure_openai_embedding_api_version or '' }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="apim_embedding_settings" class="card p-3 mb-3" {% if not settings.enable_embedding_apim
                    %}style="display: none;" {% endif %}>
                    <div class="mb-3">
                        <label for="azure_apim_embedding_endpoint" class="form-label">Azure APIM Endpoint</label>
                        <input type="text" class="form-control" id="azure_apim_embedding_endpoint"
                            name="azure_apim_embedding_endpoint"
                            value="{{ settings.azure_apim_embedding_endpoint or '' }}">
                    </div>
                    <div class="mb-3">
                        <label for="azure_apim_embedding_api_version" class="form-label">Azure APIM API Version</label>
                        <input type="text" class="form-control" id="azure_apim_embedding_api_version"
                            name="azure_apim_embedding_api_version"
                            value="{{ settings.azure_apim_embedding_api_version or '' }}">
                    </div>
                    <div class="mb-3">
                        <label for="azure_apim_embedding_deployment" class="form-label">Azure APIM Deployment</label>
                        <input type="text" class="form-control" id="azure_apim_embedding_deployment"
                            name="azure_apim_embedding_deployment"
                            value="{{ settings.azure_apim_embedding_deployment or '' }}">
                    </div>
                    <div class="mb-3">
                        <label for="azure_apim_embedding_subscription_key" class="form-label">Azure APIM Subscription
                            Key</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="azure_apim_embedding_subscription_key"
                                name="azure_apim_embedding_subscription_key"
                                value="{{ settings.azure_apim_embedding_subscription_key or '' }}">
                            <button type="button" class="btn btn-outline-secondary"
                                id="toggle_azure_apim_embedding_subscription_key">Show</button>
                        </div>
                    </div>
                </div>

                <button type="button" class="btn btn-secondary mt-3" id="test_embedding_button">
                    Test Embedding Connection
                </button>
                <div id="test_embedding_result" class="mt-2"></div>
                </div>

                <!-- Image Generation Configuration Section -->
                <div class="card p-3 mb-4" id="image-generation-configuration">
                    <h5 class="card-title">
                        <i class="bi bi-image me-2"></i>Image Generation Configuration
                    </h5>
                    <p class="text-muted small">
                        Configure image generation settings. Enable/disable, set endpoints, and choose a model.
                    </p>

                <div class="form-group form-check form-switch mb-3">
                    <input type="checkbox" class="form-check-input" id="enable_image_generation"
                        name="enable_image_generation" {% if settings.enable_image_generation %}checked{% endif %}>
                    <label class="form-check-label ms-2" for="enable_image_generation">
                        Enable Image Generation
                    </label>
                    <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enable AI-powered image generation capabilities using DALL-E models for creating images from text descriptions."></i>
                </div>
                <div id="image_gen_settings" {% if not settings.enable_image_generation %}style="display: none;" {%
                    endif %}>

                    <div class="form-group form-check form-switch mb-3 d-flex align-items-center">
                        <input type="checkbox" class="form-check-input me-2" id="enable_image_gen_apim"
                            name="enable_image_gen_apim" {% if settings.enable_image_gen_apim %}checked{% endif %}>
                        <label class="form-check-label" for="enable_image_gen_apim">Use APIM instead of direct to Azure
                            OpenAI endpoint.</label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Route image generation requests through Azure API Management instead of directly to Azure OpenAI service for additional governance and monitoring."></i>
                    </div>

                    <div id="non_apim_image_gen_settings" {% if settings.enable_image_gen_apim %}style="display: none;"
                        {% endif %}>
                        <div class="card p-3 mb-3">
                            <div class="mb-3">
                                <label for="azure_openai_image_gen_endpoint" class="form-label">
                                    Azure OpenAI Image Generation Endpoint
                                </label>
                                <input type="text" class="form-control" id="azure_openai_image_gen_endpoint"
                                    name="azure_openai_image_gen_endpoint"
                                    value="{{ settings.azure_openai_image_gen_endpoint or '' }}">
                            </div>
                            <div class="mb-3">
                                <label for="azure_openai_image_gen_authentication_type" class="form-label">
                                    Authentication Type
                                </label>
                                <select class="form-select" id="azure_openai_image_gen_authentication_type"
                                    name="azure_openai_image_gen_authentication_type">
                                    <option value="key" {% if settings.azure_openai_image_gen_authentication_type=='key'
                                        %}selected{% endif %}>
                                        Key
                                    </option>
                                    <option value="managed_identity" {% if
                                        settings.azure_openai_image_gen_authentication_type=='managed_identity'
                                        %}selected{% endif %}>
                                        Managed Identity
                                    </option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="azure_openai_image_gen_subscription_id" class="form-label">Subscription
                                    ID</label>
                                <input type="text" class="form-control" id="azure_openai_image_gen_subscription_id"
                                    name="azure_openai_image_gen_subscription_id"
                                    value="{{ settings.azure_openai_image_gen_subscription_id or '' }}">
                            </div>
                            <div class="mb-3">
                                <label for="azure_openai_image_gen_resource_group" class="form-label">Resource
                                    Group</label>
                                <input type="text" class="form-control" id="azure_openai_image_gen_resource_group"
                                    name="azure_openai_image_gen_resource_group"
                                    value="{{ settings.azure_openai_image_gen_resource_group or '' }}">
                            </div>
                            <div class="mb-3" id="image_gen_key_container" {% if
                                settings.azure_openai_image_gen_authentication_type !='key' %}style="display: none;" {%
                                endif %}>
                                <label for="azure_openai_image_gen_key" class="form-label">Azure OpenAI Image Generation
                                    Key</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="azure_openai_image_gen_key"
                                        name="azure_openai_image_gen_key"
                                        value="{{ settings.azure_openai_image_gen_key or '' }}">
                                    <button type="button" class="btn btn-outline-secondary"
                                        id="toggle_image_gen_key">Show</button>
                                </div>
                            </div>
                            <div class="mb-3">
                                <div id="image_models_list" class="mt-2 mb-3">
                                    
                                </div>

                                <small>Save pending changes to settings before clicking Fetch Embedding Models</small><br>
                                
                                <input type="hidden" name="image_gen_model_json" id="image_gen_model_json" />

                                
                                <input type="hidden" id="image_gen_model" value="{{ settings.image_gen_model.selected[0].deploymentName if settings.image_gen_model.selected else '' }}" />

                                
                                <button type="button" class="btn btn-secondary" id="fetch_image_models_btn">
                                    Fetch Image Generation Models
                                </button>
                            </div>
                            <a href="#" class="fw-bold text-decoration-none mb-2" data-bs-toggle="collapse"
                                data-bs-target="#advancedImageGenFields" aria-expanded="false"
                                aria-controls="advancedImageGenFields">
                                Show Advanced
                            </a>
                            <div class="collapse" id="advancedImageGenFields">
                                <div class="card card-body mt-2">
                                    <div class="mb-3">
                                        <label for="azure_openai_image_gen_api_version" class="form-label">
                                            Azure OpenAI Image Gen API Version
                                        </label>
                                        <input type="text" class="form-control" id="azure_openai_image_gen_api_version"
                                            name="azure_openai_image_gen_api_version"
                                            value="{{ settings.azure_openai_image_gen_api_version or '' }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="apim_image_gen_settings" class="card p-3 mb-3" {% if not settings.enable_image_gen_apim
                        %}style="display: none;" {% endif %}>
                        <div class="mb-3">
                            <label for="azure_apim_image_gen_endpoint" class="form-label">Azure APIM Endpoint</label>
                            <input type="text" class="form-control" id="azure_apim_image_gen_endpoint"
                                name="azure_apim_image_gen_endpoint"
                                value="{{ settings.azure_apim_image_gen_endpoint or '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="azure_apim_image_gen_api_version" class="form-label">Azure APIM API
                                Version</label>
                            <input type="text" class="form-control" id="azure_apim_image_gen_api_version"
                                name="azure_apim_image_gen_api_version"
                                value="{{ settings.azure_apim_image_gen_api_version or '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="azure_apim_image_gen_deployment" class="form-label">Azure APIM
                                Deployment</label>
                            <input type="text" class="form-control" id="azure_apim_image_gen_deployment"
                                name="azure_apim_image_gen_deployment"
                                value="{{ settings.azure_apim_image_gen_deployment or '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="azure_apim_image_gen_subscription_key" class="form-label">Azure APIM
                                Subscription Key</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="azure_apim_image_gen_subscription_key"
                                    name="azure_apim_image_gen_subscription_key"
                                    value="{{ settings.azure_apim_image_gen_subscription_key or '' }}">
                                <button type="button" class="btn btn-outline-secondary"
                                    id="toggle_azure_apim_image_gen_subscription_key">Show</button>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="button" class="btn btn-secondary mt-3" id="test_image_button">
                    Test Image Connection
                </button>
                <div id="test_image_result" class="mt-2"></div>
                </div>
            </div>

            <div class="tab-pane fade" id="scale" role="tabpanel" aria-labelledby="scale-tab">
                <p class="text-muted">
                    Configure Redis cache to improve enterprise scale and performance by caching session data. Enabling Redis allows you to horizontally scale your application across multiple instances without losing session data.
                </p>
                <div class="card p-3 mb-3" id="redis-cache-section">
                    <h5>
                        <i class="bi bi-database me-2"></i>Redis Cache
                    </h5>
                    <p class="text-muted">
                        Enable Redis Cache to store session data in a distributed cache. This is recommended for production and multi-instance deployments.
                    </p>
                    <div class="form-group form-check form-switch mb-3">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="enable_redis_cache"
                            name="enable_redis_cache"
                            {% if settings.enable_redis_cache %}checked{% endif %}
                        >
                        <label class="form-check-label ms-2" for="enable_redis_cache">
                            Enable Redis Cache
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enable Redis Cache for distributed session storage, improving performance and enabling horizontal scaling across multiple application instances."></i>
                    </div>
                    <div id="redis_cache_settings" {% if not settings.enable_redis_cache %}style="display: none;" {% endif %}>
                        <div class="mb-3">
                            <label for="redis_url" class="form-label">Redis Server Host Name</label>
                            <p class="text-muted">(example: simple-chat.redis.cache.windows.net)</p>
                            <input type="text" class="form-control" id="redis_url" name="redis_url" value="{{ settings.redis_url or '' }}">
                        </div>
                        <div class="mb-3">
                            <label for="redis_auth_type" class="form-label">Redis Authentication Type</label>
                            <select class="form-select" id="redis_auth_type" name="redis_auth_type">
                                <option value="key" {% if settings.redis_auth_type == 'key' or not settings.redis_auth_type %}selected{% endif %}>Key</option>
                                <option value="managed_identity" {% if settings.redis_auth_type == 'managed_identity' %}selected{% endif %}>Managed Identity</option>
                            </select>
                        </div>
                        <div class="mb-3" id="redis_key_container" {% if settings.redis_auth_type != 'key' and settings.redis_auth_type %}style="display: none;"{% endif %}>
                            <label for="redis_key" class="form-label">Redis Access Key</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="redis_key" name="redis_key" value="{{ settings.redis_key or '' }}">
                                <button type="button" class="btn btn-outline-secondary" id="toggle_redis_key">Show</button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary mt-3" id="test_redis_button">
                            Test Redis Connection
                        </button>
                        <div id="test_redis_result" class="mt-2"></div>
                    </div>
                </div>

                <!-- Front Door Configuration Card -->
                <div class="card p-3 mb-3" id="front-door-section">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5 class="mb-0">
                            <i class="bi bi-globe me-2"></i>Front Door
                        </h5>
                        <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal" data-bs-target="#frontDoorInfoModal">
                            <i class="bi bi-info-circle me-1"></i>Configuration Guide
                        </button>
                    </div>
                    <p class="text-muted mb-1">Configure Front Door URL for authentication and redirect flows.</p>
                    
                    <div class="form-group form-check form-switch mb-3">
                        <input 
                            class="form-check-input" 
                            type="checkbox" 
                            id="enable_front_door" 
                            name="enable_front_door" 
                            {% if settings.enable_front_door %}checked{% endif %}
                        >
                        <label class="form-check-label ms-2" for="enable_front_door">
                            Enable Front Door Support
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Enable Azure Front Door integration for global load balancing, SSL termination, and improved performance with custom domain support."></i>
                    </div>
                    
                    <div class="mb-3" id="front-door-url-settings">
                        <label for="front_door_url" class="form-label">Front Door URL</label>
                        <input type="url" class="form-control" id="front_door_url" name="front_door_url" 
                               value="{{ settings.front_door_url or '' }}" 
                               placeholder="https://your-frontdoor.azurefd.net">
                        <small class="form-text text-muted">
                            The base URL of your Front Door or load balancer. The system will automatically generate:
                            <ul class="mb-0 mt-1">
                                <li><strong>Home redirect:</strong> <code id="home-url-preview">https://your-frontdoor.azurefd.net</code></li>
                                <li><strong>OAuth2 redirect:</strong> <code id="oauth-url-preview">https://your-frontdoor.azurefd.net/getAToken</code></li>
                            </ul>
                        </small>
                    </div>
                </div>
            </div>


            <div class="tab-pane fade" id="workspaces" role="tabpanel" aria-labelledby="workspaces-tab">
                <p class="text-muted">
                    Configure workspace settings like personal/group access, multimedia support, metadata, and document classification.
                </p>

                
                <div class="card mb-3 p-3" id="personal-workspaces-section">
                    <h5>
                        <i class="bi bi-person me-2"></i>Personal Workspaces
                    </h5>
                    <p class="text-muted">
                        Turn this on to allow access and management of your personal workspace.
                    </p>
                    <div class="form-group form-check form-switch mb-3">
                        <input type="checkbox"
                            class="form-check-input"
                            id="enable_user_workspace"
                            name="enable_user_workspace"
                            {% if settings.enable_user_workspace %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="enable_user_workspace">
                            Enable Personal Workspaces
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow users to create and manage their own private workspaces for document storage, knowledge bases, and personal AI interactions."></i>
                    </div>
                </div>

               
               <div class="card mb-3 p-3" id="group-workspaces-section">
                    <h5>
                        <i class="bi bi-people me-2"></i>Group Workspaces
                    </h5>
                    <p class="text-muted">
                        Turn this on to allow access and management of group workspaces, as well as group collaboration features.
                    </p>
                    <div class="form-group form-check form-switch mb-3">
                        <input type="checkbox"
                            class="form-check-input"
                            id="enable_group_workspaces"
                            name="enable_group_workspaces"
                            {% if settings.enable_group_workspaces %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="enable_group_workspaces">
                            Enable Group Workspaces
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow users to create and participate in shared group workspaces for team collaboration, document sharing, and collective knowledge building."></i>
                    </div>

                    
                    <div id="create_group_permission_setting" {% if not settings.enable_group_workspaces %}style="display: none;"{% endif %}>
                        <hr> 
                        <div class="form-group form-check form-switch mb-2">
                            <input type="checkbox"
                                class="form-check-input"
                                id="require_member_of_create_group"
                                name="require_member_of_create_group"
                                {% if settings.require_member_of_create_group %}checked{% endif %}>
                            <label class="form-check-label ms-2" for="require_member_of_create_group">
                                Require Membership to Create Groups
                            </label>
                        </div>
                        <p class="text-muted small mb-0">
                            If enabled, only users who are members of the 'CreateGroups' role (defined in your App registration) can create new groups. If disabled, any authenticated user can create groups (provided 'Enable My Groups' is active).
                        </p>
                    </div>
                    
                </div>

                <div class="card mb-3 p-3" id="public-workspaces-section">
                    <h5>
                        <i class="bi bi-globe me-2"></i>Public Workspaces
                    </h5>
                    <p class="text-muted">
                        Turn this on to enable public workspaces that are visible to everyone in the organization.
                    </p>
                    <div class="form-group form-check form-switch mb-3">
                        <input type="checkbox"
                            class="form-check-input"
                            id="enable_public_workspaces"
                            name="enable_public_workspaces"
                            {% if settings.enable_public_workspaces %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="enable_public_workspaces">
                            Enable Public Workspaces
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow creation of public workspaces that are visible and accessible to all users in the organization for broad knowledge sharing."></i>
                    </div>

                    <div id="create_public_workspace_permission_setting" {% if not settings.enable_public_workspaces %}style="display: none;"{% endif %}>
                        <hr> 
                        <div class="form-group form-check form-switch mb-2">
                            <input type="checkbox"
                                class="form-check-input"
                                id="require_member_of_create_public_workspace"
                                name="require_member_of_create_public_workspace"
                                {% if settings.require_member_of_create_public_workspace %}checked{% endif %}>
                            <label class="form-check-label ms-2" for="require_member_of_create_public_workspace">
                                Require Membership to Create Public Workspaces
                            </label>
                        </div>
                        <p class="text-muted small mb-0">
                            If enabled, only users who are members of the 'CreatePublicWorkspaces' role (defined in your App registration) can create public workspaces. If disabled, any authenticated user can create public workspaces (provided 'Enable Public Workspaces' is active).
                        </p>
                    </div>
                    
                </div>

                <div class="card mb-3 p-3" id="file-sharing-section">
                    <h5>
                        <i class="bi bi-share me-2"></i>File Sharing
                    </h5>
                    <p class="text-muted">
                        Turn this on to enable file sharing capabilities between users and workspaces.
                    </p>
                    <div class="form-group form-check form-switch mb-3">
                        <input type="checkbox"
                            class="form-check-input"
                            id="enable_file_sharing"
                            name="enable_file_sharing"
                            {% if settings.enable_file_sharing %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="enable_file_sharing">
                            Enable File Sharing
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow users to upload, share, and manage files within workspaces for document-based AI interactions and collaboration."></i>
                    </div>
                </div>

                <div class="card mb-3 p-3" id="metadata-extraction-section">
                    <h5>
                        <i class="bi bi-file-earmark-code me-2"></i>Metadata Extraction
                    </h5>
                    <p class="text-muted">
                      Enable this to automatically parse and store file metadata for advanced indexing and search.
                    </p>
                    <div class="form-check form-switch mb-3">
                      <input
                        type="checkbox"
                        class="form-check-input"
                        id="enable_extract_meta_data"
                        name="enable_extract_meta_data"
                        {% if settings.enable_extract_meta_data %}checked{% endif %}>
                      <label class="form-check-label ms-2" for="enable_extract_meta_data">
                        Enable Extract Meta Data
                      </label>
                      <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Automatically extract and index metadata from uploaded files for enhanced search capabilities and content organization."></i>
                    </div>
                  
                    <div id="metadata_extraction_model_settings" class="mb-3"
                         {% if not settings.enable_extract_meta_data %}style="display: none;"{% endif %}>
                      <label for="metadata_extraction_model" class="form-label">Extraction Model</label>
                      <select class="form-select" id="metadata_extraction_model" name="metadata_extraction_model"
                              data-prev="{{ settings.metadata_extraction_model or '' }}">
                        {% if settings.enable_gpt_apim %}
                          {% for d in (settings.azure_apim_gpt_deployment or '').split(',') if d %}
                            <option value="{{ d }}"
                              {% if settings.metadata_extraction_model == d %}selected{% endif %}>
                              {{ d }}
                            </option>
                          {% endfor %}
                        {% else %}
                          {% for m in settings.gpt_model.selected %}
                            <option value="{{ m.deploymentName }}"
                              {% if settings.metadata_extraction_model == m.deploymentName %}selected{% endif %}>
                              {{ m.deploymentName }} ({{ m.modelName }})
                            </option>
                          {% endfor %}
                        {% endif %}
                      </select>
                    </div>
                </div>

                <!-- Multi-Modal Vision Analysis Section -->
                <div class="card mb-3 p-3" id="multimodal-vision-section">
                    <h5>
                        <i class="bi bi-eye me-2"></i>Multi-Modal Vision Analysis
                    </h5>
                    <p class="text-muted">
                        Enable AI-powered vision analysis for images uploaded to chat or workspace. When enabled alongside Document Intelligence OCR, images will receive both text extraction (OCR) and semantic understanding (vision AI).
                    </p>
                    
                    <div class="alert alert-info mb-3">
                        <strong><i class="bi bi-info-circle"></i> How it works:</strong>
                        <ul class="mb-0 mt-2">
                            <li><strong>Document Intelligence</strong>: Extracts text from images (OCR)</li>
                            <li><strong>Vision Model</strong>: Provides semantic analysis, object detection, and contextual understanding</li>
                            <li>Both analyses are combined and available in citations when Enhanced Citations is enabled</li>
                        </ul>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="enable_multimodal_vision"
                            name="enable_multimodal_vision"
                            {% if settings.enable_multimodal_vision %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="enable_multimodal_vision">
                            Enable Multi-Modal Vision Analysis
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Use GPT-4 Vision or similar models to analyze images for semantic content, objects, and contextual information beyond OCR."></i>
                    </div>
                  
                    <div id="multimodal_vision_model_settings" class="mb-3"
                         {% if not settings.enable_multimodal_vision %}style="display: none;"{% endif %}>
                        <label for="multimodal_vision_model" class="form-label">
                            Vision Model <span class="text-danger">*</span>
                        </label>
                        <select class="form-select" id="multimodal_vision_model" name="multimodal_vision_model"
                                data-prev="{{ settings.multimodal_vision_model or '' }}">
                            <option value="">Select a vision-capable model...</option>
                            {% if settings.enable_gpt_apim %}
                                {% for d in (settings.azure_apim_gpt_deployment or '').split(',') if d %}
                                    <option value="{{ d.strip() }}"
                                        {% if settings.multimodal_vision_model == d.strip() %}selected{% endif %}>
                                        {{ d.strip() }}
                                    </option>
                                {% endfor %}
                            {% else %}
                                {% for m in settings.gpt_model.selected %}
                                    {# Check if model is vision-capable using same logic as JavaScript #}
                                    {% set model_lower = (m.modelName or '').lower() %}
                                    {% set is_vision = 
                                        'vision' in model_lower or
                                        'gpt-4o' in model_lower or
                                        'gpt-4.1' in model_lower or
                                        'gpt-4.5' in model_lower or
                                        'gpt-5' in model_lower or
                                        model_lower.startswith('o1') or
                                        model_lower.startswith('o3') or
                                        'o1-' in model_lower or
                                        'o3-' in model_lower
                                    %}
                                    {% if is_vision %}
                                        <option value="{{ m.deploymentName }}"
                                            {% if settings.multimodal_vision_model == m.deploymentName %}selected{% endif %}>
                                            {{ m.deploymentName }} ({{ m.modelName }})
                                        </option>
                                    {% endif %}
                                {% endfor %}
                            {% endif %}
                        </select>
                        <div class="form-text">Select a GPT model with vision capabilities (e.g., gpt-4o, gpt-4-vision). Only vision-capable models are shown.</div>
                        
                        <button type="button" class="btn btn-secondary mt-3" id="test_multimodal_vision_button">
                            <i class="bi bi-clipboard-check me-1"></i>Test Vision Analysis
                        </button>
                        <div id="test_multimodal_vision_result" class="mt-2"></div>
                    </div>
                </div>
                  

                
                <div class="card mb-3 p-3" id="document-classification-section">
                    <h5>
                        <i class="bi bi-tags me-2"></i>Document Classification
                    </h5>
                    <p class="text-muted">
                        Enable this feature to allow users to classify documents uploaded to their workspaces using predefined categories.
                    </p>
                    <div class="form-group form-check form-switch mb-3">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="enable_document_classification"
                            name="enable_document_classification"
                            {% if settings.enable_document_classification %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="enable_document_classification">
                            Enable Document Classification
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow users to classify uploaded documents with predefined categories for better organization and search filtering."></i>
                    </div>

                    
                    <div id="document_classification_settings" {% if not settings.enable_document_classification %}style="display: none;"{% endif %}>
                        <h6>Classification Categories</h6>
                        <p class="text-muted small">Define the labels and corresponding colors for document classification.</p>
                        <table class="table table-sm table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 50%;">Label</th>
                                    <th style="width: 30%;">Color</th>
                                    <th style="width: 20%;">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="classification-categories-tbody">
                                
                            </tbody>
                        </table>
                        <button type="button" id="add-classification-btn" class="btn btn-success btn-sm mt-2">
                            <i class="bi bi-plus-circle"></i> Add New Category
                        </button>
                        
                        <input type="hidden" name="document_classification_categories_json" id="document_classification_categories_json">
                    </div>
                </div>
                

            </div>

            
            <div class="tab-pane fade" id="citation" role="tabpanel" aria-labelledby="citation-tab">
                
                 <p class="text-muted">
                    Configure standard and enhanced citations features for your and group workspaces.
                </p>

                
                <div class="card p-3 mb-3" id="standard-citations-section">
                    <h5>
                        <i class="bi bi-quote me-2"></i>Standard Citations
                    </h5>
                    <p class="text-muted">
                        Standard citations is always enabled for both Your Workspace and Group Workspace.
                    </p>
                    <p class="mb-0">
                        Users can see text content of the source/citation for documents.
                    </p>
                </div>

                
                <div class="card p-3" id="enhanced-citations-section">
                    <h5>
                        <i class="bi bi-star me-2"></i>Enhanced Citations
                    </h5>
                    <p class="text-muted mb-2">
                        Enable Enhanced Citation to store files in a Storage Account,
                        and show direct references (Preview feature, files are saved to storage, presentation 
                        layer will be available in a future release).
                    </p>

                    
                    <div class="form-group form-check form-switch mb-3">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="enable_enhanced_citations"
                            name="enable_enhanced_citations"
                            {% if settings.enable_enhanced_citations %}checked{% endif %}
                        >
                        <label class="form-check-label ms-2" for="enable_enhanced_citations">
                            Enable Enhanced Citations
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Store original files in Azure Storage and provide direct file references and previews in citations for improved source tracking."></i>
                    </div>

                    
                    <div id="enhanced_citation_settings" style="display: none;">
                        
                        <div class="card mb-3 p-3">
                            <h6><strong>All filetypes</strong></h6>
                            <div class="mb-3">
                                <label for="office_docs_authentication_type" class="form-label">
                                    Storage Account Authentication Type
                                </label>
                                <select class="form-select" id="office_docs_authentication_type" name="office_docs_authentication_type">
                                    <option value="key" {% if settings.office_docs_authentication_type == "key" or not settings.office_docs_authentication_type %}selected{% endif %}>Connection String</option>
                                    <option value="managed_identity" {% if settings.office_docs_authentication_type == "managed_identity" %}selected{% endif %}>Managed Identity</option>
                                </select>
                            </div>

                            <div class="mb-3" id="office_docs_storage_conn_str_group" {% if settings.office_docs_authentication_type == "managed_identity" %}style="display:none;"{% endif %}>
                                <label for="office_docs_storage_account_url" class="form-label">
                                    Storage Account Connection String
                                </label>
                                <div class="input-group">
                                    <input
                                        type="password"
                                        class="form-control"
                                        id="office_docs_storage_account_url"
                                        name="office_docs_storage_account_url"
                                        value="{{ settings.office_docs_storage_account_url or '' }}"
                                    >
                                    <button type="button" class="btn btn-outline-secondary" id="toggle_office_conn_str">Show</button>
                                </div>
                            </div>
                            
                            <div class="mb-3" id="office_docs_storage_url_group" {% if settings.office_docs_authentication_type != "managed_identity" %}style="display:none;"{% endif %}>
                                <label for="office_docs_storage_account_blob_endpoint" class="form-label">
                                    Storage Account Blob Service Endpoint
                                </label>
                                <div class="input-group">
                                    <input
                                        type="password"
                                        class="form-control"
                                        id="office_docs_storage_account_blob_endpoint"
                                        name="office_docs_storage_account_blob_endpoint"
                                        value="{{ settings.office_docs_storage_account_blob_endpoint or '' }}"
                                    >
                                    <button type="button" class="btn btn-outline-secondary" id="toggle_office_url">Show</button>
                                </div>
                            </div>
                        </div>

                        
                        <!-- <div class="card mb-3 p-3">
                            <h6><strong>Video Files</strong></h6>
                            {% if settings.enable_video_file_support %}
                                
                                <div class="mb-3">
                                    <label for="video_files_storage_account_url" class="form-label">
                                        Storage Account Connection String
                                    </label>
                                    
                                    <div class="input-group">
                                        <input
                                            type="password" 
                                            class="form-control"
                                            id="video_files_storage_account_url"
                                            name="video_files_storage_account_url"
                                            value="{{ settings.video_files_storage_account_url or '' }}"
                                        >
                                        <button type="button" class="btn btn-outline-secondary" id="toggle_video_conn_str">Show</button>
                                    </div>
                                    
                                </div>
                            {% else %}
                                
                                <p class="text-danger mb-1">
                                    Video support is currently disabled in the Workspaces tab.
                                </p>
                                <p class="mt-2 mb-0">
                                    <small class="text-muted">
                                        Reference:
                                        <a href="#workspaces" onclick="switchTab(event, 'workspaces-tab')">
                                            Enable Video File Support
                                        </a>
                                        (see the Workspaces tab)
                                    </small>
                                </p>
                            {% endif %}
                        </div>

                        
                        <div class="card mb-3 p-3">
                            <h6><strong>Audio Files</strong></h6>
                            {% if settings.enable_audio_file_support %}
                                
                                <div class="mb-3">
                                    <label for="audio_files_storage_account_url" class="form-label">
                                        Storage Account Connection String
                                    </label>
                                    
                                    <div class="input-group">
                                        <input
                                            type="password" 
                                            class="form-control"
                                            id="audio_files_storage_account_url"
                                            name="audio_files_storage_account_url"
                                            value="{{ settings.audio_files_storage_account_url or '' }}"
                                        >
                                        <button type="button" class="btn btn-outline-secondary" id="toggle_audio_conn_str">Show</button>
                                    </div>
                                    
                                </div>
                            {% else %}
                                
                                <p class="text-danger mb-1">
                                    Audio support is currently disabled in the Workspaces tab.
                                </p>
                                <p class="mt-2 mb-0">
                                    <small class="text-muted">
                                        Reference:
                                        <a href="#workspaces" onclick="switchTab(event, 'workspaces-tab')">
                                            Enable Audio File Support
                                        </a>
                                        (see the Workspaces tab)
                                    </small>
                                </p>
                            {% endif %}
                        </div> -->
                    </div>
                </div>
            </div>

            
            <div class="tab-pane fade" id="safety" role="tabpanel" aria-labelledby="safety-tab">
                
                 <p class="text-muted">
                    Configure content safety, archiving, and user feedback settings. If Content Safety is enabled, user
                    messages will be sent to the safety endpoint for analysis. If User Feedback is enabled, users will see
                    thumbs up/down to provide feedback on AI responses.
                </p>
                <div class="card p-3 mb-3" id="content-safety-section">
                    <h5>
                        <i class="bi bi-shield-exclamation me-2"></i>Content Safety
                    </h5>
                    <p class="text-muted">Enable content safety to filter out inappropriate content.</p>
                    <div class="form-group form-check form-switch mb-3">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="enable_content_safety"
                            name="enable_content_safety"
                            {% if settings.enable_content_safety %}checked{% endif %}
                        >
                        <label class="form-check-label ms-2" for="enable_content_safety">
                            Enable Content Safety
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Filter user messages and AI responses through Azure Content Safety service to detect and block inappropriate content."></i>
                    </div>

                    
                    <div id="content_safety_settings"
                         {% if not settings.enable_content_safety %}style="display: none;"{% endif %}>

                        
                        <div class="form-group form-check form-switch mb-3 d-flex align-items-center">
                            <input
                                type="checkbox"
                                class="form-check-input me-2"
                                id="enable_content_safety_apim"
                                name="enable_content_safety_apim"
                                {% if settings.enable_content_safety_apim %}checked{% endif %}
                            >
                            <label class="form-check-label" for="enable_content_safety_apim">
                                Use APIM instead of direct Content Safety endpoint
                            </label>
                            <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Route content safety requests through Azure API Management instead of directly to the Content Safety service for centralized monitoring and control."></i>
                        </div>

                        
                        <div id="non_apim_content_safety_settings"
                             {% if settings.enable_content_safety_apim %}style="display: none;"{% endif %}>
                            <div class="mb-3">
                                <label for="content_safety_endpoint" class="form-label">
                                    Content Safety Endpoint
                                </label>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="content_safety_endpoint"
                                    name="content_safety_endpoint"
                                    value="{{ settings.content_safety_endpoint or '' }}"
                                >
                            </div>
                            <div class="mb-3">
                                <label for="content_safety_authentication_type" class="form-label">
                                    Authentication Type
                                </label>
                                <select class="form-select" id="content_safety_authentication_type" name="content_safety_authentication_type">
                                    <option value="key" {% if settings.content_safety_authentication_type=='key' %}selected{% endif %}>
                                        Key
                                    </option>
                                    <option value="managed_identity" {% if settings.content_safety_authentication_type=='managed_identity' %}selected{% endif %}>
                                        Managed Identity
                                    </option>
                                </select>
                            </div>
                            <div class="mb-3" id="content_safety_key_container" {% if settings.content_safety_authentication_type !='key' %}style="display: none;"{% endif %}>
                                <label for="content_safety_key" class="form-label">
                                    Content Safety Key
                                </label>
                                <div class="input-group">
                                    <input
                                        type="password"
                                        class="form-control"
                                        id="content_safety_key"
                                        name="content_safety_key"
                                        value="{{ settings.content_safety_key or '' }}"
                                    >
                                    <button
                                        type="button"
                                        class="btn btn-outline-secondary"
                                        id="toggle_content_safety_key"
                                    >
                                        Show
                                    </button>
                                </div>
                            </div>
                        </div>

                        
                        <div id="apim_content_safety_settings"
                             {% if not settings.enable_content_safety_apim %}style="display: none;"{% endif %}>
                            <div class="mb-3">
                                <label for="azure_apim_content_safety_endpoint" class="form-label">
                                    Azure APIM Content Safety Endpoint
                                </label>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="azure_apim_content_safety_endpoint"
                                    name="azure_apim_content_safety_endpoint"
                                    value="{{ settings.azure_apim_content_safety_endpoint or '' }}"
                                >
                            </div>
                            <div class="mb-3">
                                <label for="azure_apim_content_safety_subscription_key" class="form-label">
                                    Azure APIM Content Safety Subscription Key
                                </label>
                                <div class="input-group">
                                    <input
                                        type="password"
                                        class="form-control"
                                        id="azure_apim_content_safety_subscription_key"
                                        name="azure_apim_content_safety_subscription_key"
                                        value="{{ settings.azure_apim_content_safety_subscription_key or '' }}"
                                    >
                                    <button
                                        type="button"
                                        class="btn btn-outline-secondary"
                                        id="toggle_azure_apim_content_safety_subscription_key"
                                    >
                                        Show
                                    </button>
                                </div>
                            </div>
                        </div>

                        <button type="button" class="btn btn-secondary mt-3" id="test_safety_button">
                            Test Safety Connection
                        </button>
                        <div id="test_safety_result" class="mt-2"></div>
                    </div>
                </div>

                
                <div class="card p-3 mb-3" id="user-feedback-section">
                    <h5>
                        <i class="bi bi-chat-square-heart me-2"></i>User Feedback
                    </h5>
                    <p class="text-muted">Enable user feedback (thumbs up/down) for AI responses.</p>
                    <div class="form-group form-check form-switch mb-3">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="enable_user_feedback"
                            name="enable_user_feedback"
                            {% if settings.enable_user_feedback %}checked{% endif %}
                        >
                        <label class="form-check-label ms-2" for="enable_user_feedback">
                            Enable User Feedback (Thumbs Up/Down)
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow users to provide thumbs up/down feedback on AI responses for quality monitoring and improvement."></i>
                    </div>
                </div>
                
                
                <div class="card p-3 mb-3" id="permissions-section">
                    <h5>
                        <i class="bi bi-person-check me-2"></i>Permissions
                    </h5>
                    <p class="text-muted">Control which users can access specific administrative views related to safety and feedback.</p>

                    
                    <div class="form-group form-check form-switch mb-2">
                        <input type="checkbox"
                            class="form-check-input"
                            id="require_member_of_safety_violation_admin"
                            name="require_member_of_safety_violation_admin"
                            {% if settings.require_member_of_safety_violation_admin %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="require_member_of_safety_violation_admin">
                            Require Membership for Safety Violation Admin View
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Restrict access to safety violation reports to users with the 'SafetyViolationAdmin' role instead of general admin access."></i>
                    </div>
                     <p class="text-muted small mb-3">
                        If enabled, only users who are members of the 'SafetyViolationAdmin' role (defined in your App registration) can access the Safety Violations admin page. If disabled, any user with the general 'Admin' role can access it.
                    </p>

                    
                    <div class="form-group form-check form-switch mb-2">
                        <input type="checkbox"
                            class="form-check-input"
                            id="require_member_of_feedback_admin"
                            name="require_member_of_feedback_admin"
                            {% if settings.require_member_of_feedback_admin %}checked{% endif %}>
                        <label class="form-check-label ms-2" for="require_member_of_feedback_admin">
                            Require Membership for Feedback Admin View
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Restrict access to user feedback reports to users with the 'FeedbackAdmin' role instead of general admin access."></i>
                    </div>
                     <p class="text-muted small mb-0">
                        If enabled, only users who are members of the 'FeedbackAdmin' role (defined in your App registration) can access the User Feedback admin page. If disabled, any user with the general 'Admin' role can access it. Requires 'Enable User Feedback' to be active.
                    </p>
                </div>
                
                
                
                <div class="card p-3 mb-3" id="conversation-archiving-section">
                    <h5>
                        <i class="bi bi-archive me-2"></i>Conversation Archiving
                    </h5>
                    <p class="text-muted">When enabled, conversation deletions will be archived instead of permanently deleted.</p>
                    <div class="form-group form-check form-switch mb-3">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="enable_conversation_archiving"
                            name="enable_conversation_archiving"
                            {% if settings.enable_conversation_archiving %}checked{% endif %}
                        >
                        <label class="form-check-label ms-2" for="enable_conversation_archiving">
                            Enable Conversation Archiving
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Archive conversations instead of permanently deleting them, allowing for recovery and compliance with data retention policies."></i>
                    </div>
                </div>
            </div>

            
            <div class="tab-pane fade" id="search-extract" role="tabpanel" aria-labelledby="search-extract-tab">
                
                 <p class="text-muted">
                    Configure Azure AI Search, Document Intelligence, and multimedia support settings.
                </p>

                
                <div class="card p-3 mb-3" id="azure-ai-search-section">
                    <h5><i class="bi bi-search me-2"></i>Azure AI Search</h5>
                    <p class="text-muted">
                        Configure Azure AI Search settings.
                    </p>
                    <div class="form-group form-check form-switch mb-3 d-flex align-items-center">
                        <input
                            type="checkbox"
                            class="form-check-input me-2"
                            id="enable_ai_search_apim"
                            name="enable_ai_search_apim"
                            {% if settings.enable_ai_search_apim %}checked{% endif %}
                        >
                        <label class="form-check-label" for="enable_ai_search_apim">
                            Use APIM instead of direct Azure AI Search
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Route Azure AI Search requests through API Management for centralized monitoring and control instead of direct service access."></i>
                    </div>

                    <div>
                        
                        <div id="non_apim_ai_search_settings" {% if settings.enable_ai_search_apim %}style="display: none;"{% endif %}>
                            <div class="mb-3">
                                <label for="azure_ai_search_endpoint" class="form-label">Search Endpoint</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="azure_ai_search_endpoint"
                                    name="azure_ai_search_endpoint"
                                    value="{{ settings.azure_ai_search_endpoint or '' }}"
                                >
                            </div>
                            <div class="mb-3">
                                <label for="azure_ai_search_authentication_type" class="form-label">
                                    Authentication Type
                                </label>
                                <select class="form-select" id="azure_ai_search_authentication_type" name="azure_ai_search_authentication_type">
                                    <option value="key" {% if settings.azure_ai_search_authentication_type=='key' %}selected{% endif %}>
                                        Key
                                    </option>
                                    <option value="managed_identity" {% if settings.azure_ai_search_authentication_type=='managed_identity' %}selected{% endif %}>
                                        Managed Identity
                                    </option>
                                </select>
                            </div>
                            <div class="mb-3" id="azure_ai_search_key_container" {% if settings.azure_ai_search_authentication_type !='key' %}style="display: none;"{% endif %}>
                                <label for="azure_ai_search_key" class="form-label">Search Key</label>
                                <div class="input-group">
                                    <input
                                        type="password"
                                        class="form-control"
                                        id="azure_ai_search_key"
                                        name="azure_ai_search_key"
                                        value="{{ settings.azure_ai_search_key or '' }}"
                                    >
                                    <button
                                        type="button"
                                        class="btn btn-outline-secondary"
                                        id="toggle_search_key"
                                    >
                                        Show
                                    </button>
                                </div>
                            </div>
                        </div>

                        
                        <div id="apim_ai_search_settings" {% if not settings.enable_ai_search_apim %}style="display: none;"{% endif %}>
                            <div class="mb-3">
                                <label for="azure_apim_ai_search_endpoint" class="form-label">
                                    Azure APIM AI Search Endpoint
                                </label>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="azure_apim_ai_search_endpoint"
                                    name="azure_apim_ai_search_endpoint"
                                    value="{{ settings.azure_apim_ai_search_endpoint or '' }}"
                                >
                            </div>
                            <div class="mb-3">
                                <label for="azure_apim_ai_search_subscription_key" class="form-label">
                                    Azure APIM AI Search Subscription Key
                                </label>
                                <div class="input-group">
                                    <input
                                        type="password"
                                        class="form-control"
                                        id="azure_apim_ai_search_subscription_key"
                                        name="azure_apim_ai_search_subscription_key"
                                        value="{{ settings.azure_apim_ai_search_subscription_key or '' }}"
                                    >
                                    <button
                                        type="button"
                                        class="btn btn-outline-secondary"
                                        id="toggle_azure_apim_ai_search_subscription_key"
                                    >
                                        Show
                                    </button>
                                </div>
                            </div>
                        </div>

                        
                        <button
                            type="button"
                            class="btn btn-secondary mt-3"
                            style="width: auto;"
                            id="test_azure_ai_search_button"
                        >
                            Test Azure AI Search Connection
                        </button>
                        <div id="test_azure_ai_search_result" class="mt-2"></div>
                    </div>
                </div>

                
                <div class="card p-3 mb-3" id="document-intelligence-section">
                    <h5><i class="bi bi-file-earmark-text me-2"></i>Document Intelligence</h5>
                    <p class="text-muted">
                        Configure Azure Document Intelligence settings.
                    </p>
                    <div class="form-group form-check form-switch mb-3 d-flex align-items-center">
                        <input
                            type="checkbox"
                            class="form-check-input me-2"
                            id="enable_document_intelligence_apim"
                            name="enable_document_intelligence_apim"
                            {% if settings.enable_document_intelligence_apim %}checked{% endif %}
                        >
                        <label class="form-check-label" for="enable_document_intelligence_apim">
                            Use APIM instead of direct Document Intelligence endpoint
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Route Document Intelligence requests through API Management for centralized monitoring and control instead of direct service access."></i>
                    </div>

                    <div>
                        
                        <div id="non_apim_document_intelligence_settings" {% if settings.enable_document_intelligence_apim %}style="display: none;"{% endif %}>
                            <div class="mb-3">
                                <label for="azure_document_intelligence_endpoint" class="form-label">
                                    Document Intelligence Endpoint
                                </label>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="azure_document_intelligence_endpoint"
                                    name="azure_document_intelligence_endpoint"
                                    value="{{ settings.azure_document_intelligence_endpoint or '' }}"
                                >
                            </div>
                            <div class="mb-3">
                                <label for="azure_document_intelligence_authentication_type" class="form-label">
                                    Authentication Type
                                </label>
                                <select class="form-select" id="azure_document_intelligence_authentication_type" name="azure_document_intelligence_authentication_type">
                                    <option value="key" {% if settings.azure_document_intelligence_authentication_type=='key' %}selected{% endif %}>
                                        Key
                                    </option>
                                    <option value="managed_identity" {% if settings.azure_document_intelligence_authentication_type=='managed_identity' %}selected{% endif %}>
                                        Managed Identity
                                    </option>
                                </select>
                            </div>
                            <div class="mb-3" id="azure_document_intelligence_key_container" {% if settings.azure_document_intelligence_authentication_type !='key' %}style="display: none;"{% endif %}>
                                <label for="azure_document_intelligence_key" class="form-label">
                                    Document Intelligence Key
                                </label>
                                <div class="input-group">
                                    <input
                                        type="password"
                                        class="form-control"
                                        id="azure_document_intelligence_key"
                                        name="azure_document_intelligence_key"
                                        value="{{ settings.azure_document_intelligence_key or '' }}"
                                    >
                                    <button
                                        type="button"
                                        class="btn btn-outline-secondary"
                                        id="toggle_docintel_key"
                                    >
                                        Show
                                    </button>
                                </div>
                            </div>
                        </div>

                        
                        <div id="apim_document_intelligence_settings" {% if not settings.enable_document_intelligence_apim %}style="display: none;"{% endif %}>
                            <div class="mb-3">
                                <label for="azure_apim_document_intelligence_endpoint" class="form-label">
                                    Azure APIM Document Intelligence Endpoint
                                </label>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="azure_apim_document_intelligence_endpoint"
                                    name="azure_apim_document_intelligence_endpoint"
                                    value="{{ settings.azure_apim_document_intelligence_endpoint or '' }}"
                                >
                            </div>
                            <div class="mb-3">
                                <label for="azure_apim_document_intelligence_subscription_key" class="form-label">
                                    Azure APIM Document Intelligence Subscription Key
                                </label>
                                <div class="input-group">
                                    <input
                                        type="password"
                                        class="form-control"
                                        id="azure_apim_document_intelligence_subscription_key"
                                        name="azure_apim_document_intelligence_subscription_key"
                                        value="{{ settings.azure_apim_document_intelligence_subscription_key or '' }}"
                                    >
                                    <button
                                        type="button"
                                        class="btn btn-outline-secondary"
                                        id="toggle_azure_apim_document_intelligence_subscription_key"
                                    >
                                        Show
                                    </button>
                                </div>
                            </div>
                        </div>

                        
                        <button
                            type="button"
                            class="btn btn-secondary mt-3"
                            style="width: auto;"
                            id="test_azure_doc_intelligence_button"
                        >
                            Test Document Intelligence Connection
                        </button>
                        <div id="test_azure_doc_intelligence_result" class="mt-2"></div>
                    </div>
                </div>

                <!-- Multimedia Support Section -->
                <div class="card p-3 mb-3" id="multimedia-support-section">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5 class="mb-0"><i class="bi bi-play-circle me-2"></i>Multimedia Support</h5>
                        <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#videoIndexerInfoModal">
                            <i class="bi bi-info-circle me-1"></i>Configuration Guide
                        </button>
                    </div>
                    <p class="text-muted mb-3">
                        Support video and audio file upload for transcription, indexing, and embedding.
                    </p>

                    <!-- Video File Support -->
                    <div class="form-group form-check form-switch mb-3">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="enable_video_file_support"
                            name="enable_video_file_support"
                            {% if settings.enable_video_file_support %}checked{% endif %}
                        >
                        <label class="form-check-label ms-2" for="enable_video_file_support">
                            Enable Video File Support
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow video file uploads with automatic transcription and indexing for AI-powered content search and analysis."></i>
                    </div>

                    <div id="video_indexer_settings" class="card mb-3 p-3"
                            {% if not settings.enable_video_file_support %}style="display: none;"{% endif %}>
                        <h5>Azure Video Indexer Settings</h5>
                        <p class="text-muted">Configure Azure Video Indexer for transcription & indexing using Managed Identity authentication.</p>
                        
                        <div class="alert alert-info">
                            <strong><i class="bi bi-info-circle"></i> Prerequisites:</strong>
                            <ul class="mb-0 mt-2">
                                <li>App Service must have System-assigned Managed Identity enabled</li>
                                <li>Managed Identity must have <strong>Contributor</strong> role on the Video Indexer resource</li>
                                <li>See <a href="https://learn.microsoft.com/azure/azure-video-indexer/connect-to-azure" target="_blank">Azure Video Indexer documentation</a> for setup details</li>
                            </ul>
                        </div>

                        <div class="mb-3">
                            <label for="video_indexer_endpoint" class="form-label">API Endpoint</label>
                            <input type="text" class="form-control"
                                id="video_indexer_endpoint" name="video_indexer_endpoint"
                                value="{{ settings.video_indexer_endpoint or 'https://api.videoindexer.ai' }}">
                            <div class="form-text">Default: https://api.videoindexer.ai</div>
                        </div>

                        <div class="mb-3">
                            <label for="video_indexer_resource_group" class="form-label">Resource Group <span class="text-danger">*</span></label>
                            <input type="text" class="form-control"
                                id="video_indexer_resource_group" name="video_indexer_resource_group"
                                value="{{ settings.video_indexer_resource_group or '' }}"
                                placeholder="e.g., rg-videoindexer-prod">
                            <div class="form-text">The Azure resource group containing your Video Indexer account</div>
                        </div>

                        <div class="mb-3">
                            <label for="video_indexer_subscription_id" class="form-label">Subscription ID <span class="text-danger">*</span></label>
                            <input type="text" class="form-control"
                                id="video_indexer_subscription_id" name="video_indexer_subscription_id"
                                value="{{ settings.video_indexer_subscription_id or '' }}"
                                placeholder="e.g., 12345678-1234-1234-1234-123456789abc">
                            <div class="form-text">Your Azure subscription ID</div>
                        </div>

                        <div class="mb-3">
                            <label for="video_indexer_account_name" class="form-label">Account Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control"
                                id="video_indexer_account_name" name="video_indexer_account_name"
                                value="{{ settings.video_indexer_account_name or '' }}"
                                placeholder="e.g., my-video-indexer">
                            <div class="form-text">The name of your Video Indexer account resource</div>
                        </div>

                        <div class="mb-3">
                            <label for="video_indexer_location" class="form-label">Location <span class="text-danger">*</span></label>
                            <input type="text" class="form-control"
                                id="video_indexer_location" name="video_indexer_location"
                                value="{{ settings.video_indexer_location or '' }}"
                                placeholder="e.g., eastus">
                            <div class="form-text">Azure region where your Video Indexer account is deployed (e.g., eastus, westus2, northeurope)</div>
                        </div>

                        <div class="mb-3">
                            <label for="video_indexer_account_id" class="form-label">Account ID <span class="text-danger">*</span></label>
                            <input type="text" class="form-control"
                                id="video_indexer_account_id" name="video_indexer_account_id"
                                value="{{ settings.video_indexer_account_id or '' }}"
                                placeholder="e.g., 12345678-abcd-1234-abcd-123456789abc">
                            <div class="form-text">Found in the Video Indexer account Overview page in Azure Portal</div>
                        </div>

                        <div class="mb-3">
                            <label for="video_indexer_arm_api_version" class="form-label">ARM API Version</label>
                            <input type="text" class="form-control"
                                id="video_indexer_arm_api_version" name="video_indexer_arm_api_version"
                                value="{{ settings.video_indexer_arm_api_version or '2024-01-01' }}">
                            <div class="form-text">Default: 2024-01-01</div>
                        </div>

                        <div class="mb-3">
                            <label for="video_index_timeout" class="form-label">Timeout (seconds)</label>
                            <input type="number" class="form-control"
                                id="video_index_timeout" name="video_index_timeout"
                                value="{{ settings.video_index_timeout or 600 }}">
                        </div>
                    </div>

                    <!-- Audio File Support -->
                    <div class="form-group form-check form-switch mb-3">
                        <input
                            type="checkbox"
                            class="form-check-input"
                            id="enable_audio_file_support"
                            name="enable_audio_file_support"
                            {% if settings.enable_audio_file_support %}checked{% endif %}
                        >
                        <label class="form-check-label ms-2" for="enable_audio_file_support">
                            Enable Audio File Support
                        </label>
                        <i class="bi bi-info-circle ms-2" data-bs-toggle="tooltip" title="Allow audio file uploads with automatic transcription and indexing for AI-powered content search and analysis."></i>
                    </div>

                    <div id="audio_service_settings" class="card mb-3 p-3"
                            {% if not settings.enable_audio_file_support %}style="display: none;"{% endif %}>
                        <h5>Speech Service Settings</h5>
                        <p class="text-muted">Configure Azure Speech Service for audio transcription & embedding.</p>

                        <div class="mb-3">
                            <label for="speech_service_endpoint" class="form-label">Endpoint</label>
                            <input type="text" class="form-control"
                                id="speech_service_endpoint" name="speech_service_endpoint"
                                value="{{ settings.speech_service_endpoint or '' }}"
                                placeholder="https://<location>.cognitiveservices.azure.<com or us>/">
                        </div>

                        <div class="mb-3">
                            <label for="speech_service_location" class="form-label">Location</label>
                            <input type="text" class="form-control"
                                id="speech_service_location" name="speech_service_location"
                                value="{{ settings.speech_service_location or '' }}">
                        </div>

                        <div class="mb-3">
                            <label for="speech_service_locale" class="form-label">Locale</label>
                            <input type="text" class="form-control"
                                id="speech_service_locale" name="speech_service_locale"
                                value="{{ settings.speech_service_locale or '' }}">
                        </div>

                        <div class="mb-3">
                            <label for="speech_service_key" class="form-label">API Key</label>
                            <div class="input-group">
                            <input type="password" class="form-control"
                                    id="speech_service_key" name="speech_service_key"
                                    value="{{ settings.speech_service_key or '' }}">
                            <button type="button" class="btn btn-outline-secondary"
                                    id="toggle_speech_service_key">Show</button>
                            </div>
                        </div>
                    </div>

                    <p class="mt-2 mb-0">
                        <small class="text-muted">
                            <a href="#citation" onclick="switchTab(event, 'citation-tab')">
                                Enhanced Citations
                            </a>
                             will dramatically improve the citation experience for video and audio files.
                        </small>
                    </p>
                </div>
            </div>

        </div> 
    </form>
    
    <!-- Floating Save Button -->
    <button type="submit" form="admin-settings-form" class="btn btn-secondary floating-save-btn" id="floating-save-btn" disabled>
        <i class="bi bi-floppy"></i> Save Settings
    </button>
    
    <div>
        <!-- Plugin Modal (moved outside form) -->
        {% include '_plugin_modal.html' %}

        <!-- Agent Modal (moved outside form) -->
        {% include '_agent_modal.html' %}

        <!-- Front Door Info Modal -->
        {% include '_front_door_info.html' %}

        <!-- Health Check Info Modal -->
        {% include '_health_check_info.html' %}

        <!-- Swagger Info Modal -->
        <div class="modal fade" id="swaggerInfoModal" tabindex="-1" aria-labelledby="swaggerInfoModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="swaggerInfoModalLabel">
                            <i class="bi bi-file-earmark-code me-2"></i>Why Enable Swagger API Documentation?
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-info">
                            <i class="bi bi-lightbulb me-2"></i>
                            <strong>Swagger/OpenAPI provides automatic, interactive API documentation</strong> for all your application endpoints.
                        </div>
                        
                        <h6><i class="bi bi-check-circle-fill text-success me-2"></i>Benefits of Enabling Swagger:</h6>
                        <ul class="mb-4">
                            <li><strong>Interactive Testing:</strong> Test API endpoints directly from the browser interface</li>
                            <li><strong>Automatic Documentation:</strong> Self-updating docs as you add/modify routes</li>
                            <li><strong>Schema Validation:</strong> Ensures request/response formats are correct</li>
                            <li><strong>Developer Productivity:</strong> Faster development and debugging</li>
                            <li><strong>Integration Support:</strong> Easy API discovery for external integrations</li>
                            <li><strong>Security Visibility:</strong> Clear view of authentication requirements</li>
                        </ul>
                        
                        <h6><i class="bi bi-info-circle-fill text-primary me-2"></i>What You Get:</h6>
                        <ul class="mb-4">
                            <li><code>/swagger</code> - Interactive Swagger UI for testing endpoints</li>
                            <li><code>/swagger.json</code> - OpenAPI 3.0 specification in JSON format</li>
                            <li>Automatic route discovery and documentation</li>
                            <li>Built-in search and filtering capabilities</li>
                            <li>Response schema validation and examples</li>
                        </ul>
                        
                        <h6><i class="bi bi-shield-check-fill text-warning me-2"></i>Security Considerations:</h6>
                        <ul class="mb-3">
                            <li><strong>Authentication Required:</strong> Swagger UI requires admin login</li>
                            <li><strong>Rate Limited:</strong> Built-in protection against API discovery attacks</li>
                            <li><strong>Internal Use:</strong> Best used by developers and system administrators</li>
                            <li><strong>Production Ready:</strong> Safe for production environments with proper access controls</li>
                        </ul>
                        
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            <strong>Recommendation:</strong> Enable in development/testing environments. 
                            In production, consider limiting access to admin users only.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <a href="/swagger" class="btn btn-primary" target="_blank">
                            <i class="bi bi-box-arrow-up-right me-1"></i>Open Swagger UI
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Video Indexer Info Modal -->
        {% include '_video_indexer_info.html' %}
    </div>
</div>
{% endblock %}
<script>
    // Live preview for banner in admin
    document.addEventListener('DOMContentLoaded', function() {
        const textInput = document.getElementById('classification_banner_text');
        const colorInput = document.getElementById('classification_banner_color');
        const preview = document.getElementById('classification-banner-preview');
        function updatePreview() {
            preview.textContent = textInput.value || 'Banner Preview';
            preview.style.background = colorInput.value;
            preview.style.color = '#fff'; // Always white text for preview
        }
        if (textInput && colorInput && preview) {
            textInput.addEventListener('input', updatePreview);
            colorInput.addEventListener('input', updatePreview);
        }
    });
</script>

{% block scripts %}

<!-- <script src="https://cdn.jsdelivr.net/npm/simplemde@1.11.2/dist/simplemde.min.js"></script>
 LOCAL VERSION BELOW
-->
 <script src="/static/js/simplemde/simplemde.min.js"></script>
 
<script>
    // Existing SimpleMDE script...
     // We’ll store the SimpleMDE instance globally so we can destroy or read its content
    let simplemde = null;

    // Grab references to the toggle, the editor container, and the preview container
    const toggleLandingPageEditor = document.getElementById("toggleLandingPageEditor");
    const landingPageEditorContainer = document.getElementById("landingPageEditorContainer");
    const landingPageMarkdownPreview = document.getElementById("landingPageMarkdownPreview");

    function showEditor() {
        // Show the text area container
        landingPageEditorContainer.style.display = "block";
        // Hide the preview container
        landingPageMarkdownPreview.style.display = "none";

        // If we haven't already created the editor, do so
        if (!simplemde) {
            simplemde = new SimpleMDE({
                element: document.getElementById("landing_page_text_editor"),
                // Optionally add any SimpleMDE config here:
                // placeholder: "Enter your landing page markdown..."
            });
        }
    }

    function showPreview() {
        // Hide the text area container
        landingPageEditorContainer.style.display = "none";
        // Show the preview container
        landingPageMarkdownPreview.style.display = "block";

        // Render the markdown inside the preview container
        if (simplemde) {
            landingPageMarkdownPreview.innerHTML = simplemde.markdown(simplemde.value());
        } else {
            // If for some reason simplemde is null (e.g., user never toggled on?),
            // just show raw text
            landingPageMarkdownPreview.innerHTML = document.getElementById("landing_page_text_editor").value;
        }
    }

    // Listen for changes on the toggle
    toggleLandingPageEditor.addEventListener("change", () => {
        if (toggleLandingPageEditor.checked) {
            showEditor();
        } else {
            showPreview();
        }
    });

    // On page load, decide which view to show, based on user’s stored setting
    if (toggleLandingPageEditor.checked) {
        showEditor();
    } else {
        showPreview();
    }
</script>

<script>
    // Prepopulate model arrays and classification data from server
    window.gptSelected = JSON.parse('{{ settings.gpt_model.selected|tojson()|safe }}' || '[]');
    window.gptAll      = JSON.parse('{{ settings.gpt_model.all|tojson()|safe }}' || '[]');

    window.embeddingSelected = JSON.parse('{{ settings.embedding_model.selected|tojson()|safe }}' || '[]');
    window.embeddingAll      = JSON.parse('{{ settings.embedding_model.all|tojson()|safe }}' || '[]');

    window.imageSelected = JSON.parse('{{ settings.image_gen_model.selected|tojson()|safe }}' || '[]');
    window.imageAll      = JSON.parse('{{ settings.image_gen_model.all|tojson()|safe }}' || '[]');

    // *** NEW: Classification Data ***
    try {
        let categoriesStr = '{{ settings.document_classification_categories|tojson(indent=None)|safe }}';
        if (!categoriesStr || categoriesStr.trim() === '') {
            categoriesStr = '[]';
        }
        window.classificationCategories = JSON.parse(categoriesStr);
    } catch (e) {
        console.error("Error parsing classification categories:", e);
        window.classificationCategories = [];
    }
    // Ensure it's always an array
    if (!Array.isArray(window.classificationCategories)) {
        window.classificationCategories = [];
    }
    window.enableDocumentClassification = "{{ enable_document_classification }}";

    // *** NEW: External Links Data ***
    try {
        let externalLinksStr = '{{ settings.external_links|tojson(indent=None)|safe }}';
        if (!externalLinksStr || externalLinksStr.trim() === '') {
            externalLinksStr = '[]';
        }
        window.externalLinks = JSON.parse(externalLinksStr);
    } catch (e) {
        console.error("Error parsing external links:", e);
        window.externalLinks = [];
    }
    // Ensure it's always an array
    if (!Array.isArray(window.externalLinks)) {
        window.externalLinks = [];
    }
    window.enableExternalLinks = "{{ enable_external_links }}";
    window.externalLinksMenuName = "{{ settings.external_links_menu_name or 'External Links' }}";
    window.externalLinksForceMenu = "{{ settings.external_links_force_menu }}";

</script>
<script type="module" src="{{ url_for('static', filename='js/admin/admin_settings.js') }}"></script>
<script type="module" src="{{ url_for('static', filename='js/admin/admin_sidebar_nav.js') }}"></script>
<script type="module" src="{{ url_for('static', filename='js/plugin_modal_stepper.js') }}"></script>
{% if settings.enable_semantic_kernel %}
<script type="module" src="{{ url_for('static', filename='js/admin/admin_plugins.js') }}"></script>
<script type="module" src="{{ url_for('static', filename='js/admin/admin_agents.js') }}"></script>
{% endif %}

<!-- Script to update the walkthrough steps based on form changes -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle workspace toggle changes to update requirement status
        const userWorkspaceToggle = document.getElementById('enable_user_workspace');
        const groupWorkspaceToggle = document.getElementById('enable_group_workspaces');
        
        if (userWorkspaceToggle && groupWorkspaceToggle) {
            [userWorkspaceToggle, groupWorkspaceToggle].forEach(toggle => {
                toggle.addEventListener('change', function() {
                    updateWalkthroughRequirements();
                    // Recalculate available steps and refresh navigation
                    const currentStep = getCurrentWalkthroughStep();
                    navigateToWalkthroughStep(currentStep);
                });
            });
        }
        
        // Handle video support toggle in main form
        const videoSupportToggle = document.getElementById('enable_video_file_support');
        if (videoSupportToggle) {
            videoSupportToggle.addEventListener('change', function() {
                updateWalkthroughRequirements();
                
                // Recalculate available steps and refresh navigation
                const currentStep = getCurrentWalkthroughStep();
                navigateToWalkthroughStep(currentStep);
            });
        }
        
        // Handle audio support toggle in main form
        const audioSupportToggle = document.getElementById('enable_audio_file_support');
        if (audioSupportToggle) {
            audioSupportToggle.addEventListener('change', function() {
                updateWalkthroughRequirements();
                
                // Recalculate available steps and refresh navigation
                const currentStep = getCurrentWalkthroughStep();
                navigateToWalkthroughStep(currentStep);
            });
        }
        
        // Handle Front Door toggle in main form
        const frontDoorToggle = document.getElementById('enable_front_door');
        const frontDoorUrlSettings = document.getElementById('front-door-url-settings');
        const frontDoorUrlInput = document.getElementById('front_door_url');
        const homeUrlPreview = document.getElementById('home-url-preview');
        const oauthUrlPreview = document.getElementById('oauth-url-preview');
        
        function updateFrontDoorPreviews() {
            const baseUrl = frontDoorUrlInput?.value.trim() || 'https://your-frontdoor.azurefd.net';
            if (homeUrlPreview) {
                homeUrlPreview.textContent = baseUrl;
            }
            if (oauthUrlPreview) {
                oauthUrlPreview.textContent = `${baseUrl}/getAToken`;
            }
        }
        
        function toggleFrontDoorSettings() {
            if (frontDoorToggle && frontDoorUrlSettings) {
                if (frontDoorToggle.checked) {
                    frontDoorUrlSettings.style.display = 'block';
                    updateFrontDoorPreviews();
                } else {
                    frontDoorUrlSettings.style.display = 'none';
                }
            }
        }
        
        if (frontDoorToggle) {
            frontDoorToggle.addEventListener('change', toggleFrontDoorSettings);
            // Initialize state on page load
            toggleFrontDoorSettings();
        }
        
        if (frontDoorUrlInput) {
            frontDoorUrlInput.addEventListener('input', updateFrontDoorPreviews);
            // Initialize previews on page load
            updateFrontDoorPreviews();
        }
        
        // Handle walkthrough container events
        const walkthroughContainer = document.getElementById('settings-walkthrough-container');
        if (walkthroughContainer) {
            // Close button functionality
            const closeBtn = document.getElementById('close-walkthrough-btn');
            if (closeBtn) {
                closeBtn.addEventListener('click', hideWalkthrough);
            }

            // Custom event listener for step changes
            walkthroughContainer.addEventListener('walkthroughStepChanged', function(e) {
                const currentStep = e.detail?.step || 1;
                const totalSteps = document.querySelectorAll('.walkthrough-step').length;
                
                const prevBtn = document.getElementById('walkthrough-prev-btn');
                const nextBtn = document.getElementById('walkthrough-next-btn');
                const finishBtn = document.getElementById('walkthrough-finish-btn');
                
                // Hide/show previous button based on first step
                if (prevBtn) prevBtn.style.display = currentStep === 1 ? 'none' : 'inline-block';
                
                // Show finish button on last step, next button otherwise
                if (nextBtn && finishBtn) {
                    nextBtn.style.display = currentStep === totalSteps ? 'none' : 'inline-block';
                    finishBtn.style.display = currentStep === totalSteps ? 'inline-block' : 'none';
                }
            });
        }
        
        // Initial update
        updateWalkthroughRequirements();
    });
    
    function updateWalkthroughRequirements() {
        const workspaceEnabled = document.getElementById('enable_user_workspace')?.checked || false;
        const groupsEnabled = document.getElementById('enable_group_workspaces')?.checked || false;
        const workspacesEnabled = workspaceEnabled || groupsEnabled;
        
        // Update embedding requirements
        updateRequirementStatus('embedding', workspacesEnabled);
        
        // Update AI Search requirements
        updateRequirementStatus('ai-search', workspacesEnabled);
        
        // Update Document Intelligence requirements
        updateRequirementStatus('doc-intelligence', workspacesEnabled);
        
        // Update Video support requirements
        const videoEnabled = document.getElementById('walkthrough-enable-video')?.checked || 
                            document.getElementById('enable_video_file_support')?.checked || false;
        updateRequirementStatus('video-support', workspacesEnabled && videoEnabled);
        
        // Update Audio support requirements
        const audioEnabled = document.getElementById('walkthrough-enable-audio')?.checked || 
                            document.getElementById('enable_audio_file_support')?.checked || false;
        updateRequirementStatus('audio-support', workspacesEnabled && audioEnabled);
        
        // If we're in the walkthrough, update completion status for current step
        const currentStepElem = document.querySelector('.walkthrough-step:not([style*=\'display: none\'])');
        if (currentStepElem) {
            const currentStep = parseInt(currentStepElem.id?.split('-')[2]) || 1;
            if (typeof updateStepCompletionStatus === 'function') {
                updateStepCompletionStatus(currentStep);
            }
        }
    }
    
    function updateRequirementStatus(section, isRequired, isComplete = false) {
        // Update requirement alert
        const requirementAlert = document.getElementById(`${section}-requirement-alert`);
        if (requirementAlert) {
            if (isRequired && isComplete) {
                requirementAlert.className = 'alert alert-success';
                requirementAlert.innerHTML = '<strong>Complete:</strong> Configuration finished for this section.';
            } else if (isRequired) {
                requirementAlert.className = 'alert alert-danger';
                requirementAlert.innerHTML = '<strong>Required:</strong> This configuration is required for workspace functionality.';
            } else {
                requirementAlert.className = 'alert alert-info';
                requirementAlert.innerHTML = '<strong>Optional:</strong> This configuration is optional.';
            }
        }
        
        // Update badges
        const badges = document.querySelectorAll(`[id$="${section}-badge"], [id*="${section}-"][id$="badge"]`);
        badges.forEach(badge => {
            if (isRequired && isComplete) {
                badge.className = 'badge bg-success';
                badge.textContent = 'Complete';
            } else if (isRequired) {
                badge.className = 'badge bg-danger';
                badge.textContent = 'Required';
            } else {
                badge.className = 'badge bg-secondary';
                badge.textContent = 'Optional';
            }
        });
    }

    // Function to hide the walkthrough
    function hideWalkthrough() {
        const container = document.getElementById('settings-walkthrough-container');
        if (container) {
            container.style.display = 'none';
        }
    }
    
    /**
     * Finishes the walkthrough and saves the form
     */
    function finishSetupAndSave() {
        // Hide the walkthrough
        hideWalkthrough();
        
        // Submit the form
        document.getElementById('admin-settings-form').submit();
    }

    // Time-based turnoff functionality
    function toggleTimeControls(type) {
        const mainToggle = document.getElementById(`enable_${type}_${type === 'debug' ? 'logging' : 'processing_logs'}`);
        const timeControls = document.getElementById(`${type}-time-controls`);
        
        if (timeControls) {
            timeControls.style.display = mainToggle.checked ? 'block' : 'none';
        }
    }

    function toggleTimerInputs(type) {
        const timerToggle = document.getElementById(`enable_${type}_${type === 'debug' ? 'logging' : 'processing_logs'}_timer`);
        const timerInputs = document.getElementById(`${type}-timer-inputs`);
        
        if (timerInputs) {
            timerInputs.style.display = timerToggle.checked ? 'block' : 'none';
        }
        
        // Update the max values based on selected unit
        updateTimerLimits(type);
    }

    function updateTimerLimits(type) {
        const unitSelect = document.getElementById(`${type}_timer_unit`);
        const valueInput = document.getElementById(`${type}_timer_value`);
        
        if (unitSelect && valueInput) {
            const unit = unitSelect.value;
            let max = 1;
            
            switch(unit) {
                case 'minutes':
                    max = 120;
                    break;
                case 'hours':
                    max = 24;
                    break;
                case 'days':
                    max = 7;
                    break;
                case 'weeks':
                    max = 52;
                    break;
            }
            
            valueInput.max = max;
            if (parseInt(valueInput.value) > max) {
                valueInput.value = max;
            }
            if (parseInt(valueInput.value) < 1) {
                valueInput.value = 1;
            }
        }
    }

    // Add event listeners when the page loads
    document.addEventListener('DOMContentLoaded', function() {
        // Add change listeners for timer unit dropdowns
        ['debug', 'file'].forEach(type => {
            const unitSelect = document.getElementById(`${type}_timer_unit`);
            if (unitSelect) {
                unitSelect.addEventListener('change', () => updateTimerLimits(type));
            }
            
            const valueInput = document.getElementById(`${type}_timer_value`);
            if (valueInput) {
                valueInput.addEventListener('input', () => updateTimerLimits(type));
            }
        });
        
        // Initialize timer limits
        updateTimerLimits('debug');
        updateTimerLimits('file');
    });

</script>
{% endblock %}