<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsoneditor@9.9.0/dist/jsoneditor.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jsoneditor@9.9.0/dist/jsoneditor.min.js"></script>

    <style>
        body,html{margin:0;padding:0}
        .container{margin:0 5px 5px 5px;font-family:'Open Sans',sans-serif}
        header{font-weight:700;font-size:16px;display:flex;align-items:center}
        header a{text-decoration:none;color:#000}
        .logo{height:35px;width:35px;margin-right:8px}
        .wrapper{display:flex;flex-direction:column;height:95vh}
        #jsonview{flex-grow:2;overflow:auto}
    </style>

</head>

<body>
    <main class="container">
        <header>
            {% if "title_div" in globals() and title_div %}
            <img src="{{ header_img }}" class="logo" alt="logo" />
            <p>{% raw title_div %}</p>
            {% end %}
        </header>
        <div class="wrapper">
            {% if "learn_more" in globals() and learn_more %}
            <div>
                <a href="{{ link }}" target="_blank">{% raw link %}</a> &nbsp;&nbsp;
                [<a href="{{ learn_more }}" target="_blank">Learn more about this API endpoint</a>]
            </div>
            {% end %}
            <div id="jsonview"></div>
        </div>
    </main>

    <script type="text/javascript">
        const container = document.getElementById("jsonview");
        const options = {
            mode: "view"
        };
        const editor = new JSONEditor(container, options);
        const data = {% raw data %};
        editor.set(data);
    </script>
</body>

</html>