<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BGC Viewer</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>BGC Viewer</h1>
        </header>

        <main>
            <section class="api-section">
                <h2>API Endpoints</h2>
                <div class="endpoint-list">
                    <div class="endpoint">
                        <code>GET /api/info</code>
                        <p>Get dataset information and metadata</p>
                        <button onclick="fetchData('/api/info', 'data-output')">Test</button>
                    </div>
                    <div class="endpoint">
                        <code>GET /api/records</code>
                        <p>Get all records (regions) summary</p>
                        <button onclick="fetchData('/api/records', 'users-output')">Test</button>
                    </div>
                    <div class="endpoint">
                        <code>GET /api/feature-types</code>
                        <p>Get all available feature types</p>
                        <button onclick="fetchData('/api/feature-types', 'feature-types-output')">Test</button>
                    </div>
                    <div class="endpoint">
                        <code>GET /api/stats</code>
                        <p>Get dataset statistics</p>
                        <button onclick="fetchData('/api/stats', 'stats-output')">Test</button>
                    </div>
                    <div class="endpoint">
                        <code>GET /api/health</code>
                        <p>Health check endpoint</p>
                        <button onclick="fetchData('/api/health', 'health-output')">Test</button>
                    </div>
                    <div class="endpoint">
                        <code>GET /api/records/{record_id}/features?type={type}</code>
                        <p>Get features by type for a specific record</p>
                        <input type="text" id="record-id" placeholder="Record ID" style="margin: 5px;">
                        <input type="text" id="feature-type" placeholder="Feature Type (optional)" style="margin: 5px;">
                        <button onclick="fetchRecordFeatures()">Test</button>
                    </div>
                </div>
            </section>

            <section class="results-section">
                <h2>API Results</h2>
                <div id="data-output" class="output-box">
                    <h3>Dataset Info</h3>
                    <pre>Click "Test" buttons above to see API responses</pre>
                </div>
                <div id="users-output" class="output-box">
                    <h3>Records</h3>
                    <pre></pre>
                </div>
                <div id="feature-types-output" class="output-box">
                    <h3>Feature Types</h3>
                    <pre></pre>
                </div>
                <div id="stats-output" class="output-box">
                    <h3>Dataset Statistics</h3>
                    <pre></pre>
                </div>
                <div id="health-output" class="output-box">
                    <h3>Health Status</h3>
                    <pre></pre>
                </div>
                <div id="record-features-output" class="output-box">
                    <h3>Record Features</h3>
                    <pre></pre>
                </div>
            </section>
        </main>
    </div>

    <script src="{{ url_for('static', filename='app.js') }}"></script>
</body>
</html>
