{% extends "data_entry/base.html" %}

{% block page_content %}
<h1>All Content</h1>

<div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="levelSelect">Level</label>
        <select class="form-select" id="levelSelect" name="level">
            <option selected disabled>Choose...</option>
            {% for level in levels %}
            <option value="{{level.id}}" data-levelname="{{ level.levelNumber }} {{ level.levelName }}">
                {{ level.levelNumber }} {{ level.levelName }}</option>
            {% endfor %}
        </select>
    </div>

    <div class="input-group mb-3">
        <label class="input-group-text" for="standardSelect">Standard</label>
        <select class="form-select" id="standardSelect" name="standard">
            {% for standard in standards %}
            <option data-value="{{standard.levelID_id}}" value="{{standard.standardNumber}}">{{standard.standardNumber}}
                {{ standard.standardTitle }}</option>
            {% endfor %}
        </select>
    </div>
    <div id="contentList">

    </div>

</div>

<script type="text/javascript">



    function getContent() {
        //var level = document.getElementById('levelSelect')
        //var option= level.options[level.selectedIndex];
        //var attrs = option.attributes;
        //var levelname = option.getAttribute("data-levelname");
        var level = document.getElementById('levelSelect').value
        var standard = document.getElementById('standardSelect').value

        buildlist(level, standard)
    }
    document.getElementById("standardSelect").addEventListener("click", getContent);

    // buildlist(level,standard)
    function buildlist(level, standard) {
        var wrapper = document.getElementById('contentList')
        wrapper.innerHTML = "";
        var url = 'http://127.0.0.1:8000/api/content-list/' + level + '/' + standard

        fetch(url)
            .then((resp) => resp.json())
            .then(function (data) {
                var list = data
                for (var i in list) {
                    var item = `
                    <a href="{% url 'content_detail' %}?level=${level}&standard=${standard}&pk=${list[i].ID}" id="data-obj-${list[i].ID}">
                    <ul>
                    <li>${list[i].Heading1}</li> 
                `
                    if (list[i].Heading2) {
                        item += `<ul>
                        <li>${list[i].Heading2}</li> `
                        if (list[i].Heading3) {
                            item += `<ul>
                                <li>${list[i].Heading3}</li> `
                            if (list[i].Heading4) {
                                item += `<ul>
                                        <li>${list[i].Heading4}</li> `
                                item += `</ul>`
                            }
                            item += `</ul>`
                        }
                        item += `</ul></ul></a>`
                    }

                    wrapper.innerHTML += item
                }
            })
    }



</script>
{% endblock page_content %}