<%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/>
<%!
from django.utils.translation import ugettext as _
from django.core.urlresolvers import reverse
from util.date_utils import get_time_display, DEFAULT_SHORT_DATE_FORMAT
from django.conf import settings
from django.utils.http import urlquote_plus
%>
<%block name="bodyclass">view-incourse view-progress</%block>

<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
</%block>


<%namespace name="progress_graph" file="/courseware/progress_graph.js"/>

<%block name="pagetitle">${_("{course_number} Progress").format(course_number=course.display_number_with_default) | h}</%block>
<%block name="nav_skip">#course-info-progress</%block>

<%block name="js_extra">
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.stack.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.symbol.js')}"></script>
<script type="text/javascript" src="${static.url('js/courseware/certificates_api.js')}"></script>
<script type="text/javascript" src="${static.url('js/courseware/credit_progress.js')}"></script>
<script>
  ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph", not course.no_grade, not course.no_grade)}
</script>
</%block>


<%include file="/courseware/course_navigation.html" args="active_page='progress'" />

<div class="container">
  <div class="profile-wrapper">

    <div class="course-info" id="course-info-progress" aria-label="${_('Course Progress')}">
      % if staff_access and studio_url is not None:
        <div class="wrap-instructor-info">
          <a class="instructor-info-action studio-view" href="${studio_url}">${_("View Grading in studio")}</a>
        </div>
      % endif

      <header class="progress-certificates">
        <h1 class="progress-certificates-title">${_("Course Progress for Student '{username}' ({email})").format(username=student.username, email=student.email)}</h1>
      </header>

      %if show_generate_cert_btn:
      <div class="wrapper-msg wrapper-auto-cert">
        <div id="errors-info" class="errors-info"></div>
        %if passed:
        <div class="auto-cert-message" id="course-success">
          <div class="has-actions">
              <% post_url = reverse('generate_user_cert', args=[unicode(course.id)]) %>
              % if is_downloadable:
              <div class="msg-content">
                <h2 class="title">${_("Your certificate is available")}</h2>
                <p class="copy">
                  ${_("You can keep working for a higher grade, or request your certificate now.")}
                </p>
              </div>
              <div class="msg-actions">
                %if show_cert_web_view and cert_web_view_url:
                <a class="btn" href="${cert_web_view_url}" target="_blank" title="${_('View certificate in a new browser window or tab.')}">
                  ${_("View Certificate")}
                </a>
                %elif download_url:
                <a class="btn" href="${download_url}" target="_blank" title="${_('PDF will open in a new browser window or tab.')}">
                  ${_("Download Your Certificate")}
                </a>
                %endif
              </div>
              %elif is_generating:
              <div class="msg-content">
                <h2 class="title">${_("We're working on it...")}</h2>
                <p class="copy">${_("We're creating your certificate. You can keep working in your courses and a link to it will appear here and on your Dashboard when it is ready.")}</p>
              </div>
              <div class="msg-actions"></div>
              %else:
              <div class="msg-content">
                <h2 class="title">${_("Congratulations, you qualified for a certificate!")}</h2>
                <p class="copy">${_("You can keep working for a higher grade, or request your certificate now.")}</p>
              </div>
              <div class="msg-actions">
                <button class="btn generate_certs" data-endpoint="${post_url}" id="btn_generate_cert">${_('Request Certificate')}</button>
              </div>
              %endif
          </div>
        </div>
        %endif
      </div>
      %endif

      %if not course.disable_progress_graph:
        <div class="grade-detail-graph" id="grade-detail-graph" aria-hidden="true"></div>
      %endif

      % if credit_course_requirements:
        <section class="credit-eligibility">
            <div class="credit-eligibility-container">
                <div class="eligibility-heading">
                    <h2>${_("Requirements for Course Credit")}</h2>
                </div>
                %if credit_course_requirements['eligibility_status'] == 'not_eligible':
                    <span class="eligibility_msg">${student.get_full_name()}, ${_("You are no longer eligible for this course.")}</span>
                %elif credit_course_requirements['eligibility_status'] == 'eligible':
                    <span class="eligibility_msg">${student.get_full_name()}, ${_("You have met the requirements for credit in this course.")}
                        ${_("{link} to purchase course credit.").format(link="<a href={url}>{url_name}</a>".format(url = reverse('dashboard'), url_name = _('Go to your dashboard')))}
                    </span>
                %elif credit_course_requirements['eligibility_status'] == 'partial_eligible':
                    <span>${_("{student_name}, you have not yet met the requirements for credit.").format(student_name=student.get_full_name())}</span>
                %endif
                <a href="${settings.CREDIT_HELP_LINK_URL}" class="credit-help"><i class="fa fa-question"></i><span class="sr">${_("Information about course credit requirements")}</span></a><br>
                <div class="requirement-container" data-eligible="${credit_course_requirements['eligibility_status']}">
                %for requirement in credit_course_requirements['requirements']:
                    <div class="requirement">
                        <div class="requirement-name">${_(requirement['display_name'])}</div>
                        <div class="requirement-status">
                            %if requirement['status']:
                                %if requirement['status'] == 'submitted':
                                    <span class="requirement-submitted">${_("Verification Submitted")}</span>
                                %elif requirement['status'] == 'failed':
                                    <i class="fa fa-times"></i>
                                    <span>${_("Verification Failed" )}</span>
                                %elif requirement['status'] == 'satisfied':
                                    <i class="fa fa-check"></i>
                                    <span>Verified on ${get_time_display(requirement['status_date'], DEFAULT_SHORT_DATE_FORMAT, settings.TIME_ZONE)}</span>
                                %endif
                            %else:
                                <span class="not-achieve">${_("Upcoming")}</span>
                            %endif
                        </div>
                    </div>
                %endfor
                 </div>
                <button class="detail-collapse" aria-live="polite"><i class="fa fa-caret-up"></i>
                    <span class="requirement-detail">${_("Less")}</span>
                </button>
            </div>
        </section>
      %endif

      <div class="chapters">
        %for chapter in courseware_summary:
        %if not chapter['display_name'] == "hidden":
        <section>
          <h2>${ chapter['display_name'] }</h2>

          <div class="sections">
            %for section in chapter['sections']:
            <div>
              <%
              earned = section['section_total'].earned
              total = section['section_total'].possible
              percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 and total > 0 else ""
              %>

              <h3><a href="${reverse('courseware_section', kwargs=dict(course_id=course.id.to_deprecated_string(), chapter=chapter['url_name'], section=section['url_name']))}">
                ${ section['display_name'] }
                %if total > 0 or earned > 0:
                  <span class="sr">
                    ${_("{earned:.3n} of {total:.3n} possible points").format( earned = float(earned), total = float(total) )}
                  </span>
                %endif
                </a>
                %if total > 0 or earned > 0:
                  <span> ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString )}</span>
                %endif
              </h3>
              <p>
                ${section['format']}

                %if section.get('due') is not None:
                  <%
                      formatted_string = get_time_display(section['due'], course.due_date_display_format, coerce_tz=settings.TIME_ZONE_DISPLAYED_FOR_DEADLINES)
                      due_date = '' if len(formatted_string)==0 else _(u'due {date}').format(date=formatted_string)
                  %>
                  <em>
                  ${due_date}
                  </em>
                %endif
              </p>

              <div class="scores">
                %if len(section['scores']) > 0:
                  <h3> ${ _("Problem Scores: ") if section['graded'] else _("Practice Scores: ")} </h3>
                  <ol>
                    %for score in section['scores']:
                    <li>${"{0:.3n}/{1:.3n}".format(float(score.earned),float(score.possible))}</li>
                    %endfor
                  </ol>
                %else:
                  <h3 class="no-scores"> ${_("No problem scores in this section")} </h3>
                %endif
              </div>


            </div> <!--End section-->
            %endfor
          </div> <!--End sections-->
        </section> <!--End chapter-->
        %endif
        %endfor
      </div> <!--End chapters-->

    </div>
  </div>
</div>

