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

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template mod_coursesearch/search_form

    Course search form template.

    Context variables required for this template:
    * formurl - The form action URL
    * cmid - The course module ID
    * placeholder - The placeholder text for the search input
    * query - The current search query (optional)
    * embedded - Whether the form is embedded in the course page
    * hasfilters - Whether there are filter options
    * filters - Array of filter options with: value, label, id, checked
    * hasmodtypes - Whether there are module type options
    * modtypes - Array of module type options with: value, label, id, checked

    Example context (json):
    {
        "formurl": "/mod/coursesearch/view.php?id=123",
        "cmid": 123,
        "placeholder": "Search this course...",
        "query": "",
        "embedded": false,
        "hasfilters": true,
        "filters": [
            {"value": "all", "label": "All course content", "id": "filter_all", "checked": true},
            {"value": "forums", "label": "Forums only", "id": "filter_forums", "checked": false}
        ],
        "modtypes": [
            {"value": "assign", "label": "Assignment", "id": "modtype_assign", "checked": true},
            {"value": "quiz", "label": "Quiz", "id": "modtype_quiz", "checked": false}
        ],
        "hasintro": true,
        "intro": "<p>Search through this course content.</p>"
    }
}}
{{#hasintro}}
<div class="box generalbox py-3" id="intro">
    {{{intro}}}
</div>
{{/hasintro}}

<div class="coursesearch-container{{#embedded}} coursesearch-embedded{{/embedded}}">
    <form action="{{formurl}}" method="get" class="coursesearch-form">
        <input type="hidden" name="id" value="{{cmid}}">

        {{#hasmodtypes}}
        {{^embedded}}
        <div class="coursesearch-modtypes-wrapper mb-3">
            <details class="coursesearch-modtypes"{{#hasselectedmodtypes}} open{{/hasselectedmodtypes}}>
                <summary class="coursesearch-modtypes-summary">
                    <span class="coursesearch-modtypes-icon">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M2 4h12M4 8h8M6 12h4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <span class="coursesearch-modtypes-title">{{#str}} searchmodtypes, mod_coursesearch {{/str}}</span>
                    <span class="coursesearch-modtypes-arrow">
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </span>
                </summary>
            </details>
            <div class="coursesearch-modtypes-content" id="coursesearch-modtypes-content-{{cmid}}">
                <div class="coursesearch-chipset">
                    {{#modtypes}}
                    <label class="coursesearch-chip" for="{{id}}">
                        <input type="checkbox"
                               name="modtypes[]"
                               id="{{id}}"
                               value="{{value}}"
                               {{#checked}}checked="checked"{{/checked}}>
                        <span class="coursesearch-chip-label">
                            <span class="coursesearch-chip-text">{{label}}</span>
                            <span class="coursesearch-chip-checkmark">
                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11.6667 3.5L5.25 9.91667L2.33334 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                        </span>
                    </label>
                    {{/modtypes}}
                </div>
                <div class="coursesearch-modtypes-help">
                    {{#str}} searchmodtypes_help, mod_coursesearch {{/str}}
                </div>
            </div>
        </div>
        <script>
        (function() {
            var details = document.querySelector('.coursesearch-modtypes-wrapper .coursesearch-modtypes');
            var content = document.getElementById('coursesearch-modtypes-content-{{cmid}}');
            if (details && content) {
                var updateVisibility = function() {
                    content.style.display = details.open ? 'block' : 'none';
                };
                details.addEventListener('toggle', updateVisibility);
                updateVisibility();
            }
        })();
        </script>
        {{/embedded}}
        {{/hasmodtypes}}

        <div class="input-group">
            <input type="text"
                   name="query"
                   value="{{query}}"
                   class="form-control"
                   placeholder="{{placeholder}}"
                   aria-label="{{#str}} search, mod_coursesearch {{/str}}">
            <div class="input-group-append">
                <button type="submit" class="btn btn-primary" aria-label="{{#str}} search, mod_coursesearch {{/str}}">
                    {{#str}} search, mod_coursesearch {{/str}}
                </button>
            </div>
        </div>
    </form>
</div>

