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

    Edwiser Reports
    @package   local_edwiserreports
    @copyright (c) 2022 WisdmLabs (https://wisdmlabs.com/)
    @author    Yogesh Shirsath
    @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

}}
{{!
    @template local_edwiserreports/insight

    Display insight data in card.

    Context variables required for this template:

    Example context (json):
    {
        "insight" : {
            "title" : "Title",
            "value" : 123,
            "difference" : {
                "direction" : true,
                "value" : 22
            }
        },
        "details" : {
            "data" : [{
                "title" : "Insight detail 1",
                "value" : 121
            }, {
                "title" : "Insight detail 2",
                "value" : 212
            }]
        }
    }
}}
<div class="insight-card my-3">
    {{#insight}}
    <div class="insight-body p-3">
        <div class="body-wrap">
            <div class="insight-wrap d-flex">
                <label class="insight-value pr-2 theme-primary-text h3" data-oldvalue="{{{oldvalue}}}">{{{value}}}</label>
                {{#difference}}
                    <span class=" {{rtlclass}} insight-direction pr-2 insight-{{#direction}}success{{/direction}}{{^direction}}danger{{/direction}}">
                        <span class="value">
                            {{#direction}}
                                {{#pix}} uparrow, local_edwiserreports {{/pix}}
                            {{/direction}}
                            {{^direction}}
                                {{#pix}} downarrow, local_edwiserreports {{/pix}}
                            {{/direction}}
                            {{value}}%
                        </span>
                    </span>
                {{/difference}}
            </div>
            <label class="insight-title">{{title}}</label>
        </div>
    </div>
    {{/insight}}
    {{#details}}
    <div class="insight-divider"></div>
    <div class="insight-details p-3">
        <div class="details-wrap">
            {{#data}}
            <div class="detail">
                {{title}}: <span class="font-weight-bold">{{value}}</span>
            </div>
            {{/data}}
        </div>
    </div>
    {{/details}}
</div>