{{!
    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_courses/index

    Example context (json):
    {
        "q": "math",
        "placeholder": "Search by course name, shortname, or ID...",
        "help": "Type at least 2 characters to see suggestions. Press Enter or click Search.",
        "emptytitle": "Search for a course",
        "hasresults": true,
        "noresults": "No courses found for your search.",
        "results": [
            {
                "id": 12,
                "fullname": "Mathematics 101 - Basics",
                "shortname": "MATH101",
                "category": "Undergraduate / 1st Semester",
                "visible": true,
                "modified": "2026-03-03 18:40",
                "viewurl": "https://moodle.example.com/local/koperedashboard_courses/view.php?id=12",
                "courseurl": "https://moodle.example.com/course/view.php?id=12"
            },
            {
                "id": 34,
                "fullname": "Advanced Math (Hidden)",
                "shortname": "MATH-ADV",
                "category": "Undergraduate / Electives",
                "visible": false,
                "modified": "2026-02-21 09:10",
                "viewurl": "https://moodle.example.com/local/koperedashboard_courses/view.php?id=34",
                "courseurl": "https://moodle.example.com/course/view.php?id=34"
            }
        ]
    }
}}

<div class="kopere_dashboard-card">
    <div class="kopere_dashboard-student-grid">
        <div class="form-group" style="position: relative;">
            <label for="kopere_dashboard-courses-search">{{#str}}search_label, koperedashboard_courses{{/str}}</label>
            <div class="input-group">
                <input type="text"
                       id="kopere_dashboard-courses-search"
                       class="form-control"
                       name="q"
                       value="{{{q}}}"
                       placeholder="{{{placeholder}}}"
                       autocomplete="off">
                <div class="input-group-append">
                    <button type="button" class="btn btn-primary" id="kopere_dashboard-courses-search-btn">
                        {{#str}}search, core{{/str}}
                    </button>
                </div>
            </div>
            <small class="form-text text-muted">{{{help}}}</small>

            <div id="kopere_dashboard-courses-suggest"
                 class="list-group"
                 style="position: absolute; left: 0; right: 0; top: 86px; z-index: 10; display: none;"></div>
        </div>
    </div>
</div>

<div class="kopere_dashboard-card" style="margin-top: 16px;">
    {{^q}}
        <h4 style="margin: 0 0 12px 0;">{{{emptytitle}}}</h4>
    {{/q}}

    {{#hasresults}}
        <table class="table table-striped kopere_dashboard-table">
            <thead>
            <tr>
                <th style="width: 70px;">{{#str}}col_id, koperedashboard_courses{{/str}}</th>
                <th>{{#str}}col_fullname, koperedashboard_courses{{/str}}</th>
                <th>{{#str}}col_shortname, koperedashboard_courses{{/str}}</th>
                <th>{{#str}}col_category, koperedashboard_courses{{/str}}</th>
                <th style="width: 110px;">{{#str}}col_visible, koperedashboard_courses{{/str}}</th>
                <th style="width: 170px;">{{#str}}col_modified, koperedashboard_courses{{/str}}</th>
                <th style="width: 220px;">{{#str}}col_actions, koperedashboard_courses{{/str}}</th>
            </tr>
            </thead>
            <tbody>
            {{#results}}
                <tr class="{{^visible}}table-warning{{/visible}}">
                    <td>{{{id}}}</td>
                    <td><strong><a href="{{{viewurl}}}">{{{fullname}}}</a></strong></td>
                    <td>{{{shortname}}}</td>
                    <td>{{{category}}}</td>
                    <td>
                        {{#visible}}
                            <span class="badge text-bg-success">{{#str}}yes, core{{/str}}</span>
                        {{/visible}}
                        {{^visible}}
                            <span class="badge text-bg-secondary">{{#str}}no, core{{/str}}</span>
                        {{/visible}}
                    </td>
                    <td>{{{modified}}}</td>
                    <td>
                        <a class="btn btn-primary btn-sm" href="{{{viewurl}}}">
                            {{#str}}action_open, koperedashboard_courses{{/str}}</a>
                        <a class="btn btn-secondary btn-sm" href="{{{courseurl}}}">
                            {{#str}}action_open_course, koperedashboard_courses{{/str}}</a>
                    </td>
                </tr>
            {{/results}}
            </tbody>
        </table>
    {{/hasresults}}

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