{% extends "courses/base-course.html" %}
{% load i18n %}
{% load dashboard_extras %}

{% block child_content %}
  <section class="view-section">
    {% trans "Which assignment type do you want to investigate?" as heading_note %}
    {% include "courses/_graded_content_nav.html" with active="first_level" first_levels=assignment_types heading_note=heading_note %}
    <div class="section-content section-data-table grading-policy">
      <div class="tooltip-container">
        {% trans "Click an assignment type to view more detail information about the assignments." as tip_text %}
        {% include "chart_tooltip.html" with tip_text=tip_text track_category="grading_policy" %}
      </div>
      <div class="row">
        <div class="col-xs-12">
          {% for item in grading_policy %}
            {% widthratio item.weight 1 100 as policy_ratio %}
            {% captureas policy_description %}
              {# Translators: This describes the percent an assignment contributes to that of a learner's grade (e.g. Exam: 60% of the grading policy.). #}
              {% blocktrans with item.assignment_type as assignment_type %}
                {{ assignment_type }}: {{ policy_ratio }}% of the grading policy
              {% endblocktrans %}
            {% endcaptureas %}

            {% widthratio item.weight 1 max_policy_display_percent as bar_ratio %}
            <div style="width: {{ bar_ratio }}%; min-width: {{ min_policy_display_percent }}%"
                 class="policy-item has-tooltip" title="{{ policy_description }}">
              <a href="{% url 'courses:performance:graded_content_by_type' course_id=course_id assignment_type=item.assignment_type|unicode_slugify %}">
                <div class="policy-item-box">
                  {% captureas policy_percent %}
                    {# Translators: This describes the percent of a learner's grade (e.g. 60%). #}
                    {% blocktrans %}{{ policy_ratio }}%{% endblocktrans %}
                  {% endcaptureas %}
                  <div class="weight">{{ policy_percent }}</div>
                </div>
                <div class="type">{{ item.assignment_type }}</div>
              </a>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </section>
{% endblock %}