{% comment %}
    This is a chunk of angularjs (see courses.js), which
    simply displays the user's current course status. It is
    a simple HTTP GET request, and the part below is the
    template snippet.

    Here's the sample results key from the JSON, in case
    more is required in the template.
    {
        "results": [
            {
                "progress": "0.89", 
                "rounds": 1, 
                "total_answered": 9, 
                "correct": 8, 
                "completed_date": null, 
                "grade": null
            }
        ]
    }

    TODO: hide with css manually until we know that JS request works

    NB: template tags here are <% %>. Typically it's a bad idea to mix
    templating things, client/server-wise, but this is so minimal and
    for the purposes of display only, so it shouldn't provide problems.

{% endcomment %}

<div id="course_goal">
    <div class="goal_in_progress"
        ng-controller="GoalController" ng-source="/{{ URL_PREFIX }}/courses/api/stats/">
        <div ng-if="navigated_away">
            <h2>Goal progress</h2>
            <p class="error" ng-show="navigated_away">Page changed,
                progress no longer tracked. <a href="/{{ URL_PREFIX  }}/courses/">Begin again?</a></p>
        </div>
        <div ng-if="results">
            <h2>Goal progress</h2>
            <ul ng-repeat="goal in results" ng-show="results">
                <li><span class="stat_title">Round</span>:
                    <span class="stat_value"><% current_set_count %></span></h4>
                <li><span class="stat_title">Correct</span>:
                    <span class="stat_value"><% goal.progress * 100 %>%</span></h4>
                <li ng-if="goal.is_complete" class="complete">Complete!</li>
                <li ng-if="goal.is_complete">You can keep playing, or <a
                        href="/{{ URL_PREFIX }}/courses/">work on a new goal</a></li>
            </ul>
        </div>
    </div>
</div>