{{!
    This file is part of Moodle - https://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 local_kopere_dashboard/dashboard_monitor

    Example context (json):
    {
        "users_link": "https://example.com/users",
        "users_count": 1200,
        "useronline_link": "https://example.com/online-users",
        "useronline_count_5": 50,
        "useronline_count_60": 200,
        "courses_link": "https://example.com/courses",
        "courses_count_all": 300,
        "courses_count_all_visibles": 280,
        "disk_link": "https://example.com/disk-usage",
        "disk_size": "500GB"
    }
}}

<div class="element-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="element-box color_user">
                <div class="label">
                    {{#str}}dashboard_title_user, local_kopere_dashboard{{/str}}</div>
                <div class="value"><a href="{{{users_link}}}">
                    {{{users_count}}}</a></div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="element-box color_online">
                <div class="label">
                    {{#str}}dashboard_title_online, local_kopere_dashboard{{/str}}</div>
                <div class="value"><a href="{{{useronline_link}}}">
                    <span id="user-count-online">{{{useronline_count_5}}}</span>
                    / {{{useronline_count_60}}}</a></div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="element-box color_course">
                <div class="label">
                    {{#str}}dashboard_title_course, local_kopere_dashboard{{/str}}</div>
                <div class="value"><a href="{{{courses_link}}}">
                    {{{courses_count_all}}} / {{{courses_count_all_visibles}}}</a></div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="element-box color_disk">
                <div class="label">
                    {{#str}}dashboard_title_disk, local_kopere_dashboard{{/str}}</div>
                <div class="value"><a href="{{{disk_link}}}">
                    {{{disk_size}}}</a></div>
            </div>
        </div>
    </div>
</div>