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

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

{% block javascript %}
{{ block.super }}
    {% render_bundle 'enrollment-demographics-gender-main' %}
{% 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 "What is the learner gender breakdown?" %}</span>
                </div>
            </div>
        </div>
    </div>

    {% if js_data.course.genders %}
        <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 graph presents data for the {{ value }}% of enrolled learners who specified their gender.{% endblocktrans %}
                    {% endcaptureas %}
                    {% include "chart_tooltip.html" with tip_text=tip_text track_category="bar"%}
                    <div id="enrollment-chart-view" class="analytics-chart" data-track-type="hover"
                        data-track-event="edx.bi.graph.interacted"
                        data-track-category="enrollment_demographics_gender">
                        {% include "loading.html" %}
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        {% show_chart_error %}
    {% endif %}
</section>

<section class="view-section">
    <div class="section-heading">
        <h4 class="section-title">{% trans "Gender Breakdown Over Time" %}</h4>

        <div class="section-actions">
            {% if js_data.course.genderTrend %}
                <a href="{% url 'courses:csv:enrollment_demographics_gender' 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="gender">
                    <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.genderTrend %}
        <div class="section-content section-data-table" data-role="enrollment-table">
            {% include "loading.html" %}
        </div>
    {% else %}
        {% show_table_error %}
    {% endif %}

</section>

{% endblock %}