{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template mod_adaptivequiz/attempt_answers_distribution_report

    Renders a bar chart for the answers distribution data.

    Context variables required for this template:
    * showchartstacked - whether the chart should be displayed in stacked form
    * userid - current user id
    * adaptivequizid - id of the current adaptive quiz instance

    Data attributes required for JS:
    * data-action

    Example context (json):
    {
        showchartstacked: true,
        userid: 5,
        adaptivequizid: 3
    }
}}
<div class="mdl-align mb-3">
    <span class="mr-1">
        <input id="answers-distribution-chart-stacked" type="checkbox" data-action="set-answers-distribution-chart-stacked" {{#showchartstacked}}checked{{/showchartstacked}} />
        <label class="mr-1" for="answers-distribution-chart-stacked">{{#str}}reportanswersdistributionchartdisplaystacked, adaptivequiz{{/str}}</label>
    </span>
</div>
{{< mod_adaptivequiz/attempt_report_chart }}
    {{$initjs}}
        {{#js}}
            require([
                'jquery',
                'core/chart_builder',
                'core/chart_output_chartjs',
                'core/chart_output_htmltable',
                'mod_adaptivequiz/attempt_answers_distribution_chart_manager'
            ], function(
                $,
                Builder,
                Output,
                OutputTable,
                ChartManager
            ) {
                var data = {{{chartdata}}},
                    uniqid = "{{uniqid}}",
                    chartArea = $('#chart-area-' + uniqid),
                    chartImage = chartArea.find('.chart-image'),
                    chartTable = chartArea.find('.chart-table-data'),
                    chartLink = chartArea.find('.chart-table-expand a');

                    Builder.make(data).then(function(ChartInst) {
                        const output = new Output(chartImage, ChartInst);
                        ChartManager.init(output, ChartInst, {{userid}}, {{adaptivequizid}});

                        new OutputTable(chartTable, ChartInst);
                    });

                chartLink.on('click', function(e) {
                    e.preventDefault();

                    if (chartTable.is(':visible')) {
                        chartTable.hide();
                        chartLink.text({{#quote}}{{#str}}showchartdata, moodle{{/str}}{{/quote}});
                        chartTable.attr('aria-expanded', false);
                    } else {
                        chartTable.show();
                        chartLink.text({{#quote}}{{#str}}hidechartdata, moodle{{/str}}{{/quote}});
                        chartTable.attr('aria-expanded', true);
                    }
                });
            });
        {{/js}}
    {{/initjs}}
{{/ mod_adaptivequiz/attempt_report_chart }}