{{!
    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_report_chart

    This is a copy of core/chart.

    The purpose of copying is to enable custom initialization of the chart, as not all the config options can be passed through
    the chart renderable objects. Thus, the js section is implemented as a block to allow overriding in specific charts templates.
    See core/chart for the required context.
}}
<div class="chart-area" id="chart-area-{{uniqid}}">
    <div class="chart-image" role="presentation" aria-describedby="chart-table-data-{{uniqid}}"></div>
    <div class="chart-table {{^withtable}}accesshide{{/withtable}}">
        <p class="chart-table-expand">
            <a href="#" aria-controls="chart-table-data-{{uniqid}}" role="button">
                {{#str}}showchartdata, moodle{{/str}}
            </a>
        </p>
        <div class="chart-table-data" id="chart-table-data-{{uniqid}}" {{#withtable}}role="complementary" aria-expanded="false"{{/withtable}}></div>
    </div>
</div>

{{$initjs}}
    {{#js}}
        require([
            'jquery',
            'core/chart_builder',
            'core/chart_output_chartjs',
            'core/chart_output_htmltable',
        ], function(
            $,
            Builder,
            Output,
            OutputTable
        ) {
            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) {
                new Output(chartImage, ChartInst);
                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}}