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

{% block page_content %}

<div id="level"></div>
<div id="standard"></div>
<div id="heading1" class="mt-3"></div>
<div id="heading2"></div>
<div id="heading3"></div>
<div id="heading4"></div>
<div id="paragraph" class="mt-5"></div>
<div id="pageNumber"></div>
<hr>

<a  type="button" class="btn btn-warning" href="{% url 'content_update' %}?level={{ level }}&standard={{ standard }}&pk={{ pk }}">Edit</a>


<script type="text/javascript">
    var level = {{ level }}
    var standard = '{{ standard }}'
    var pk = {{ pk }}
    console.log(level, standard, pk)
    viewDetail(level, standard, pk)
    function viewDetail(level, standard, pk) {
        var levelDiv = document.getElementById('level')
        var standardDiv = document.getElementById('standard')
        var heading1Div = document.getElementById('heading1')
        var heading2Div = document.getElementById('heading2')
        var heading3Div = document.getElementById('heading3')
        var heading4Div = document.getElementById('heading4')
        var paragraphDiv = document.getElementById('paragraph')
        var pageNumberDiv = document.getElementById('pageNumber')
        var url = 'http://127.0.0.1:8000/api/content-detail/' + level + '/' + standard + '/' + pk
        fetch(url)
            .then((resp) => resp.json())
            .then(function (data) {
                var levelName = `<h1 >Level: <span style='color:${data.Color}'>${data.Level} ${data.LevelName}</span></h1>`
                var standardName = `<h2>Standard: <span style='color:${data.Color}'>${data.Module}</span></h2>`
                var heading1 = `<h3>${data.Heading1}</h3>`
                var heading2 = `<h3>${data.Heading2}</h3>`
                var heading3 = `<h3>${data.Heading3}</h3>`
                var heading4 = `<h3>${data.Heading4}</h3>`
                var paragraph = `<p>${data.Paragraph}</p>`
                var pageNumber = `<h3>Page: ${data.PageNum}</h3>`

                levelDiv.innerHTML = levelName
                standardDiv.innerHTML = standardName
                heading1Div.innerHTML = heading1
                heading2Div.innerHTML = heading2
                heading3Div.innerHTML = heading3
                heading4Div.innerHTML = heading4
                paragraphDiv.innerHTML = paragraph
                pageNumberDiv.innerHTML = pageNumber
                console.log(data)
            })
    }
</script>
{% endblock page_content %}