<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP ABAP - BTP Demo</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="app-container">
<header>
<div class="logo">MCP ABAP</div>
<div class="status-indicator">
<span id="connection-status" class="status-dot"></span>
<span id="status-text">Disconnected</span>
</div>
</header>
<main>
<section class="card config-card">
<h2>SAP Connection</h2>
<div class="form-group">
<label>SAP URL</label>
<input type="text" id="sap-url" placeholder="https://example.com">
</div>
<div class="form-row">
<div class="form-group">
<label>Client</label>
<input type="text" id="sap-client" placeholder="100" value="100">
</div>
<div class="form-group">
<label>User</label>
<input type="text" id="sap-user" placeholder="User">
</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" id="sap-password" placeholder="********">
</div>
<div class="form-row">
<div class="form-group">
<label>Language</label>
<input type="text" id="sap-language" value="EN">
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="skip-ssl">
<label for="skip-ssl">Skip SSL Verify</label>
</div>
</div>
<button id="btn-login" class="btn-primary">Connect to SAP</button>
</section>
<section class="card tools-card">
<h2>Test Tools</h2>
<div class="tool-actions">
<button class="btn-secondary" onclick="callTool('healthcheck', {})">Checking Health</button>
<button class="btn-secondary" onclick="callTool('discovery/featureDetails', {})">System Features</button>
<button class="btn-secondary" onclick="callTool('transport/userTransports', { user: document.getElementById('sap-user').value })">My Transports</button>
</div>
<h3>Custom Tool Call</h3>
<div class="form-group">
<input type="text" id="tool-name" placeholder="Tool Name (e.g., object/searchObject)">
</div>
<div class="form-group">
<textarea id="tool-args" placeholder='{"query": "zcl_test"}' rows="3"></textarea>
</div>
<button id="btn-run" class="btn-primary">Run Tool</button>
</section>
</main>
<section class="console-section">
<div class="console-header">
<h3>Console Output</h3>
<button class="btn-text" onclick="clearConsole()">Clear</button>
</div>
<div id="console-output" class="console-body">
<div class="log-entry system">Waiting for connection...</div>
</div>
</section>
</div>
<script src="client.js"></script>
</body>
</html>
