{{!
    @template local_kid/student_nav

    Shared header for the three data-entry screens (Évaluations, Stages,
    CAPP) once a student is selected: selector + previous/next + position
    counter. Works without JS (real links + a GET form); amd/src/student_nav.js
    progressively enhances it into an in-place AJAX swap of the enclosing
    [data-region="kid-grid-student"] container.

    * screen - string, 'evaluations'|'stages'|'capp'
    * itemid - int
    * itemparam - string, URL param name for the item id (evalid/stageid/sessionid)
    * formaction - string, controller URL (no query string)
    * options - [{id, name, selected}]
    * hasoptions - bool
    * hasprev, hasnext - bool
    * prevurl, nexturl - string, empty when disabled
    * position, total - int
    * counterlabel - string, accessible "élève X sur Y" label
}}
{{#hasoptions}}
<div class="kid-student-nav"
     data-region="kid-student-nav"
     data-screen="{{screen}}"
     data-itemid="{{itemid}}"
     data-itemparam="{{itemparam}}">
    <a class="fr-btn fr-btn--secondary fr-btn--sm fr-icon-arrow-left-s-line fr-btn--icon-left kid-student-nav__prev{{^hasprev}} disabled{{/hasprev}}"
       href="{{^hasprev}}#{{/hasprev}}{{prevurl}}"
       data-direction="prev"
       {{#hasprev}}data-studentid="{{prevstudentid}}"{{/hasprev}}
       {{^hasprev}}aria-disabled="true" tabindex="-1"{{/hasprev}}>
        {{#str}}student_nav_previous, local_kid{{/str}}
    </a>

    <form method="get" action="{{formaction}}" class="kid-student-nav__form" data-role="kid-student-nav-form">
        <input type="hidden" name="{{itemparam}}" value="{{itemid}}">
        <div class="fr-select-group fr-mb-0">
            <label class="fr-label fr-sr-only" for="kid-student-nav-select-{{screen}}">{{#str}}student_nav_select_label, local_kid{{/str}}</label>
            <select name="studentid" id="kid-student-nav-select-{{screen}}" class="fr-select kid-student-nav__select" data-role="kid-student-nav-select">
                {{#options}}
                <option value="{{id}}"{{#selected}} selected{{/selected}}>{{name}}</option>
                {{/options}}
            </select>
        </div>
        <button type="submit" class="fr-btn fr-btn--secondary fr-btn--sm">{{#str}}student_nav_go, local_kid{{/str}}</button>
    </form>

    <span class="kid-student-nav__counter fr-text--sm" data-role="kid-student-nav-counter" aria-label="{{counterlabel}}">{{position}} / {{total}}</span>

    <a class="fr-btn fr-btn--secondary fr-btn--sm fr-icon-arrow-right-s-line fr-btn--icon-right kid-student-nav__next{{^hasnext}} disabled{{/hasnext}}"
       href="{{^hasnext}}#{{/hasnext}}{{nexturl}}"
       data-direction="next"
       {{#hasnext}}data-studentid="{{nextstudentid}}"{{/hasnext}}
       {{^hasnext}}aria-disabled="true" tabindex="-1"{{/hasnext}}>
        {{#str}}student_nav_next, local_kid{{/str}}
    </a>
</div>
{{/hasoptions}}
