{{!
    @template mod_modernvideoplayer/report

    Reporting summary cards + filter strip for a single mod_modernvideoplayer
    instance. The data table itself is rendered by `learners_table` (table_sql)
    immediately after this template, so it is NOT part of this template — that
    is what gives us pagination, sortable headers, and CSV/Excel/ODS download
    for free.

    Context variables required for this template:
    * id - course module id (int)
    * filterurl - non-empty form action URL (string)
    * clearurl - URL that clears all filters (string)
    * hasactivefilters - whether any non-default filter is set (bool)
    * totallearners, completedlearners, completionrate, averagecoverage,
      suspiciousflags, integrityfailures - aggregate KPIs (string|int)
    * search - current search filter value (string)
    * isall, iscompleted, isincomplete - completion-filter selection flags (bool)
    * suspiciousonly - suspicious-only checkbox state (bool)
    * pagesize - currently selected page size (int)
    * pagesizes - [{value:int, selected:bool}, ...] options for the dropdown

    Example context (json):
    {
        "id": 42,
        "filterurl": "/mod/modernvideoplayer/report.php",
        "clearurl": "/mod/modernvideoplayer/report.php?id=42",
        "hasactivefilters": false,
        "totallearners": 25,
        "completedlearners": 17,
        "completionrate": "68%",
        "averagecoverage": "72%",
        "suspiciousflags": 2,
        "integrityfailures": 0,
        "search": "",
        "isall": true,
        "iscompleted": false,
        "isincomplete": false,
        "suspiciousonly": false,
        "pagesize": 25,
        "pagesizes": [{"value":10,"selected":false},{"value":25,"selected":true}]
    }
}}
<div class="row g-3 mb-4">
    <div class="col-md-4 col-xl-2"><div class="card h-100"><div class="card-body"><div class="small text-muted">{{#str}}reporttotallearners, modernvideoplayer{{/str}}</div><div class="h4 mb-0">{{totallearners}}</div></div></div></div>
    <div class="col-md-4 col-xl-2"><div class="card h-100"><div class="card-body"><div class="small text-muted">{{#str}}reportcompletedlearners, modernvideoplayer{{/str}}</div><div class="h4 mb-0">{{completedlearners}}</div></div></div></div>
    <div class="col-md-4 col-xl-2"><div class="card h-100"><div class="card-body"><div class="small text-muted">{{#str}}reportcompletionrate, modernvideoplayer{{/str}}</div><div class="h4 mb-0">{{completionrate}}</div></div></div></div>
    <div class="col-md-4 col-xl-2"><div class="card h-100"><div class="card-body"><div class="small text-muted">{{#str}}reportaveragecoverage, modernvideoplayer{{/str}}</div><div class="h4 mb-0">{{averagecoverage}}</div></div></div></div>
    <div class="col-md-4 col-xl-2"><div class="card h-100"><div class="card-body"><div class="small text-muted">{{#str}}reportsuspiciousflags, modernvideoplayer{{/str}}</div><div class="h4 mb-0">{{suspiciousflags}}</div></div></div></div>
    <div class="col-md-4 col-xl-2"><div class="card h-100"><div class="card-body"><div class="small text-muted">{{#str}}reportintegrityfailures, modernvideoplayer{{/str}}</div><div class="h4 mb-0">{{integrityfailures}}</div></div></div></div>
</div>

<form action="{{filterurl}}" method="get" class="card card-body mb-4">
    <input type="hidden" name="id" value="{{id}}">
    <div class="row g-3 align-items-end">
        <div class="col-md-3">
            <label class="form-label" for="id_completionfilter">{{#str}}filtercompletion, modernvideoplayer{{/str}}</label>
            <select class="custom-select form-select" name="completionfilter" id="id_completionfilter">
                <option value="all" {{#isall}}selected{{/isall}}>{{#str}}filterall, modernvideoplayer{{/str}}</option>
                <option value="completed" {{#iscompleted}}selected{{/iscompleted}}>{{#str}}filtercompleted, modernvideoplayer{{/str}}</option>
                <option value="incomplete" {{#isincomplete}}selected{{/isincomplete}}>{{#str}}filterincomplete, modernvideoplayer{{/str}}</option>
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label" for="id_search">{{#str}}filtersearch, modernvideoplayer{{/str}}</label>
            <input class="form-control" type="text" name="search" id="id_search" value="{{search}}">
        </div>
        <div class="col-md-2">
            <label class="form-label" for="id_pagesize">{{#str}}pagesize, modernvideoplayer{{/str}}</label>
            <select class="custom-select form-select" name="pagesize" id="id_pagesize">
                {{#pagesizes}}
                    <option value="{{value}}" {{#selected}}selected{{/selected}}>{{value}}</option>
                {{/pagesizes}}
            </select>
        </div>
        <div class="col-md-2">
            <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" name="suspiciousonly" value="1" id="id_suspiciousonly" {{#suspiciousonly}}checked{{/suspiciousonly}}>
                <label class="form-check-label" for="id_suspiciousonly">{{#str}}filtersuspiciousonly, modernvideoplayer{{/str}}</label>
            </div>
        </div>
        <div class="col-md-2 d-flex gap-2">
            <button class="btn btn-primary" type="submit">{{#str}}filterapply, modernvideoplayer{{/str}}</button>
            {{#hasactivefilters}}
                <a class="btn btn-link" href="{{clearurl}}">{{#str}}filterclear, modernvideoplayer{{/str}}</a>
            {{/hasactivefilters}}
        </div>
    </div>
</form>
