{{extend 'layout.html'}}

{{block moreincludes}}
    {{include '_sphinx_static_files.html'}}
{{end}}

<div class="hidden-content" style="display: none">
    \( {{= request.latex_preamble}} \)
 </div>

<div id='part1'>
    <h1 id="assignment_name" style='text-align:center'>{{=assignment['name']}}</h1>
    <h2 style='margin-left:1cm;'>Due: {{=assignment['duedate']}}</h2>
    <span style="float:right; margin-right:2cm;">
        {{if assignment['points'] > 0:}}
            {{='Self Grade: {} of {} = {:2.1f}%'.format(questions_score + readings_score, assignment['points'], 100*(questions_score + readings_score)/assignment['points'])}}
        {{else:}}
            This assignment is ungraded
        {{pass}}
    </span>
    <div style='background-color:powderblue; margin-left:2cm; margin-right:2cm;'>
        <p style='margin-left:0.5cm; margin-right:0.5cm;'>Description: {{=assignment['description']}}</p>
    </div>
    <div>
        {{if is_submit == "Complete" or is_graded or enforce_pastdue:}}
            <div style='background-color:rgb(146, 207, 165); margin-left:2cm; margin-right:2cm;'>
                <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment has been submitted</p>
            </div>
        {{elif is_submit == "In Progress":}}
            <div style='background-color:rgb(247, 238, 158); margin-left:2cm; margin-right:2cm;'>
                <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment is in progress</p>
            </div>
        {{else:}}
            <div style='background-color:rgb(236, 189, 189); margin-left:2cm; margin-right:2cm;'>
                <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment has not been started</p>
            </div>
        {{pass}}
    </div>

    {{if len(readings) > 0:}}
        <div id='readings' style='margin-left:15%;'>
            <h3>Readings</h3>
            <ul>
                {{for reading in readings:}}
                    <li class="{{=readings[reading]['status']}}">{{=reading}}</li>
                    <ul>
                    {{for r in readings[reading]['subchapters']:}}
                        {{ if origin == "Runestone": }}
                        <li class="{{=r['status']}}"><a href="{{=get_course_url(r['chapter'], r['subchapter'] + '.html')}}">{{=r['name']}}</a>
                        {{ else: }}
                        <li class="{{=r['status']}}"><a href="{{=get_course_url('', r['subchapter'] + '.html')}}">{{=r['name']}}</a>
                        {{ pass }}
                        {{if r['points'] > 0:}}
                            {{if r['comment'] != 'ungraded':}}
                                </br>{{=r['score']}} of {{=r['points']}} points earned; minimum {{=r['activities_required']}} activities required
                            {{else:}}
                                </br>not graded yet: {{=r['points']}} points; minimum {{=r['activities_required']}} activities required
                            {{pass}}
                        {{pass}}
                    </li>

                    {{pass}}
                    </ul>
                {{pass}}
            </ul>
        </div>
    {{pass}}

    {{if len(questioninfo) > 0:}}
        <div id='questions'>
            <style>
                .ac_section > * {
                    max-width: 100%;
                }
            </style>
            <h3>Questions</h3>
                {{ if assignment.is_timed: }}
                    <ul data-component="timedAssessment"  id="{{= assignment.name}}"
                    {{ if assignment.time_limit: }}
                        data-time="{{=assignment.time_limit}}"
                    {{pass}}
                    {{ if assignment.nofeedback: }}
                        data-no-feedback
                    {{pass}}
                    {{ if assignment.nopause: }}
                        data-no-pause
                    {{pass}}
                    style="display: none;"
                    >
                    {{for q in questioninfo:}}
                        {{=XML(q['htmlsrc'])}}
                    {{pass}}
                    </ul>
                {{else:}}
                    {{count=0}}
                    {{for q in questioninfo:}}
                            {{ if q['comment'] != 'ungraded':}}
                                <div style='float:right; width:30%;'>
                                <h4 style='text-align:center;'>Score: {{=q['score']}} / {{=q['points']}}</h4>
                                <p style='margin-left:2%;'>Comment: {{=q['comment']}}</p>
                                </div>
                            {{ else: }}
                                <div style='float:right; width:10%;'>
                                <h5 style='text-align:center;'>Not yet graded</h5>
                                </div>
                            {{pass}}
                            <div class='oneq full-width' id='{{=count}}'>
                                {{=XML(q['htmlsrc'])}}
                            </div>
                            <div class="oneq" style="width: 100%; text-align: center">
                                {{ if origin == "Runestone": }}
                                <a href="/runestone/books/published/{{=course.base_course}}/{{=q['chapter']}}/{{=q['subchapter']}}.html#{{=q['name']}}">Question in Context</a>
                                {{ else: }}
                                <a href="/runestone/books/published/{{=course.base_course}}/{{=q['subchapter']}}.html#{{=q['name']}}">Question in Context</a>
                                {{ pass }}
                            </div>
                            <hr>
                        {{count += 1}}
                    {{pass}}
                {{pass}}

        </div>
    {{pass}}
</div>
<div>
    {{if is_submit == "Complete" or is_graded or enforce_pastdue:}}
        <div style='background-color:rgb(146, 207, 165); margin-left:2cm; margin-right:2cm;'>
            <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment has been submitted</p>
        </div>
        {{if is_graded:}}
            <div style='background-color:powderblue; margin-left:2cm; margin-right:2cm;'>
                <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment is graded and is no longer
                accepting submissions</p>
            </div>
        {{elif enforce_pastdue:}}
            <div style='background-color:powderblue; margin-left:2cm; margin-right:2cm;'>
                <p style='margin-left:0.5cm; margin-right:0.5cm;'>The due date has passed for this assignment
                and is no longer accepting submissions</p>
            </div>
        {{pass}}
    {{elif is_submit == "In Progress":}}
        <div style='background-color:rgb(247, 238, 158); margin-left:2cm; margin-right:2cm;'>
            <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment is in progress</p>
        </div>
    {{else:}}
        <div style='background-color:rgb(236, 189, 189); margin-left:2cm; margin-right:2cm;'>
            <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment has not been started</p>
        </div>
    {{pass}}
</div>

{{ if not released and not assignment.is_timed: }}
<div style="text-align:center">
    <button class="btn btn-lg buttonAskCompletion" id="gradeMeButton">Score Me</button>
    {{if not is_graded and not enforce_pastdue:}}
        <button class="btn btn-lg buttonAskCompletion" id="submitMeButton">
            {{if is_submit == "Not Started":}}
                Mark In Progress
            {{elif is_submit == "In Progress":}}
                Mark Complete
            {{else:}}
                Mark Incomplete
            {{pass}}
        </button>
    {{pass}}
    <p><strong>Warning:</strong> Scores for problems that you self grade are unofficial.
        Some problems will need to be manually graded, and your instructor may have requirements that cannot be autograded.
        No deadlines are enforced when self grading, but your instructor may penalize you
        for late work.</p>
</div>
{{ elif settings.coursera_mode: }}
<div style="text-align:center">
    <button class="btn btn-lg buttonAskCompletion" id="gradeMeButton">Score Me</button>
    {{if not is_graded and not enforce_pastdue:}}
    <button class="btn btn-lg buttonAskCompletion" id="submitMeButton">
        {{if is_submit == "Not Started":}}
            Mark In Progress
        {{elif is_submit == "In Progress":}}
            Mark Complete
        {{else:}}
            Mark Incomplete
        {{pass}}
    </button>
    {{pass}}
</div>
{{ pass }}
</div>
<script>
    assignmentId = {{= assignment.id }};
    //console.log(document.getElementsByClassName('nav nav-tabs'))
    // This script renders the html into elements in the DOM
    // The html gets thrown into a script tag so javascript can mess with it without throwing errors all over the place


    //var questionHtmlCode = document.getElementsByClassName("htmlblock");
    // Interestingly, javascript won't understand the html string without first dumping it into an html element
    // a console.log of the html string within the questioninfo array would only give an unexpected token error
    // pulling the html strings from the script element provides the string that javascript recognizes
    // even after stringifying the json.dumps version of a dictionary with the html as a value and then parsing the result, the html string was still seen as an undefined type according to javascript

    // The htmlDecode is needed to unescape the html that the server has sent.
    // because only unescaped html gets rendered as html elements

    function htmlDecode(input){
          let e = document.createElement('div');
          e.innerHTML = input;
          return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
    }




    // for (let i=0; i<questionHtmlCode.length; i++) {
    //     let $div = $('#' + i);
    //     let unescapedhtml = htmlDecode(questionHtmlCode[i].innerHTML);
    //     let change = $.parseHTML(unescapedhtml, keepScripts=true);
    //     $div.append(change);
    // }

    $("#submitMeButton").on("click", function(){
        $('#submitMeButton').css('visibility', 'hidden');
        markComplete({{=assignment['id']}}, {{=student_num}})
    });

    $("#gradeMeButton").on("click", function(){
        $('#gradeMeButton').css('visibility', 'hidden');
        selfGrade({{=assignment['id']}})
    });

    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });

</script>
<script src="/runestone/static/js/selfgrade.js" type="text/javascript"></script>
<script src="/runestone/static/js/markcomplete.js" type="text/javascript"></script>