{% load rpc_extras %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
        <title>Jama JSON-RPC service documentation</title>
        <style>
            body{
                /*font-family: sans-serif;*/
                /*padding: 1em;*/
            }
            article dt{
                font-style: italic;
            }
            article dd{
                padding: 1em;
            }
            article dd ul{
                margin:0;
                padding: 0;
            }
            article dd li{
                margin: 0;
                padding: 0;
                list-style-type: none;
                list-style-position: outside;
            }
            article{
                border-radius: 5px;
                border: 1px dotted #777777;
                padding: 1em;
                margin-bottom: 2em;
            }
            code{
                display: block;
                padding: 1em;
                color: lawngreen;
                background-color: black;
                white-space: pre-wrap;
                border-radius: 10px;
            }
            span.signature{
                font-weight: normal;
            }
            nav > ol{
                columns: 1;
            }
            p.gototop{
                text-align: right;
            }
            h3{
                font-size: 1.5em;
            }

            @media (min-width: 800px) {
                body{
                    max-width: unset;
                }
                nav > ol {
                    columns: 2;
                }
            }

            @media (min-width: 1000px) {
                body{
                    max-width: unset;
                }
                nav > ol {
                    columns: 3;
                }
            }

            @media (min-width: 1200px) {
                body{
                    max-width: unset;
                }
                nav > ol {
                    columns: 4;
                }
            }
        </style>
    </head>
    <body>
        <a id="top"></a>
        <h1>Jama JSON-RPC service reference</h1>
        <p>
            Jama is accessible via a subset of the <a href="https://www.jsonrpc.org/specification_v1">JSON-RPC 1.0</a>
            protocol over HTTP. You may use the <a href="https://pypi.org/project/jama-client-CERTIC/">reference client library</a>
            implementation in Python.
        </p>
        <nav>
            <p>
                <select id="group_selector">
                    <option value="all">All Available Methods</option>
                    {% for group in methods.items|rpc_groups_as_list %}
                    <option>{{ group }}</option>
                    {% endfor %}
                </select>
            </p>
            <ol>
                {% for name, func_obj in methods.items %}
                    <li class="{{ name|rpc_groups_from_function|safe }}"><a href="#func_{{ name }}">{{ name }}</a></li>
                {% endfor %}
            </ol>
        </nav>
        <main>
            {% for name, func_obj in methods.items %}
                <a id="func_{{ name }}"></a>
                <article class="{{ name|rpc_groups_from_function|safe }}">
                    <h3>
                        {{ name }}
                    </h3>
                    <dl>
                        <dt>Parameters</dt>
                        <dd>{{ name|parameters|safe }}</dd>
                        <dt>Return type</dt>
                        <dd><strong>{{ name|returntype }}</strong></dd>
                    </dl>
                    {{ name|doc_string|safe }}
                <p class="gototop"><a href="#top">↑ back to available methods</a></p>
                </article>

            {% endfor %}
        </main>
    <script>
        group_selector = document.getElementById("group_selector");
        group_selector.addEventListener("change", function(evt){
            let grp = evt.target.value;
            if(grp == "all"){
                for (let el of document.querySelectorAll('article')) {
                    el.style.display = 'block';
                }
                for (let el of document.querySelectorAll('ol>li')) {
                    el.style.display = 'block';
                }
            }else{
                for (let el of document.querySelectorAll('article')) {
                    el.style.display = 'none';
                }
                for (let el of document.querySelectorAll('ol>li')) {
                    el.style.display = 'none';
                }
                for (let el of document.querySelectorAll('article.'+grp)) {
                    el.style.display = 'block';
                }
                for (let el of document.querySelectorAll('ol>li.'+grp)) {
                    el.style.display = 'block';
                }
            }
        });
    </script>
    </body>
</html>