<!--
  Copyright (C) 2023-2025 Cognizant Digital Business, Evolutionary AI.
  All Rights Reserved.
  Issued under the Academic Public License.

  You can be released from the terms, and requirements of the Academic Public
  License by purchasing a commercial license.
  Purchase of a commercial license is mandatory for any use of the
  neuro-san-web-client SDK Software in commercial settings.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Multi-Agent Accelerator User Interface</title>

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

    <!-- Font Awesome CSS -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

    <!-- Marked.js and DOMPurify -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify@2.4.0/dist/purify.min.js"></script>

    <!-- Socket.IO -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.min.js"></script>
</head>
<body>

    <!-- Main Container -->
    <div class="container-fluid d-flex flex-column p-0" style="height: calc(100vh);">

         <!-- Page Title with Subtitle -->
        <header class="bg-primary text-white text-center py-3">
            <h1>Multi-Agent Accelerator</h1>
            <h5 class="mt-2">Neuro AI</h5> <!-- Subtitle -->
        </header>

        <!-- Chat Window -->
        <div id="chat-window" class="flex-grow-1 overflow-auto p-3 bg-white">
            <div id="messages" class="p-3" style="height: 100%; overflow-y: auto;">
                <!-- Messages will be appended here -->
            </div>
        </div>
        <div id="loading-indicator" class="text-center" style="display: none;">
            <div class="spinner-border text-primary" role="status"></div>
            <span>Assistant is typing...</span>
        </div>

        <!-- Input Area -->
        <div class="input-group p-3 bg-light" style="max-width: 900px; margin: 0 auto;">
            <textarea id="user-input" class="form-control" placeholder="Type your message to communicate with the agent..." rows="2"></textarea>
            <div class="input-group-append">
                <button id="send-button" class="btn btn-primary" type="button">
                    <i class="fas fa-paper-plane"></i> Send
                </button>
            </div>
        </div>
        <details id="diagram-details">
            <summary>
                Agent Network Diagram
            </summary>
            <div id="diagram-container" class="border rounded p-3 bg-white" style="height: 750px; overflow-y: hidden;">
                <iframe id="diagram-frame" style="width: 100%; height: 100%; border: none; overflow: hidden;"></iframe>
            </div>
        </details>
        <details id="communications-details">
            <summary>
                Agent Communications
            </summary>
            <div class="border rounded p-3 bg-white" style="height: 150px; overflow-y: auto;">
                <pre id="agent-logs" class="mb-0"></pre>
            </div>
        </details>
        <details id="config-details">
            <summary>
                Configuration
            </summary>
            <div id="configForm">
                <div class="card-body">
                    <form method="POST" action="/">
                        <div class="form-group row">
                            <label for="host" class="col-sm-2 col-form-label"><i class="fas fa-server"></i> Host:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="host" name="host" value="{{ host }}"
                                       placeholder="Enter the host address" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="port" class="col-sm-2 col-form-label"><i class="fas fa-plug"></i> Port:</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="port" name="port" value="{{ port }}"
                                       placeholder="Enter port number" required min="1" max="65535">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="agent_name" class="col-sm-2 col-form-label"><i class="fas fa-network-wired"></i> Agent Network Name:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="agent_name" name="agent_name"
                                       value="{{ agent_name }}" placeholder="Enter agent name" required>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Update
                        </button>
                    </form>
                </div>
            </div>
        </details>
    </div>

    <!-- jQuery and Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
    ></script>

    <!-- Custom JS -->
    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>

    <footer class="text-muted">
        <div class="text-right pr-3" style="position: absolute; bottom: 10px; right: 10px;">
            &copy; 2025 Cognizant AI Research Labs. All rights reserved.
        </div>
    </footer>
</body>
</html>
