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

{% comment %}
Individual course-centric enrollment geography view.
{% endcomment %}

{% block view-name %}view-course-enrollment view-dashboard{% endblock view-name %}

{% block javascript %}
  {{ block.super }}
  <script src="{% static_rjs 'js/enrollment-geography-main.js' %}"></script>
{% endblock javascript %}

{% block child_content %}
  <section class="view-section" data-section="enrollment-location" aria-hidden="true">
    <div class="section-heading">
      <h4 class="section-title">{% trans "Geographic Distribution" %}</h4>
      <span class="section-heading-note small">{% trans "Where are my learners?" %}</span>
    </div>

    {% if js_data.course.enrollmentByCountry %}
    <div class="section-content section-data-viz">
      <div class="world-map" data-view="world-map" data-title="{% trans "Enrollment by Country" %}"
          data-series-name="{% trans "Enrollment" %}" data-track-type="hover"
          data-track-event="edx.bi.graph.interacted" data-track-category="enrollment_geography">
        {% comment %}
        The map is loaded via ajax, so display a loading message.  Everything inside of this div will be
        cleared when the map data loads.
        {% endcomment %}
        {% include "loading.html" %}
      </div>
    </div>
    {% else %}
        {% show_chart_error %}
    {% endif %}
  </section>

  <section class="view-section">
    <div class="section-heading bordered">
      <h4 class="section-title">{% trans "Geography Metrics" %}</h4>
    </div>

    {% if top_countries %}
        <div class="section-content">
          <div class="row">
            <div class="col col-12 sm-col-12 md-col-3" data-stat-type="num-countries">
              {# Translators: This string represents the number of countries where learners are enrolled. #}
              {% trans "Total Countries or Regions Represented" as label %}
              {% trans "Countries or regions with at least one learner." as tooltip %}
              {% summary_point num_countries label '&nbsp;' tooltip %}
            </div>

            {% for datum in top_countries %}
              <div class="col col-12 sm-col-12 md-col-3" data-stat-type="top-country-{{ forloop.counter }}">
                {% if forloop.first %}
                  {# Translators: This string represents the country or region with the greatest number of enrolled learners. #}
                  {% trans "Top Country or Region by Enrollment" as label %}
                  {% trans "Country or region with the largest number of learners." as tooltip %}
                {% elif forloop.counter == 2 %}
                  {# Translators: This string represents the country or region with the second-greatest number of enrolled learners. #}
                  {% trans "Second Country or Region by Enrollment" as label %}
                  {% trans "Country or region with the second largest number of learners." as tooltip %}
                {% elif forloop.counter == 3 %}
                  {# Translators: This string represents the country or region with the third-greatest number of enrolled learners. #}
                  {% trans "Third Country or Region by Enrollment" as label %}
                  {% trans "Country or region with the third largest number of learners." as tooltip %}
                {% endif %}

                {% captureas subheading %}
                  {% captureas percent %}{% widthratio datum.percent 1 100 %}{% endcaptureas %}
                  {# Translators: This string represents the percentage of learners in a course. Move the % symbol, if necessary, but keep the percent variable/placeholder. #}
                  {% blocktrans %}{{ percent }}% of learners{% endblocktrans %}
                {% endcaptureas %}
                {% summary_point datum.countryName label subheading tooltip %}
              </div>
            {% endfor %}
          </div>
        </div>
    {% else %}
        {% show_metrics_error %}
    {% endif %}
  </section>

  <section class="view-section">
    <div class="section-heading">
      <h4 class="section-title">{% trans "Geographic Breakdown" %}</h4>
      {% if js_data.course.enrollmentByCountry %}
        <div class="section-actions">
            <a href="{% url 'courses:csv:enrollment_geography' course_id=course_id %}" class="btn btn-default"
               data-role="enrollment-location-csv" data-track-type="click"
               data-track-event="edx.bi.csv.downloaded" data-track-category="geographic">
              <span class="ico fa fa-download" aria-hidden="true"></span> {% trans "Download CSV" %}
               <span class="sr-only">{% trans "Geographic Breakdown" %}</span>
            </a>
        </div>
      {% endif %}
    </div>

    {% if js_data.course.enrollmentByCountry %}
      <div class="section-content section-data-table" data-role="enrollment-location-table">
        {% include "loading.html" %}
      </div>
    {% else %}
        {% show_table_error %}
    {% endif %}
  </section>

{% endblock %}