<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>List of APIs</title>
    <link rel="stylesheet" href="static/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,900;1,200&display=swap"
          rel="stylesheet">

    {#    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">#}
</head>
<body>
<div>
    <h1 class="header">Ario Auto-Generated Documentation</h1>
</div>
{% for x in list_of_docs %}
    <div class="api-class">
        <h2 class="spec">{{ x.general[0] }}</h2>
        <h2>{{ x.general[1] }}</h2>
        <h3 class="description">Description: "{{ x.general[2] }}"</h3>
        {% for y in x.specific %}
            <div class="api-sub-class">
                <p class="method">Method: {{ y['method'] }}</p>
                <div class="drop-down-menu">
                    <p class="route">URL: {{ y['route'] }}</p>
                    <p class="code-box">{{ y['document'] }}</p>
                </div>
            </div>
        {% endfor %}
    </div>
{% endfor %}
</body>
<script type="text/javascript">

    let method = document.getElementsByClassName("method");
    for (let i = 0; i < method.length; i++) {
        if (method[i].innerText === "Method: post") {
            method[i].innerText = "POST";
            method[i].classList.add("post-tag")
        } else if (method[i].innerText === "Method: get") {
            method[i].innerText = "GET";
            method[i].classList.add("get-tag")
        } else if (method[i].innerText === "Method: insert") {
            method[i].innerText = "INSERT";
            method[i].classList.add("insert-tag")
        } else if (method[i].innerText === "Method: put") {
            method[i].innerText = "PUT";
            method[i].classList.add("put-tag")
        } else {
            let res = method[i].innerText;
            console.log(res);
            res = res.replace("Method: ", "");
            console.log(res);
            method[i].innerText = res.toLocaleUpperCase();
            method[i].classList.add("other-tag")
        }
    }

    let codeBox = document.getElementsByClassName("code-box");
    for (let i = 0; i < codeBox.length; i++) {
        codeBox[i].innerHTML = codeBox[i].innerHTML.replace(/,/g, ",<br>&nbsp");
        codeBox[i].innerHTML = codeBox[i].innerHTML.replace("{", "{<br>&nbsp&nbsp");
        codeBox[i].innerHTML = codeBox[i].innerHTML.replace("}", "<br>}");
    }

    let apiSubClass = document.getElementsByClassName("api-sub-class");

    let dropDown = document.getElementsByClassName("drop-down-menu");
    for (let i = 0; i < apiSubClass.length; i++) {
        let style = codeBox[i].style.display;
        apiSubClass[i].addEventListener("click", function () {
            if (dropDown[i].style.display === "block") {
                dropDown[i].style.display = "none"
            } else {
                dropDown[i].style.display = "block";
            }
        })
    }

</script>
</html>