{{!
    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 koperedashboard_users/online

    Example context (json):
    {
        "title": "Setting title",
        "formurl": "http://moodlesite/..."
    }
}}

{{!
    @template koperedashboard_users/online
}}

<div class="kopere_dashboard-card">
    <div style="display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap;">
        <div>
            <h4 style="margin:0 0 6px 0;">{{{title}}}</h4>
            <div class="text-muted">{{{help}}}</div>
        </div>
        <div class="kopere_dashboard-chip" style="font-size:14px;">
            {{#str}}online_metric, koperedashboard_users{{/str}}: <strong>{{{countonline}}}</strong>
        </div>
    </div>

    <form method="get" action="{{{formurl}}}"
          style="margin-top:16px; display:flex; gap:12px; align-items:end; flex-wrap:wrap;">
        <div class="form-group" style="margin-bottom:0; min-width:180px;">
            <label for="kopere_dashboard-users-online-minutes">{{#str}}
                online_filter_minutes, koperedashboard_users{{/str}}</label>
            <select class="form-control" id="kopere_dashboard-users-online-minutes" name="minutes">
                {{#minutesoptions}}
                    <option value="{{{value}}}" {{#selected}}selected{{/selected}}>{{{label}}}</option>
                {{/minutesoptions}}
            </select>
        </div>
        <div>
            <button type="submit" class="btn btn-primary">{{#str}}
                online_filter_submit, koperedashboard_users{{/str}}</button>
        </div>
    </form>
</div>

<div class="kopere_dashboard-card" style="margin-top: 16px;">
    {{#hasresults}}
        <table class="table table-striped kopere_dashboard-card-table">
            <thead>
            <tr>
                <th>{{#str}}col_name, koperedashboard_users{{/str}}</th>
                <th>{{#str}}col_username, koperedashboard_users{{/str}}</th>
                <th>{{#str}}col_email, koperedashboard_users{{/str}}</th>
                <th>{{#str}}col_lastaccess, koperedashboard_users{{/str}}</th>
                <th style="width: 220px;">{{#str}}col_actions, koperedashboard_users{{/str}}</th>
            </tr>
            </thead>
            <tbody>
            {{#results}}
                <tr class="{{#suspended}}table-warning{{/suspended}}">
                    <td>
                        <img src="{{{picture}}}" alt=""
                             style="width: 28px; height: 28px; border-radius: 14px; margin-right: 8px;">
                        <strong><a href="{{{viewurl}}}">{{{name}}}</a></strong>
                    </td>
                    <td>{{{username}}}</td>
                    <td>{{{email}}}</td>
                    <td>{{{lastaccess}}}</td>
                    <td>
                        <a class="btn btn-primary btn-sm" href="{{{viewurl}}}">
                            {{#str}}action_open, koperedashboard_users{{/str}}</a>
                        <a class="btn btn-secondary btn-sm" href="{{{profileurl}}}">
                            {{#str}}action_profile, koperedashboard_users{{/str}}</a>
                    </td>
                </tr>
            {{/results}}
            </tbody>
        </table>
    {{/hasresults}}

    {{^hasresults}}
        <div class="alert alert-info" style="margin-bottom: 0;">{{{noresults}}}</div>
    {{/hasresults}}
</div>
