{{!
    @template local_kid/comparateur

    * hasspromotion - bool
    * message - string, only when !hasspromotion
    * filterform - { action, studentoptions: [{id,label,checked}],
      sourcegroups: [{label, options: [{key,label,checked}]}],
      competencyoptions: [{id,label,checked}], levelchips: [{code,label,pressed}],
      showcomments, onlyobserved }
    * hasselection - bool
    * emptymessage - string
    * studentcards - [{ studentname, competencycount, sourcecount, groupheaders: [{label,span}],
      sourceheaders: [{label,url}], hasrows, rows: [{competencycode, competencylabel, studentname,
      cells: [{outofscope, niveaulabel, niveauclass, hascomment, commentshort, commentfull,
      commentislong, saisieurl, sourcelabel, sourcetypelabel}]}] }]
    * stats - string
    * canexport - bool
    * csvurl - string
    * xlsxurl - string
    * canmanagefavoris - bool
    * favoris - [{id, name, configjson}]
    * sesskey - string
}}
<div class="local-kid-comparateur fr-scope">
    {{^hasspromotion}}
    {{> local_kid/empty_state}}
    {{/hasspromotion}}

    {{#hasspromotion}}
    <div class="kid-comparateur__layout">
        <aside class="kid-comparateur__filters">
            <form method="get" action="{{filterform.action}}" id="kid-comparateur-form">
                <input type="hidden" name="promotionid" value="{{filterform.promotionid}}">
                {{#canmanagefavoris}}
                <div class="kid-comparateur__favgroup">
                    <div class="kid-comparateur__label">{{#str}}comparateur_favoris_title, local_kid{{/str}}</div>
                    <div class="kid-comparateur__favsave">
                        <div class="fr-input-group fr-mb-0">
                            <label class="fr-label fr-sr-only" for="kid-comparateur-favname">{{#str}}comparateur_favoris_placeholder, local_kid{{/str}}</label>
                            <input type="text" class="fr-input" id="kid-comparateur-favname" placeholder="{{#str}}comparateur_favoris_placeholder, local_kid{{/str}}">
                        </div>
                        <button type="button" class="fr-btn fr-btn--secondary fr-btn--sm" id="kid-comparateur-favsave">{{#str}}comparateur_favoris_save, local_kid{{/str}}</button>
                    </div>
                    <div class="kid-comparateur__favlist" id="kid-comparateur-favlist">
                        {{#favoris}}
                        <div class="kid-comparateur__favitem" data-favori-id="{{id}}" data-favori-config="{{configjson}}">
                            <button type="button" class="fr-link kid-comparateur__favload">{{name}}</button>
                            <button type="button" class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-icon-edit-line kid-comparateur__favicon" data-favori-action="rename" aria-label="{{#str}}comparateur_favoris_rename, local_kid{{/str}}"></button>
                            <button type="button" class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-icon-delete-line kid-comparateur__favicon kid-comparateur__favicon--danger" data-favori-action="delete" aria-label="{{#str}}comparateur_favoris_delete, local_kid{{/str}}"></button>
                        </div>
                        {{/favoris}}
                    </div>
                    {{^favoris}}
                    <p class="fr-text--sm kid-comparateur__favempty">{{#str}}comparateur_favoris_empty, local_kid{{/str}}</p>
                    {{/favoris}}
                </div>
                {{/canmanagefavoris}}

                <details class="kid-comparateur__fgroup" open>
                    <summary>{{#str}}comparateur_filter_students, local_kid{{/str}}</summary>
                    <div class="fr-input-group fr-mb-1w">
                        <input type="search" class="fr-input kid-comparateur__search" data-filter-target="students" placeholder="{{#str}}comparateur_search, local_kid{{/str}}">
                    </div>
                    <div class="kid-comparateur__actions">
                        <button type="button" class="fr-link fr-text--sm" data-checkall="students">{{#str}}comparateur_selectall, local_kid{{/str}}</button>
                        <button type="button" class="fr-link fr-text--sm" data-checknone="students">{{#str}}comparateur_selectnone, local_kid{{/str}}</button>
                    </div>
                    <div class="kid-comparateur__optlist" data-optlist="students">
                        {{#filterform.studentoptions}}
                        <div class="kid-comparateur__opt fr-checkbox-group fr-checkbox-group--sm">
                            <input type="checkbox" id="kid-cmp-student-{{id}}" name="studentids[]" value="{{id}}" {{#checked}}checked{{/checked}}>
                            <label class="fr-label" for="kid-cmp-student-{{id}}">{{label}}</label>
                        </div>
                        {{/filterform.studentoptions}}
                    </div>
                </details>

                <details class="kid-comparateur__fgroup" open>
                    <summary>{{#str}}comparateur_filter_sources, local_kid{{/str}}</summary>
                    <div class="fr-input-group fr-mb-1w">
                        <input type="search" class="fr-input kid-comparateur__search" data-filter-target="sources" placeholder="{{#str}}comparateur_search, local_kid{{/str}}">
                    </div>
                    <div class="kid-comparateur__actions">
                        <button type="button" class="fr-link fr-text--sm" data-checkall="sources">{{#str}}comparateur_selectall, local_kid{{/str}}</button>
                        <button type="button" class="fr-link fr-text--sm" data-checknone="sources">{{#str}}comparateur_selectnone, local_kid{{/str}}</button>
                    </div>
                    <div class="kid-comparateur__optlist" data-optlist="sources">
                        {{#filterform.sourcegroups}}
                        <div class="kid-comparateur__optgroup">{{label}}</div>
                        {{#options}}
                        <div class="kid-comparateur__opt fr-checkbox-group fr-checkbox-group--sm">
                            <input type="checkbox" id="kid-cmp-source-{{key}}" name="sourcekeys[]" value="{{key}}" {{#checked}}checked{{/checked}}>
                            <label class="fr-label" for="kid-cmp-source-{{key}}">{{label}}</label>
                        </div>
                        {{/options}}
                        {{/filterform.sourcegroups}}
                    </div>
                </details>

                <div class="kid-comparateur__fgroup">
                    <div class="kid-comparateur__label">{{#str}}comparateur_filter_levels, local_kid{{/str}}</div>
                    <div class="kid-comparateur__chipset">
                        {{#filterform.levelchips}}
                        <label class="kid-fchip {{#pressed}}kid-fchip--pressed{{/pressed}}">
                            <input type="checkbox" name="niveaucodes[]" value="{{code}}" {{#pressed}}checked{{/pressed}} class="kid-comparateur__chipinput">
                            {{label}}
                        </label>
                        {{/filterform.levelchips}}
                    </div>
                </div>

                <details class="kid-comparateur__fgroup">
                    <summary>{{#str}}comparateur_filter_competencies, local_kid{{/str}}</summary>
                    <div class="fr-input-group fr-mb-1w">
                        <input type="search" class="fr-input kid-comparateur__search" data-filter-target="competencies" placeholder="{{#str}}comparateur_search, local_kid{{/str}}">
                    </div>
                    <div class="kid-comparateur__actions">
                        <button type="button" class="fr-link fr-text--sm" data-checkall="competencies">{{#str}}comparateur_selectall, local_kid{{/str}}</button>
                        <button type="button" class="fr-link fr-text--sm" data-checknone="competencies">{{#str}}comparateur_selectnone, local_kid{{/str}}</button>
                    </div>
                    <div class="kid-comparateur__optlist" data-optlist="competencies">
                        {{#filterform.competencyoptions}}
                        <div class="kid-comparateur__opt fr-checkbox-group fr-checkbox-group--sm">
                            <input type="checkbox" id="kid-cmp-comp-{{id}}" name="competencyids[]" value="{{id}}" {{#checked}}checked{{/checked}}>
                            <label class="fr-label" for="kid-cmp-comp-{{id}}">{{label}}</label>
                        </div>
                        {{/filterform.competencyoptions}}
                    </div>
                </details>

                <div class="kid-comparateur__fgroup">
                    <div class="fr-toggle fr-mb-1w">
                        <input type="checkbox" class="fr-toggle__input" id="kid-cmp-showcomments" name="showcomments" value="1" {{#filterform.showcomments}}checked{{/filterform.showcomments}}>
                        <label class="fr-toggle__label" for="kid-cmp-showcomments" data-fr-checked-label="{{#str}}yes, moodle{{/str}}" data-fr-unchecked-label="{{#str}}no, moodle{{/str}}">{{#str}}comparateur_toggle_comments, local_kid{{/str}}</label>
                    </div>
                    <div class="fr-toggle">
                        <input type="checkbox" class="fr-toggle__input" id="kid-cmp-onlyobserved" name="onlyobserved" value="1" {{#filterform.onlyobserved}}checked{{/filterform.onlyobserved}}>
                        <label class="fr-toggle__label" for="kid-cmp-onlyobserved" data-fr-checked-label="{{#str}}yes, moodle{{/str}}" data-fr-unchecked-label="{{#str}}no, moodle{{/str}}">{{#str}}comparateur_toggle_onlyobserved, local_kid{{/str}}</label>
                    </div>
                </div>

                <button type="submit" class="fr-btn kid-comparateur__apply">{{#str}}comparateur_filter_apply, local_kid{{/str}}</button>
            </form>
        </aside>

        <div class="kid-comparateur__results" id="kid-comparateur-results" data-region="kid-comparateur-results">
            {{> local_kid/comparateur_results}}
        </div>
    </div>

    <div class="kid-comparateur__scrim" id="kid-comparateur-scrim"></div>
    <aside class="kid-comparateur__drawer" id="kid-comparateur-drawer" aria-hidden="true" inert>
        <header>
            <h3 id="kid-comparateur-drawer-title">{{#str}}comparateur_drawer_title, local_kid{{/str}}</h3>
            <button type="button" class="kid-comparateur__close" id="kid-comparateur-drawer-close" aria-label="{{#str}}comparateur_drawer_close, local_kid{{/str}}">×</button>
        </header>
        <div class="kid-comparateur__drawerbody" id="kid-comparateur-drawer-body"></div>
    </aside>
    {{/hasspromotion}}
</div>
