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

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

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


{% block child_content %}

<section class="view-section" data-section="enrollment-basics" aria-hidden="true">
    <div class="row">
        <div class="col col-12 sm-col-12">
            <div class="tertiary-nav">
                <ul class="nav navbar-nav">
                    {% include "submenu_navigation.html" with nav_items=tertiary_nav_items depth="depth" %}
                </ul>
                <div class="section-heading">
                    <span class="section-heading-note small">{% trans "How old are my learners?" %}</span>
                </div>
            </div>
        </div>
    </div>

    {% if js_data.course.ages %}
        <div class="section-content section-data-graph">
            <div class="section-content section-data-viz">
                <div class="analytics-chart-container">
                    {% include "courses/demographics_chart_info.html"%}
                    {% captureas tip_text %}
                      {# Translators: Maintain the double percentage symbols (%%) but move them to the appropriate location (before/after the value placeholder) for your language. #}
                      {% blocktrans with value=chart_tooltip_value %}This age histogram presents data computed for the {{ value }}% of enrolled learners who provided a year of birth.{% endblocktrans %}
                    {% endcaptureas %}
                    {% include "chart_tooltip.html" with tip_text=tip_text track_category="histogram"%}
                    <div id="enrollment-chart-view" class="analytics-chart" data-track-type="hover"
                        data-track-event="edx.bi.graph.interacted" data-track-category="enrollment_demographics_age">
                        {% include "loading.html" %}
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        {% show_chart_error %}
    {% endif %}
</section>

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

    {% if summary %}
        <div class="section-content">
            <div class="row">

                <div class="col col-12 sm-col-12 md-col-3" data-stat-type="median_age">
                    {# Translators: This is a label to identify the median age of enrolled learners. #}
                    {% trans "Median Learner Age" as label %}
                    {% trans "The midpoint of the learner ages, computed from the provided year of birth." as tooltip %}
                    {% summary_point summary.median label tooltip=tooltip %}
                </div>

                <div class="col col-12 sm-col-12 md-col-3" data-stat-type="enrollment_age_under_25">
                    {# Translators: This is a label to identify the number of learners in the age range. #}
                    {% trans "Learners 25 and Under" as label %}
                    {% trans "The percentage of learners aged 25 years or younger (of those who provided a year of birth)." as tooltip %}
                    {% summary_point summary.age_25_and_under|metric_percentage label tooltip=tooltip %}
                </div>

                <div class="col col-12 sm-col-12 md-col-3" data-stat-type="enrollment_age_between_26_40">
                    {# Translators: This is a label to identify the number of learners in the age range. #}
                    {% trans "Learners 26 to 40" as label %}
                    {% trans "The percentage of learners aged from 26 to 40 years (of those who provided a year of birth)." as tooltip %}
                    {% summary_point summary.age_26_to_40|metric_percentage label tooltip=tooltip %}
                </div>

                <div class="col col-12 sm-col-12 md-col-3" data-stat-type="enrollment_age_over_40">
                    {# Translators: This is a label to identify the number of learners in the age range. #}
                    {% trans "Learners 41 and Over" as label %}
                    {% trans "The percentage of learners aged 41 years or older (of those who provided a year of birth)." as tooltip %}
                    {% summary_point summary.age_41_and_over|metric_percentage label tooltip=tooltip %}
                </div>


            </div>
        </div>
    {% else %}
        {% show_metrics_error %}
    {% endif %}
</section>

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

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

</section>

{% endblock %}