<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>STNM</title>
    <link rel="stylesheet" href="{{ url_for("static", filename ="vendor/bootstrap.min.css") }}">
    <style type="text/css">
        .card {
            margin: 20px 0 40px 0;
        }

        .config-pre {
            font-size: 12px;
            max-height: 400px;
            overflow: auto;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="root"></div>
<script src="{{ url_for("static", filename ="vendor/react.production.min.js") }}"></script>
<script src="{{ url_for("static", filename ="vendor/react-dom.production.min.js") }}"></script>
<script src="{{ url_for("static", filename ="vendor/react-router-dom.min.js") }}"></script>
<script src="{{ url_for("static", filename ="vendor/jquery.slim.min.js") }}"></script>
<script src="{{ url_for("static", filename ="vendor/bootstrap.bundle.min.js") }}"></script>
<script src="{{ url_for("static", filename ="vendor/react-bootstrap.min.js") }}"></script>
<script src="{{ url_for("static", filename ="vendor/babel.min.js") }}"></script>
<script type="text/babel">
    const {
        BrowserRouter: Router,
        Switch,
        Route,
        Link
    } = ReactRouterDOM;

    {% include "jsx/node-provider.jsx" %}
    {% include "jsx/config-provider.jsx" %}
    {% include "jsx/node-info.jsx" %}
    {% include "jsx/config-info.jsx" %}
    {% include "jsx/panel.jsx" %}

    const App = () => {
        return <Router>
            <div className="container">
                <Switch>
                    <Route exact={true} strict={true} path="/ui">
                        <NodeProvider>
                            <ConfigProvider>
                                <Panel/>
                            </ConfigProvider>
                        </NodeProvider>
                    </Route>
                </Switch>
            </div>
        </Router>
    };

    ReactDOM.render(<App/>, document.getElementById("root"));
</script>
</body>
</html>